Design is inseparable from the technology available to us. What we know about history from photos is dependent on the camera technology of the time. Modern typefaces could not be invented until printing presses were widely used. This week is about the connect between creativity and constraint, particularly as it relates to web design.
This chapter uses a text format rather than lecture videos.
Designing Flexible Websites
Do you recognize these different web browser icons?
Web browsers are software programs that show us websites visually, and we use them so often that you may not think about your web browser much at all. But they’re made by different companies and work in slightly different ways, which means the same website may look slightly different in two different web browsers.
Cross-Browser Compatibility
- Web browsers interpret HTML and CSS differently, in ways that affect how websites display to users.
- Someone using Internet Explorer may see websites differently than someone using Chrome, even if their computers are identical.
- W3C (World Wide Web Consortium) is an international group that develops standards so standard HTML and CSS works across browsers. Most web browsers are fairly consistent now, but in the past this was a huge frustration and inconvenience for web designers!
Cross-browser compatibility issues became really frustrating with the arrival of smartphones. It also changed the way people used and browsed the internet. And that’s what forced designers to embrace responsive design.
Responsive Design
- Web design approach based on creating layouts that intentionally display differently on different screens to meet users' needs.
- Key principle is flexibility.
- Usually done with a responsive grid system.
- Prioritizes user experience by making the content display well on all devices.
- A related term is adaptive design, which has different layouts for selected screen sizes.
Designers like having control, so this transition was difficult for some people. Instead of being able to control every tiny detail of a user’s experience, designers had to accept flexibility and uncertainty. This can still be challenging to explain to clients or colleagues who wonder why a website or digital product doesn't look the same for all users.
Here’s a demonstration of responsive design in a few different websites:
Here are a few vocabulary terms related to responsive design:
- Breakpoint: The cutoff or point where a website’s layout or content will change to better fit the current conditions, like when three columns collapse to one for mobile devices.
- Media Queries: A filter within CSS that applies different styles based on the size of the browser window and device type.
Planning Website Design
It’s important to make a plan for a webpage before writing code. This should be based on the purpose of the website and the information it needs to contain, building the structure around the content. This is a downside of using web templates where you have to smoosh your content into an existing structure.
Wireframe
- This is the skeletal layout of a website page showing the structure and arrangement of different elements
- Can be sketched by hand or made with software
- This is the first step in designing a website, similar to blueprints for constructing a building
- Multiple wireframes showing how pages of a website are organized and connected to each other is often called a storyboard
Examples of wireframes:
A visual representation of how a website will appear to users before the actual site has been constructed is a mockup. This is used for internal feedback and sometimes for external research, and it shows the website as it will appear once it’s built. A mockup with functional elements is often called a prototype.
The Ever-Changing Web
The flexible, interactive nature of the internet transcends print design and opens up new possibilities. It also makes web design fragile and difficult to preserve. If you design a marvelous webpage today, changes in technology mean it likely won’t be marvelous a decade from now. It might not even work or exist.
“The web, as it appears at any one moment, is a phantasmagoria. It’s not a place in any reliable sense of the word. It is not a repository. It is not a library. It is a constantly changing patchwork of perpetual nowness.”
— Adrienne LaFrance, “Raiders of the Lost Web”
That quote is the beginning of a magazine story published in The Atlantic in 2015 about how innovative news forms published on the web can entirely disappear. It focuses on a 34-part feature story published in 2007 in The Rocky Mountain News in 2007, a daily newspaper in Colorado founded in 1859. The series included a custom website with multimedia and documents made public for the first time ever, and was a finalist for the Pulitzer Prize. And then, in 2009, The Rocky Mountain News closed. It was a highly respected paper and this was a huge blow at a time when newspapers were laying off thousands of reporters during the Great Recession.
Soon after the newspaper closed, the website fell apart. Their award-winning stories just didn’t exist online anymore. The multimedia reporters and web designers who’d abruptly lost their jobs suddenly had no record of their work. And this has happened many other times, too.
The Rocky Mountain News story was revived in a stroke of incredible luck, as the magazine article explains. The link sometimes works and sometimes doesn’t. Some other parts of the Rocky still exist online — a Pulitzer-winning photo essay by Todd Heisler was republished in part by The New York Times after he was hired there. (Heisler’s first major NYT project, “1 in 8 million,” no longer works, however.)
It’s not all bad — along with the Wayback Machine, there are other tools and archival systems for preserving your own digital work just in case it disappears. The Million Dollar Homepage is another zany story about the early internet.
🗨 What is a website or thing on the internet that you enjoyed or valued sometime in the past that no longer exists? (Or perhaps has changed so dramatically it’s not really the same.) If you can’t think of a personal example, ask a couple of friends or family members if they have one.
A Prescient Essay: "The Dao of Web Design"
“A Dao of Web Design,” is a philosophical essay considered a classic in the web design field. It was written in 2000, which is a very long time ago in the web design discipline. A companion reading is a collection of reactions from web designers 15 years later, which helps put the original essay in perspective and explain why it was so important at the time.
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.”
— John Allsopp, “A Dao of Web Design”
Essentially, the essay is about the emerging field of web design at the time. Like with previous technologies, early web design was built on the foundation of print design since that’s what was familiar.
✓ Comprehension Check: In “A Dao of Web Design,” the author uses an example about how television programming developed from the conventions of radio programming. How is this related to developments in web design?