Mobile website scaling

I'm new to the discussion boards and relatively new to Dreamweaver. I'm designing a mobile website and have come across the issue that the pages are not fitting as I had hoped.  The idea is to have the page scaled to fit the width of the users device as the website is intended for mobile devices. I don't really know where the issue lies or where to begin as I have designed the pages in photoshop and exported the images as slices.
The website is: http://www.hdsarchitecture.com/home_basic.html
and the code is:
code
<html>
<head>
<title>home_sliced</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('html_images/profile_dn.gif','html_images/full_site_dn.gif','htm l_images/phone_dn.gif','html_images/email_dn.gif','html_images/location_dn.gif','html_imag es/portfolio_dn.gif','html_images/press_dn.gif')">
<!-- Save for Web Slices (home_sliced.psd) -->
<table width="640" height="1025" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
          <tr>
                    <td colspan="6">
                              <img src="html_images/blank_top.gif" width="390" height="70" alt=""></td>
                    <td colspan="2" rowspan="2"><a href="home_basic.html"><img src="html_images/logo.gif" alt="" width="250" height="100" border="0"></a></td>
          </tr>
          <tr>
                    <td><a href="profile_company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('profile','','html_images/profile_dn.gif',1)"><img src="html_images/profile_up.gif" name="profile" width="115" height="30" border="0"></a></td>
                    <td colspan="3"><a href="portfolio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('portfolio','','html_images/portfolio_dn.gif',1)"><img src="html_images/portfolio_up.gif" name="portfolio" width="165" height="30" border="0"></a></td>
                    <td colspan="2"><a href="press.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('press','','html_images/press_dn.gif',1)"><img src="html_images/press_up.gif" name="press" width="110" height="30" border="0"></a></td>
          </tr>
          <tr>
                    <td colspan="8">
                              <img src="html_images/home_image.jpg" width="640" height="700" alt=""></td>
          </tr>
          <tr>
                    <td colspan="8">
                              <img src="html_images/home_text.gif" width="640" height="190" alt=""></td>
          </tr>
          <tr>
                    <td colspan="2"><a href="http://www.hdsarchitecture.com/home.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('full_site','','html_images/full_site_dn.gif',1)"><img src="html_images/full_site_up.gif" name="full_site" width="130" height="34" border="0"></a></td>
                    <td>
                              <img src="html_images/blank_bottom.gif" width="140" height="34" alt=""></td>
                    <td colspan="2"><a href="tel:(617) 714-5870" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('phone','','html_images/phone_dn.gif',1)"><img src="html_images/phone_up.gif" name="phone" width="115" height="34" border="0"></a></td>
                    <td colspan="2"><a href="mailto:[email protected]" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('email','','html_images/email_dn.gif',1)"><img src="html_images/email_up.gif" name="email" width="115" height="34" border="0"></a></td>
                    <td><a href="https://maps.google.com/maps?ie=UTF-8&q=hds+architecture&fb=1&gl=us&hq=hds+architecture&ci d=0,0,16417967373915408692&ei=QsGoUavUK62q4AOfwYAw&ved=0CKwBEPwSMAA" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('location','','html_images/location_dn.gif',1)"><img src="html_images/location_up.gif" name="location" width="140" height="34" border="0"></a></td>
          </tr>
          <tr>
                    <td>
                              <img src="html_images/spacer.gif" width="115" height="1" alt=""></td>
                    <td>
                              <img src="html_images/spacer.gif" width="15" height="1" alt=""></td>
                    <td>
                              <img src="html_images/spacer.gif" width="140" height="1" alt=""></td>
                    <td>
                              <img src="html_images/spacer.gif" width="10" height="1" alt=""></td>
                    <td>
                              <img src="html_images/spacer.gif" width="105" height="1" alt=""></td>
                    <td>
                              <img src="html_images/spacer.gif" width="5" height="1" alt=""></td>
                    <td>
                              <img src="html_images/spacer.gif" width="110" height="1" alt=""></td>
                    <td>
                              <img src="html_images/spacer.gif" width="140" height="1" alt=""></td>
          </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Photoshop generated Image slices and tables are used for quick mock-ups to show a client before you actually build the site with HTML & CSS code in Dreamweaver.   PS code isn't stable enough for real web sites.  Use PS for images only.
I should also mention that those MM Rollover menus are not very good for web accessibility because translators, search engines and screen readers can't read images of text.  You're much better off using CSS styled text links for menus rather than images.
When creating fixed width layouts, you must factor in the browser's chrome.  640px may be the device width but not the viewport width.  Browsers typically reserve several pixels for scrollbars and borders.
If you want to build a responsive layout in DW, download the free Bootstrap extension from DMX Zone.  This will make your work much shorter and give you a layout that performs well in all mobile, tablet & desktop devices.
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Nancy O.

