Visalia Direct: Virtual Valley
\nAugust 6, 2012 Deadline
\nSeptember 2012 Issue<\/p>\n
The Responsive Web: Every Screen is Different<\/strong><\/p>\n Websites<\/a> should be viewable and usable on as many devices and computer screen sizes as possible. That sounds obvious and simple, but designers know that it is increasingly difficult to anticipate how people might visit a website.<\/p>\n If you have a website for your business or organization, you should test it on a smartphone, a tablet, a laptop and a variety of computers with a mix of screen sizes. Testing a website on one computer with three or four browsers is insufficient, though that remains an important aspect of testing a website.<\/p>\n No longer do we sit at 800-by-600 or 1024-by-768 screens to explore the Web. As a designer, this is frustrating. As a smartphone owner, I\u2019m thrilled I don\u2019t need a computer to read news headlines or read book reviews.<\/p>\n I\u2019ve always tried to design websites that work well for most users. Before 2006, I designed websites for myself and others using a table-based template that was 760 pixels wide. Then, I purchased a laptop with a 1440-by-900 pixel screen. My websites had more \u201cmargin\u201d than content.<\/p>\n Like many designers, six years ago I adopted a fluid approach to website design using the emerging cascading style sheet (CSS) standard. A \u201cfluid layout\u201d means that columns of content were set to percentages of the screen width. If you have a wider screen or adjust the size of your browser window, the columns expand to fill the available space. The fluid layout approach is flexible, but a design that works well for most screens can be a visual disaster on narrow or extra-wide screens.<\/p>\n The arrival of CSS 2 permitted designers to stop using table-based designs, which were difficult to maintain. Tables were meant for tables of data, but in the early years of the Web they were the only way to create a design grid. With style sheets, it became possible to design a website with \u201cdivision containers\u201d that are far more flexible than tables.<\/p>\n Before CSS 2, you couldn\u2019t set \u201cmaximum\u201d and \u201cminimum\u201d design widths, so tables remained popular among designers. Using a maximum and minimum width allows a designer to restrict the size of containers within a fluid layout. Designers quickly embraced CSS 2.x to craft pages that looked great on screens from 800-pixels wide to 1920-pixels wide.<\/p>\n While the maximum and minimum settings help designers, this approach still assumes visitors to a website are using screens within a range of pixel widths.<\/p>\n I encourage you to visit a few websites and experiment by resizing the browser window. If your browser is full-screen, do the columns of text and images cover the full width of the window? If you reduce the browser to only a portion of the screen, how does the website change? Good websites should adjust when you change the browser window.<\/p>\n Still, a fluid layout using containers can have problems.<\/p>\n My wife\u2019s monitor is wonderful if you want to edit two-page magazine spreads using InDesign<\/a>. But some websites look strange on her screen. Text that appears as a nice visual paragraph on my laptop occupies a single line on her screen. This is a problem when a designer assumes he or she is wrapping text around photos or illustrations.<\/p>\n On the designer\u2019s computer screen, the text and graphics might have resembled a great newspaper or magazine layout. But, the designer\u2019s screen isn\u2019t going to be the same as every screen a Web visitor might use. Personally, I find large screens to be the most challenging for an effective design. Like many designers, I limit maximum widths to 1800 pixels simply because wider widths make creating a pleasing layout difficult.<\/p>\n Small screens are a problem, too. Most people do not use the Web on high-resolution monitors, which is why it is still safe to limit widths. But, people love their small devices. My wife uses an iPhone<\/a> and an iPad<\/a>. These devices have small screens, with changing widths depending on how you hold the devices. Paragraphs can fill the screen. Think about your daily routine. Do you check various websites and services on your phone? A tablet? A small netbook computer?<\/p>\n If you are designing a website or paying a designer, you need to test for the reality that smartphones, tablets, laptops and desktop computers seem to have an infinite variety of screen sizes. If you consider big-screen televisions and other devices with Web access, the challenge is even more complex.<\/p>\n Your business or organization cannot afford to ignore the changing habits of Web surfers. Without at least a range of screen resolutions, what is a designer to do?<\/p>\n Thankfully, the CSS standard is evolving, along with the HyperText Markup Language (HTML)<\/a>. Today, HTML5 and CSS3 (notice there are no spaces) feature significantly improved design capabilities. Most Web designers<\/a> are thrilled these standards have replaced HTML 4.01, XHTML 1.1<\/a> and CSS 2.1<\/a>.<\/p>\n Enter the art of \u201cresponsive Web design\u201d using HTML5 and CSS3.<\/p>\n