Skip navigation
Currently Being Moderated

Making a new site in dwcs5, how do I create it so it views on a mobile device?

Apr 24, 2012 6:47 AM

I'm making a brand new site and now need to consider how it might look on a mobile phone.  This part is totally new to me.  I'm using Dw cs5, I guess I need some direction...

 
Replies
  • Currently Being Moderated
    Apr 24, 2012 11:31 AM   in reply to fourwhitesocks

    This is a big topic.  Some links below to get you started.

     

    CSS Media Queries ~

    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html

     

    Responsive Web Design Techniques & Tools ~

    http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techn iques-tools-and-design-strategies/

     

    Device-Agnostic Approach to Responsive Web Design ~

    http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach -to-responsive-web-design/

     

    Why We Shouldn't Make Separate Mobile Sites ~

    http://www.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separa te-mobile-websites/

     

    If you're consider an upgrade to DW CS6, see this sneak peak of new responsive design tools:

    http://thenextweb.com/dd/2012/04/04/dreamweaver-cs6-sneak-peek-shows-n ew-tools-for-responsive-web-design/

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 7:31 AM   in reply to fourwhitesocks

    fourwhitesocks wrote:

     

     

    1. Make ONE simple site that is viewable pretty much from the beinnning on both a Pc and mobile or othe device

     

    My personal opinion is to make different sites and send your user to them based on browser width.

     

    I say this because you'll take twice as long to figure out your 'braking points' which will also restrict your design workflow. You'll spend hours deciding which parts of the website to hide and which parts to locate elsewhere in the design to satisfy mobile devices. All images get downloaded so even if you hide a large desktop image its still downloaded on mobile devices which are slow to download.

     

    Creating an independent site will allow you to design specifically for mobile devices. You only give the mobile device what it needs, not a lot of other junk that you need to hide.

     

    Thats my opinion at this present time...it may change as techniques develop.

     

     

    Oh and just to chuck in another Gong...I don't know whether scalable background images are supported below CSS3.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 7:59 AM   in reply to fourwhitesocks

    I think you could get away with making two sites and target devices with screens below 699px.

     

    One for the desktop which could be fixed width as I hate liquid designs. Have you seen sites that use media queries? Whilst they do the job it drives me nuts, the page always seems to be on the move. I don't know if its just me but I adjust my browser window width on the Mac constantly and I don't particularly like things pinging around all over the place.

     

    Neither solutions are yet ideal. Both have their pluses and minuses

     

    You can either use a php script or javascript in your desktop page to dedertmine screen width or device the site is being viewed on. I'd go with a php script. Google around and look into it a bit more you may foprm a better opinion of which route to follow.

     

    I'm just getting into this myself and have been reading a lot of late trying to formulate what direction to take.

     

     

    http://www.gottaloveresponsivedesign.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 8:57 AM   in reply to fourwhitesocks

    I'm in the other camp.  I don't see any advantage in maintaining 2 or 3 separate web sites.  That's twice or thrice the workload.   IMO a truly elegant, responsive design site ought to be built dynamically (PHP & MySql).  If the viewport width is less than N=number of px, assume user-agent is a non-desktop browser & populate with fewer images & lighter content.  If viewport width is greater than N, populate page with full size images & robust content. This avoids burdening mobile devices with downloads they don't need. 

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 9:06 AM   in reply to Nancy O.

    Nancy O. wrote:

     

    IMO a truly elegant, responsive design site ought to be built dynamically (PHP & MySql). 

     

    A good solution If you know php and mysql. It may take longer to learn that than produce 2 seperate sites, one being a cut down version of the desktop presentation.

     

    There's a lot of differnet opinions. Like they say you pays your money you takes your choice...you can only produce what your comfortable producing.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 9:55 AM   in reply to fourwhitesocks

    In that case use css media queries to change the presentation of the elements when they detect the viewport width.

     

    Read this first it will give you an understanding of how they work:

     

    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html

     

     

    Read through this tutorial and demo too, you'll soon pick it up:

     

    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media -queries

     
    |
    Mark as:
  • Currently Being Moderated
    May 19, 2012 8:11 PM   in reply to Nancy O.

    JQuery mobile vs Media Queries

     

    Hello, I'm redesigning my site from scratch with html5 and css3, and I want to make it for desktop, mobile and tablet.

    In the Adobe Web Premium CS 5.5 Feature Tour video, he explained about media queries.

    Then, he showed us JQuery Mobile

    BUT, JQuery Mobile seems to be for if you want just a mobile site. If I'm using media queries, should I avoid JQuery Mobile to construct the mobile portion of my site? Am I making sense?

    thanks

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2012 9:51 AM   in reply to MrHooglaz

    Personally I don't like the look of jQuery Mobile.  If you can build your own layouts, you probably don't need it.

     

    See David Powers' tutorial

    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2012 11:55 PM   in reply to Nancy O.

    Thanks Nancy. I like the link, too. I'd rather work on one site and adapt it for the three styles.

    Along the way, I'm sure I'll be adding my own JQuery, right?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points