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...
This is a big topic. Some links below to get you started.
CSS Media Queries ~
Responsive Web Design Techniques & Tools ~
Device-Agnostic Approach to Responsive Web Design ~
Why We Shouldn't Make Separate Mobile Sites ~
If you're consider an upgrade to DW CS6, see this sneak peak of new responsive design tools:
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
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:
Am I on the right track now?
- 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.
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...
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
I'm just getting into this myself and have been reading a lot of late trying to formulate what direction to take.
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. 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.
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.
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:
Read through this tutorial and demo too, you'll soon pick it up:
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?
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