Similar Messages

  • How to set up slider mobile menu widget on master and pages of mobile website in Muse

    Adobe Muse Slider Mobile Menu Widget by MuseThemes
    I am new to mobile website design and Muse, I love this widget, but I am not sure how to set it up on multiple pages.
    Do I put it on the master? Content covers it when it is on master, so I could use some help.
    Thanks so much, anyone know of tutorials or can anyone give me a game plan to set up. thanks so very much!

    Thanks, my issue was that the content was in front of the navigation menu see screen shot (taken in preview in Muse)

  • Can you build a mobile website in Muse and redirect to a desktop website which is not built in Muse?

    Hi
    I am looking at the idea of extending my photoshop monthly subscription to one that will give me access to Muse and Illustrator etc. 
    I have been building mobile websites on a mobile platform and then redirecting these to clients desktop sites - this is an option for clients who don't want to go the whole hog with new web design.
    Is it possible to build a mobile website using muse and then redirect this mobile website to an existing desktop site that has not been built on Muse?
    Thanks in advance
    Michele

    You can certainly use Muse for hosting on other hosts as well. You do lose some of the functionality of Business Catalyst such as In Browser Editing. I just saw that you did your current one in Wordpress ... so I assume there is a blog?
    If so, keep in mind that Muse alone does not have a blog feature. You can integrate a Business Catalyst Blog into it with a bit of knowledge on how BC works.
    A couple videos you will want to check out are:
    https://my.adobeconnect.com/p843w8dk0w9?launcher=false&fcsContent=true&pbMode=normal
    and especially;
    https://my.adobeconnect.com/p6wv1sik1gq/?launcher=false&fcsContent=true&pbMode=normal

  • Mobile website ASPX 2.0 Page not loading and Instead of loading it tries to download the aspx page sometimes

    We are facing a issue in a our Mobile Banking app built on ASP.NET 2.0. Sometimes, when we load the mobile website[https://mobile.dib.ae] from iPhone or any Android phones, log-in page will never get loaded. When the log-in page fails to load in iPhone/iPad,
    it’s giving us an option to download the login.aspx as a file. In some cases it shows download failed [Safari & Chrome]. In Android phone default browser, we are getting a different behavior when the log-in page fails to load. In Android phones its showing
    an error message as if the page was considered as a XML file and one special character in the xml file causing issue. [Images are shown below& attached].
    We are not getting the same issue in staging. Production fails randomly.
    We have three servers and load balancing is in place for production. We tried to access the site many times from different iOS and android versions and was successful with each of the servers. We have even tried connecting the mobile site by turning off all
    the servers except one, alternatively. All the servers worked fine individually. But it failed in the same mobile after clearing cache and cookies sometimes.
    This behavior is random and we haven’t able to figure out the root cause yet. There is no error in our log files or DB.
    There was security updates on all the servers before this issue started happening. We haven't uninstalled it yet.
    There were no updates on the filrewall F5.
    When we checked the IIS logs after a failed page load with the IP of mobile, we found there was only one entry made and it was for the favicon. We don't have favicon from the beginning and 404 error for favicon is since we started the site. As the only entry
    was for favicon and as it returns an error 404 just considering that possibility.

    It appears that your issue concerns web app development/troubleshooting and not .NET Framework setup (this forum's topic).
    Therefore, I suggest you ask in a topical forum here:
    http://forums.asp.net/

  • Mobile website and application launch unwanted

    Hello,
    When I access my mobile website, I have a message redirecting me to the store Windows Phone (see screenshot below). 
    Android and iOS, I do not encounter this problem. 
    Can you help me please?
    PS : I cannot upload the screenshot, I have this message :
    Body text cannot contain images or links until we are able to verify your account.

    The only advice I can give is to try a different browser for that site
    http://www.wpcentral.com/bored-internet-explorer-here-are-some-alternative-web-browsers-windows-phone
    Chrome for Windows Phone may be available soon.
    http://www.omgchrome.com/google-chrome-windows-phone-8-1/
    Gerry Hampson | Blog:
    www.gerryhampsoncm.blogspot.ie | LinkedIn:
    Gerry Hampson | Twitter:
    @gerryhampson

  • What are the alternative technologies to create mobile website?

    I have never created a mobile website but have some experience using WML. I jst wanted to find what are the other alternatives and whether standard websites using php wouldn't work on mobile??
    Please let me know
    Thanks
    Uthay

    It's been my experience that many mobile phones lack certain client side technology support. By definition, server side technologies are not dependent on the client. Having said that, since we are on the Java forum I'll also suggest that Java itself has a lot of support on mobile phones (client side), so you could still have a lot of device support if you target that. For maximum support, I'd stick to server side for the complicated stuff.

  • How can i make iphone mobile website,  database in Sql Server 2005 ?

    how can i make iphone mobile website,  database in Sql Server 2005 ?
    Thanks & Regards
    Jamshed Ali
    Email id: [email protected]

    You need to be a little clearer in what you're asking.
    You can't make any web site in SQL Server - it's a database engine, not a website tool.
    What you can do is create web sites that pull data from a back-end SQL Server, but the SQL server doesn't handle the client connection at all (that's handled by a web server such as Apache, IIS, or similar).
    There are many ways to build such a site including .NET, PHP, Perl and more (although I don't know all the options for Windows servers because they're not as common outside of corporate/enterprise networks).
    In either case, given your choice of development language (HTML, plus one of the PHP/Perl/.NET/etc. options), plus your database (SQL Server) plus your web server (IIS, Apache, etc.) you can make any web site you like (or, at least, you're capable of developing).
    If you want to opimize that web site for iPhones then there are many references on how mobile browsing differs from the desktop. I'd recommend this book as a reference (and, yes, I understand the irony of linking to a paperback book for web design guidance ). Googling mobile web design (or iPhone web design) might yield more results.

  • Using Muse, I was wondering if there is a way to convert a website that is already built into a mobile website.

    Using Muse, I was wondering if there is a way to convert a website that is already built into a mobile website. I have no idea how the website was originally built. My client is asking me to build a mobile site for his current site without touching his desktop site. His site was originally built in Dreamweaver I think but he have no way of finding the files and lost contact with his original designer. We don't want to start a new site from scratch with a new domain because he is afraid of losing his seo work.
    In other words. My client site was build in Dreamweaver or something else. I am not a programer and was going to use muse to make his mobile site. So the question is how do I link a muse made mobile site to his desktop site?
    Thank you.

        as62467 We appreciate your G3 question! Let's see how we can help. What you are able to adjust is the USB connection mode by going to the home screen and selecting'recent apps' (in the touch keys bar), settings,storage, the menu (the 3 tiny dots) and tap usb pc connection. If you do not want the software to try and install choose either the internet connection or camera option. Let us know if this helps.
    SheritaH_VZW
    Follow us on Twitter

  • How Do I Stop "T-Mobile Website Suggestions"?

    This problem started on July 6, 2014. I called T-Mobile, and they have concluded it was an issue with Firefox.
    Whenever I enter a keyword in the top search bar, instead of going to the default search engine (Google, Bing, etc.), it re-directs to a site called "T-Mobile Website Suggestions"... lookup.t-mobile.com . This is a site apparently unfamiliar to T-Mobile tech support, so it could be some sort of malware hidden in either the phone or browser. But I want to disable this re-direct, so I can go to the proper search engine, selected in Settings. (I only get this problem on Firefox. Other browsers still go to the proper search engine.)
    Thank you much.

    This is the issue that jscher2000 identified. However you can directly click on the search engine item in the list to bypass the tmobile error page.
    Unfortunately tmobile (and many other companies) abuse a part of the DNS spec called NXDOMAIN. This causes Firefox to get results from one word searches from tmobile.

  • Problems with MOBILE websites

    The regular websites are fine, but I keep having problems on every MOBILE website I try. I'm very good with Muse and use it everyday.
    The problem is I am redirecting from a masked domain name. You can see I host my websites using "sub-domains" within my website server from GoDaddy.
    The MOBILE websites have a LOT of extra space on the right side and also on the bottom and it shouldn't be zooming in & out either.
    How can I fix this problem???
    1.
    http://www.lakecountyroadside.com/
    The direct REGULAR domain name is: http://expresswebstudio.com/lakecountyroadsidetowing/index.html
    Masked as: www.LakeCountyRoadside.com
    The direct MOBILE domain name is: http://expresswebstudio.com/lakecountyroadsidetowing/phone/index.html
    If I enter this long domain name, the MOBILE website works right on the phone.
    2.
    http://www.greentouchlandscapes.com/
    The direct REGULAR domain name is: http://expresswebstudio.com/greentouchlandscapes/index.html
    Masked as: www.GreenTouchLandscapes.com
    The direct MOBILE domain name is: http://expresswebstudio.com/greentouchlandscapes/phone/index.html
    If I enter this long domain name, the MOBILE website works right on the phone.
    Also, on this MOBILE website is none of the slideshows are able to "swipe" even though I have it enabled.
    I even tried editing the "redirect code" in the <head> of the home page and that didn't work.

    How to determine which emulation mode to be used and when?
    tanzim                                                                                  
    If your query is resolved then please click on “Accept as Solution”
    Click on the LIKE on the bottom right if the post deserves credit

  • I have a mobile website and I would like the links to Google Maps, or any Map App, Can I do this with Muse?

    I have a mobile website and I would like the links to Google Maps, or any Map App, Can I do this with Muse?

    Hello,
    Are you talking about placing Google map in Mobile page created in Muse ? If yes you can do this by either using "Google Map Widget" or by placing " Embedded code" created at any map site.
    Here are the detailed steps for the same :
    How to Add a Google Map
    How to add a Google map | Adobe Muse CC tutorials
    Embedding HTMl in Muse
    Adobe Muse Help | Embedding HTML
    Please let me knew if you are willing to do something else.
    Regards
    Vivek

  • Changing Mobile Website Icon When Added to Home Screen of a Mobile

    Does anybody know how to change the icon on the mobile layout when a user 'Adds to Home Screen'? Also, is it possible to add the mobile website to the users homescreen by having a button or code in place? Any help would be hugely appreciated people!! Thanks a lot!!

    Bookmark saved in phone homescreen would be favicon of your site , which you can change from Site properties.
    Regarding adding site favicon in homescreen , you can add the browser bookmark in homescreen first and then from browser settings , add bookmark with site name in home screen.
    Thanks,
    Sanjit

  • Mobile website is bad. - iPhone 4 & 4S

    http://www.lakecountyroadside.com/
    The mobile website was working fine for a week+ and all of the sudden I checked it today and it's not loading right.
    It doesn't zoom to the actual page size and it makes the page really long vertically too. I can scroll down 5 times longer than this image and it's all blank too.
    I tried adding: <meta name = "viewport" content = "width = 380">  and it didn't help.
    I disabled Javascript and it didn't redirect to the mobile website at all.

    Don't add your own viewport metadata. It will just conflict with, or otherwise prevent, the viewport metadata generated by Muse from working correctly.
    Javascript is required for the proper display of Muse sites. It's used to compensate for variations across browsers as well as to provide much of the functionality of interactive objects.
    The improper resizing of this page is caused by one or more objects being outside the bounds of your page in Muse Design view. Mobile browsers resize the content on the page to fit to the device width. Thus if there are objects (even something like an empty text frame) outside the bounds of the page it will cause this incorrect initial zoom.
    Go to Muse Design view for the page. Go to the Object menu and select Unlock All On Page. Select All and look for objects outside the boundary of the page. In this case way off on the right.
    Repeat the process for the master page that's applied to this page, if any.

  • Mobile Website?

    Dear All
    I am a web-designer, i want to know more about a Mobile Website
    1) Display mobile phone, I-Pad, Iphone other portable device.
    Is it similar software(DW)  using to webdesigning please help this.
    2) What is the difference between website & mobile website.
    Manoj

    Please upload your page and CSS, and post a link for us.
    Also, I found this video to be very useful.
    http://www.youtube.com/watch?feature=player_embedded&v=onxJ7lFPfqk
    It is found on this Adobe page with some other good videos:
    http://foundationphp.com/dwcs6/new_features.php

  • Mobile website address - advice

    Hi everyone just putting together a little mobile website -
    want to give it and easy url
    the computer version has the url www.healthhokkaido.com
    what are my options - i tried using a handheld style sheet
    but the phones i tested on didnt detect it
    so i ve decided to go with a separate one - with an icon on
    thenormal versionto point people in the right direction

    > what are my options - i tried using a handheld style
    sheet but the phones
    > i
    > tested on didnt detect it
    Are you *sure* you implemented it properly?
    From the looks of this, you did not -
    <link rel="stylesheet" type="text/css"
    href="files/Articles_Oshimi/hhstyles.css"/>
    <!--[if lt IE 7]>
    <link href="files/Articles_Oshimi/ie.css" rel="stylesheet"
    type="text/css"
    media="screen" />
    <![endif]-->
    <link rel="stylesheet" type="text/css"
    href="css/sweetTitles.css">
    It would really need to be this to get detected by handhelds
    <link rel="stylesheet" type="text/css"
    href="files/Articles_Oshimi/hhstyles.css" media="handheld"
    />
    <!--[if lt IE 7]>
    <link href="files/Articles_Oshimi/ie.css" rel="stylesheet"
    type="text/css"
    media="screen" />
    <![endif]-->
    <link rel="stylesheet" type="text/css"
    href="css/sweetTitles.css"
    media="screen" />
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "quiero mas" <[email protected]> wrote in message
    news:fmnffi$6kb$[email protected]..
    > Hi everyone just putting together a little mobile
    website - want to give
    > it and
    > easy url
    >
    > the computer version has the url www.healthhokkaido.com
    >
    > what are my options - i tried using a handheld style
    sheet but the phones
    > i
    > tested on didnt detect it
    > so i ve decided to go with a separate one - with an icon
    on thenormal
    > versionto point people in the right direction
    >

Maybe you are looking for