Skip navigation
fourwhitesocks
fourwhitesocks
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...

1291 Views   13 Replies   Latest reply: MrHooglaz, May 20, 2012 11:55 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Apr 24, 2012 11:31 AM   in reply to fourwhitesocks
    Report

    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:
  • fourwhitesocks
    Currently Being Moderated
    2. fourwhitesocks,
    Apr 25, 2012 7:11 AM   in reply to Nancy O.
    Report

    Nancy,

     

    Wow thanks for the links!  Good stuff.  Ok so I'm understanding that there are a couple of schools on thought on this; however am I getting the idea that you should not make a seperate site?  The general idea would be to:

     

    1. Make ONE simple site that is viewable pretty much from the beinnning on both a Pc and mobile or othe device
    2. Use design techniques that help that ONE site so that it's viewable on different devices; like taking advantage of Media Queries
    3. Use the new fluid grid layouts; and yes I plan on upgrading to the CS6 version of Dreamweaver

     

    Am I on the right track now? 

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

    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:
  • fourwhitesocks
    Currently Being Moderated
    4. fourwhitesocks,
    Apr 25, 2012 7:41 AM   in reply to osgood_
    Report

    OK I can totally understand your point also.  Thank you. So in your eyes I might have to make 3 seperate sites:  desktop, phone, and tablet?  Agg that sounds like triple the work but I do see your point. 

     

    So how do I learn how to send them to the 'other' site based on browser width.  Is this the browser-sniffing?  I thought that wasn't very reliable based on how quickly technology changes.

     

    Humm I'm still not sure which path to follow...

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

    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:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Apr 25, 2012 8:57 AM   in reply to fourwhitesocks
    Report

    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:
  • osgood_
    Currently Being Moderated
    7. osgood_,
    Apr 25, 2012 9:06 AM   in reply to Nancy O.
    Report

    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:
  • fourwhitesocks
    Currently Being Moderated
    8. fourwhitesocks,
    Apr 25, 2012 9:48 AM   in reply to osgood_
    Report

    Truthfully I would like to only make one site.  So how do I know what the viewport will be or how to set it up like that?  Obviously I'm just learning how to deal with making a site looks nice on all devices.

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

    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:
  • fourwhitesocks
    Currently Being Moderated
    10. fourwhitesocks,
    Apr 26, 2012 4:55 AM   in reply to osgood_
    Report

    Oh wow thank you for your help!  I will read that and do the tutorial for sure!

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

    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:
  • Nancy O.
    Currently Being Moderated
    12. Nancy O.,
    May 20, 2012 9:51 AM   in reply to MrHooglaz
    Report

    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:
  • MrHooglaz
    Currently Being Moderated
    13. MrHooglaz,
    May 20, 2012 11:55 PM   in reply to Nancy O.
    Report

    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:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

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