What is the best practice for website design and markup now that mobile browsers are common?
- by Jonathan Drain
Back in 2008, smartphones were a small market and it was commonplace for sites to be designed for a fixed width - say, 900px or 960px - with the page centered if the browser window was larger. Many designers said fluid width was better, but since user screens typically varied between 1024x768 and 1920x1080, fluid width allowed longer line length than is optimal for ease of reading, and so many sites (including Stack Exchange) use fixed width.
Now that mobile devices are common, what is the the best approach to support both desktop and mobile browsers?
Establish a separate mobile site (e.g: mobile.example.com)
Serve a different CSS to mobile devices; if so how? Server-side browser sniffing, or a @media rule?
Use Javascript or something to adapt the website dynamically to the client? Should all websites be expected to be responsive?
Some kind of fluid layout
Something else?
