Skip to main content

The Responsive Web: Every Screen is Different

Visalia Direct: Virtual Valley
August 6, 2012 Deadline
September 2012 Issue

The Responsive Web: Every Screen is Different

Websites 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.

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.

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’m thrilled I don’t need a computer to read news headlines or read book reviews.

I’ve 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 “margin” than content.

Like many designers, six years ago I adopted a fluid approach to website design using the emerging cascading style sheet (CSS) standard. A “fluid layout” 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.

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 “division containers” that are far more flexible than tables.

Before CSS 2, you couldn’t set “maximum” and “minimum” 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.

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.

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.

Still, a fluid layout using containers can have problems.

My wife’s monitor is wonderful if you want to edit two-page magazine spreads using InDesign. 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.

On the designer’s computer screen, the text and graphics might have resembled a great newspaper or magazine layout. But, the designer’s screen isn’t 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.

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 and an iPad. 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?

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.

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?

Thankfully, the CSS standard is evolving, along with the HyperText Markup Language (HTML). Today, HTML5 and CSS3 (notice there are no spaces) feature significantly improved design capabilities. Most Web designers are thrilled these standards have replaced HTML 4.01, XHTML 1.1 and CSS 2.1.

Enter the art of “responsive Web design” using HTML5 and CSS3.

Responsive Web design combines the power of grid-based design theory with aspects of fluid layouts. Blocks of content flow based on the screen width, while maintaining their own integrity. The variation permitted with CSS3 and HTML5 gives designers the ability to create websites that respond to the user, instead of forcing the website visitor to scroll wildly around to find information.

When you visit a responsive website, it works well on almost any screen or device. This is because the designer creates blocks based on the smallest screens, approximately 320 to 480 pixels wide. For narrow screens, blocks are “stacked” vertically. On a smartphone, the result is a long but readable screen you can navigate easily.

On larger screens, a row of blocks is aligned horizontally. After the screen width is reached, blocks start on the next row. Designers can also set maximum and minimum sizes for these blocks of content.

I encourage designers, and those paying website designers, to learn the basic concepts of responsive website design. There are many websites on the topic, naturally, and there are some good books. Use your favorite search engine to locate “CSS responsive Web design.”









Comments

Popular posts from this blog

Comic Sans Is (Generally) Lousy: Letters and Reading Challenges

Specimen of the typeface Comic Sans. (Photo credit: Wikipedia) Personally, I support everyone being able to type and read in whatever typefaces individuals prefer. If you like Comic Sans, then change the font while you type or read online content. If you like Helvetica, use that.

The digital world is not print. You can change typefaces. You can change their sizes. You can change colors. There is no reason to argue over what you use to type or to read as long as I can use typefaces that I like.

Now, as a design researcher? I'll tell you that type matters a lot to both the biological act of reading and the psychological act of constructing meaning. Statistically, there are "better" and "worse" type for conveying messages. There are also typefaces that are more legible and more readable. Sometimes, legibility does not help readability, either, as a type with overly distinct letters (legibility) can hinder word shapes and decoding (readability).

One of the co…

Let’s Make a Movie: Digital Filmmaking on a Budget

Film camera collection. (Photo credit: Wikipedia) Visalia Direct: Virtual Valley
June 5, 2015 Deadline
July 2015 Issue

Every weekend a small group of filmmakers I know make at least one three-minute movie and share the short film on their YouTube channel, 3X7 Films.

Inspired by the 48-Hour Film Project (48hourfilm.com), my colleagues started to joke about entering a 48-hour contest each month. Someone suggested that it might be possible to make a three-minute movie every week. Soon, 3X7 Films was launched as a Facebook group and members started to assemble teams to make movies.

The 48-Hour Film Project, also known as 48HFP, launched in 2001 by Mark Ruppert. He convinced some colleagues in Washington, D.C., that they could make a movie in 48 hours. The idea became a friendly competition. Fifteen years later, 48HFP is an international phenomenon, with competitions in cities around the world. Regional winners compete in national and international festivals.

On a Friday night, teams gathe…

Edutainment: Move Beyond Entertaining, to Learning

A drawing made in Tux Paint using various brushes and the Paint tool. (Photo credit: Wikipedia) Visalia Direct: Virtual Valley
November 2, 2015 Deadline
December 2015 Issue

Randomly clicking on letters, the young boy I was watching play an educational game “won” each level. He paid no attention to the letters themselves. His focus was on the dancing aliens at the end of each alphabet invasion.

Situations like this occur in classrooms and homes every day. Technology appeals to parents, politicians and some educators as a path towards more effective teaching. We often bring technology into our schools and homes, imagining the latest gadgets and software will magically transfer skills and information to our children.

This school year, I left teaching business communications to return to my doctoral specialty in education, technology and language development. As a board member of an autism-related charity, I speak to groups on how technology both helps and hinders special education. Busin…