What are the best practices for making a website usable and consistent across all devices and screen sizes?

Question

Confused regarding best methodology to make website usable and consistent across all devices - Desktops, Netbooks or Ipads and Mobiles(mostly smart phones).

I'm not a Front End Developer or Designer so i'm not sure what is the best thing out there.

I've been reading on Liquid Layouts, Keeping 2 different version of style sheets(1 for screen and 1 for hand held devices) and CSS Media Queries.

I'm not sure which one of these is the best fit to provide a consistent experience to the users of my site whether they're on smart phones(any android, BB, iphone, Nokia) netbooks or desktops.

Please help.

Answer 1

As I said in the comment, I think you should keep things as simple as you can and comply with good standards as HTML and CSS.

Let the browser / user choose the best way to use your site.

Also keep in mind graceful degradation / progessive enhancement and a logical structure that supports the pages.

Answer 2

What you are looking for is called Responsive Web Design .

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That's not to say there isn't a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.

But that kind of design thinking doesn't need to be our default. Now more than ever, we're designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.

There is a good free introductory video on Think Vitaimin .

Responsive Web Design: Fundamentals: Introduction

Watch until about 3/4 the way through, where they start demonstrating what they are talking about.

Answer 3

From what I've gathered (been researching it myself) it's really a combination of everything. Liquid layouts work great for different monitor sizes, while media queries help target mobile and tablet devices. I've been looking the 978 Grid System to format a few websites I'm working on. It has grids for several devices, but part of me thinks it might be a bit too bulky for what I want to do.

Answer 4

I think that liquid layouts are the best because they are the most cross-platform and are very easy to do. I use them on every site I make.

Answer 5

Even among tablet devices the difference in screen size and screen resolution can require different fonts size and link spacing, for legibility of the font and the accurate touchability of the links. Pages that render on the 10" iPad legibly may be difficult to read and clumsy to use on a 7" tablet. The 7" tablet might make you feel as though you had fingers like Shrek. This just happened to me recently when I used a 7" tablet to look at a site that I'd modified to work well on the iPad. Too tiny to read on the 7" tablet, and you don't always want your 7" tablet users to be pinch-zooming just so they can read your page and interact with it. You must determine the size of the target screen and employ appropriate CSS styling for that form-factor, and you may also be required to reduce the amount of content and/or to provide alternate mode of navigation for the smaller and smallest form-factors. Dynamically-served form-factor-specific content may be required, or highly granular control of content visibility using CSS.

I'd start with pages that have an "airy" look -- avoiding pages that have too much content and are too "busy".