Design for modern & mobile browsers
There was–quite recently–a time when we seemed to have reached a pleasant stasis: everyone had finally thrown off the limitations of the 640×480 screen, even the 800×600, and we had tons of real estate to execute beautiful, elaborate designs. However, the explosive growth of mobile browsing, as well as the continued expansion of form factors, has drastically complicated layout design and execution. Handsets, tablets, laptops, desktops, and TVs exhibit a variety of shapes and sizes that make the VGA, SVGA, etc. era seem like halcyon days.
One of the BIG QUESTIONS introduced by the growing plethora of display configurations is: do we design individually for different display types, or do we create “fluid” designs that are capable of scaling to the capabilities of the device upon which content is viewed? These are two extremes (well, we’ll exclude the thoroughly unsatisfying lowest-common-denominator approach) that have drastically different techniques, both for design and engineering. The former is usually easier to code, but it requires multiple designs and more repetition of simpler work on the implementation side. The latter imposes more restrictions on design, and it’s considerably harder to engineer truly fluid layouts, but it may provide considerably less total effort and dividends in maintenance, expansion of content, and the advent of yet more form factors.
Google recently published an excellent article on how to implement fluid layouts for cross-platform viewing. Implicit in the article is their perspective that it’s inefficient in the long run to code for different screens, and–perhaps more importantly–that the same content should be universal and assumptions not be made about which content to “hide” on smaller displays, instead making existing content viewable on every device. Much of the article is technical, explaining how they make use of HTML and CSS elements to create fluid layouts that render properly and without sideways scrolling and text that is of readable size. For instance, using min-height to maintain text size, max-width on images, and meta viewport to detect true pixel dimensions of mobile browsers.
I generally agree that having one fluid design offers more advantages than does designing for every platform, though with exceptions for when we can make a reasonable assertion about how devices indicate a different set of user needs and capabilities. This strategy certainly reduces maintenance and theoretically allows resources to focus more on quality content, which is ultimately the goal. However, the capabilities to create fluid, cross-platform layouts are still probably cost prohibitive for many smaller companies until development tools and templates develop to the point that we don’t need to reinvent the wheel for every new design.
Pick a feed
