What are the best methods for website usability on all devices and screen sizes?

Question

Confused about the best methodology to make a site convenient and consistent across all devices - desktop computers, netbooks or ipads and mobile phones (mainly smartphones).

I'm not a Front End developer or designer, so I'm not sure what is best there.

I read about Liquid Layouts while maintaining two different versions of the style sheets (1 for the screen and 1 for the handheld devices) and CSS Media Queries.

I'm not sure which of these products is best for users of my site, regardless of whether they work on smartphones (any Android devices, Android, BB, iphone, Nokia) or desktop computers.

Please, help.

Answer 1

From what I collected (I studied it myself), this is really a combination of everything. Liquid layouts are great for different monitor sizes, while multimedia queries help you navigate your mobile and tablet devices. I was looking for the 978 Grid System to format several websites I am working on. It has grids for several devices, but part of me thinks this might be too cumbersome for what I want to do.

Answer 2

As I said in the commentary, I think you should keep everything as simple as possible and meet good standards like HTML and CSS.

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

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

Answer 3

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. Instead of quarantining our content in a fragmented, device-specific experience, we can consistently use media queries to improve our work in viewing contexts. What not to say no business case for individual sites focused on specific devices; for example, if the user goals for your mobile site are more limited in volume than the desktop equivalent, then serving different content to each may be the best approach.

But such design thinking does not have to be our default. Now more than ever, they developed a work designed to view different experiences along the gradient. Responsive web design offers us the way forward, finally allowing us to “design for the ebb and flow of things.

There is a good free intro video on Think Vitaimin .

Responsive Web Design: The Basics: Introduction

Keep track until about 3/4 of the way where they begin to demonstrate what they are talking about.

Answer 4

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

Answer 5

Even among tablet devices, the difference in screen size and screen resolution may require different font sizes and line spacing, for clarity of the font and the exact touch of links. Pages displaying legibly on a 10 "iPad can be difficult to read and awkward to use on a 7-inch tablet. A 7-inch tablet can make you feel like you had fingers like Shrek. This happened recently when I used A 7 "tablet to look at a site that I modified to work well on the iPad. Too small to read on a 7" tablet, and you don’t always want your 7 "tablet users to be scalable so that they can read your page and view You need to determine the size of the target screen and use the appropriate CSS style for this form factor, and you may also need to reduce the amount of content and / or provide an alternative navigation mode for smaller and smaller form factors. form factor dependent, or very granular control over the visibility of content using CSS.

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