Lesson 16

Understanding the Importance of Responsive Web Design

What You’ll Learn in This Lesson:

  • Image What is responsive web design (RWD)

  • Image Why we need RWD

  • Image What is progressive enhancement

  • Image How to write HTML that’s RWD ready

Until this point in these lessons, you have learned very specific techniques for building web pages. In fact, you could stop right now and have enough knowledge to build and maintain basic websites. But to build truly superior sites, you need to know more theory about web design and how to build sites that provide value to customers.

Responsive design involves looking at how customers interact with websites and attempting to create a site that works best for all customers, as they arrive on the site. In this lesson you will learn what responsive web design is and why it’s important. You’ll learn about the theory of progressive enhancement and how the HTML you write affects whether your pages can be made responsive. But most importantly, you will start down the path of a responsible web designer who creates pages that work well and look great no matter what type of device they are viewed on.

What Is Responsive Web Design?

Responsive web design (RWD) is an approach to web design that considers the customer’s device and adapts the design for optimal viewing. RWD helps web designers and site owners by creating an “edit once, display anywhere” website. The web designer builds one page that can then be viewed on a wide-screen desktop or a small-screen cell phone without a change to another site or another page opening. The content on the page moves around in the design to suit the device being used to view the page.

A website that uses responsive design changes the layout of the website depending upon what device is used to view it. But unlike older solutions, RWD does not use scripts or programming to achieve these changes. Instead, RWD uses CSS media queries, which you will learn about in Lesson 18, “Using Media Queries and Breakpoints,” to define fluid grids, variable font sizes, and flexible images. The media queries define what styles will apply to the design, based on the device that being used to view it.

A Short History of RWD

The first web pages were little more than text documents shared between monochrome computers. How the pages looked was secondary to the information they provided. But as color monitors grew less expensive and images were added to HTML, the way the pages looked started to gain importance.

Note

You may not realize that computer screens used to be just two colors. But they were not black text on a white background. Often, they were a neon green (for the text) on black.

CSS did not show up until 1996, and it wasn’t until 1999 that there was widespread support for it among the browsers. CSS2 didn’t gain wide support until the mid-2000s, and it wasn’t until CSS3 gained wide support in 2012 that responsive design was really possible.

CSS3 added the media query feature. This allowed web designers to create separate CSS documents for devices with different media features. The most commonly used feature is the browser width. For example, a small smartphone might have a width of 640px, while a widescreen monitor might have a width of more than 4000px. With media queries you can detect the width and build designs to suit the various sizes—without changing the HTML or doing any scripting.

In the mid- to late 2000s, if you visited a website on a mobile device, you were often forced to a “mobile friendly” version of the site. These usually had completely different URLs as well as layouts and even content, and web designers had to build two or more versions of the site. Website owners didn’t want to have to maintain two separate sites, so often the mobile site would be left with minimal content, while the primary site business was conducted on the desktop version of the site.

This brought about the theory of “graceful degradation.” The idea was that designers could build websites with the coolest new features, but the sites could still operate in a limited capacity, without those features. An alternate theory was the concept of “progressive enhancement.” The idea here was that a designer would start with the minimum a site needed to be successful and ensure that all devices could view that. Then, once a site worked, the designer would add new and exciting features for the more modern browsers. This finally led to the design theory most people work from today: Mobile First. Mobile First involves designing a site for mobile devices first and then enhancing it for larger screens and computers. You’ll learn more about Mobile First in Lesson 17, “Designing for Mobile Devices.”

Why Do We Need Responsive Web Design?

Responsive web design is a combination of many design techniques, including the following:

  • Image CSS—especially media queries

  • Image Clean, valid HTML code

  • Image Progressive enhancement

  • Image Feature, device, and browser detection using scripts

  • Image Server-side components to produce faster sites

The number of different types of browsers and devices that web designs need to support is constantly growing, and more and more people are using their mobile devices to access the web. Every day new devices come on the market that have limited features. But when a customer browses the web on her refrigerator, she wants to be able to do the same things she can do on her phone or on her laptop. Or if another customer asks Alexa to read the latest article on your site to him, you want your site to be able to handle that.

Responsive web design attempts to respond to the device viewing the page and provide the best experience for that device as possible. As you can see in Figure 16.1, a web page might look very different when displayed on a mobile phone than on a desktop computer, but the content remains the same.

A screenshot shows the web page "Dandylions" displayed on a desktop computer. The header is displayed at the top with a background image followed by a set of primary navigation links. The main body is divided into vertically. A screenshot shows the Dandylions webpage on a mobile screen. The header is at the top with a background image. The primary navigation is cut-short to a drop-down menu labeled "Go To..." The body is divided horizontally.
Figure 16.1 Desktop and mobile phone versions of the same web page. (Figure to be continued on next page)

The preceding lessons in this series have taught you how to write clean, valid HTML code and CSS, and you’ll learn about media queries in Lesson 18. Progressive enhancement is covered later in this lesson, and you’ll learn about scripts and server components to improve your sites in later lessons.

Why Is RWD Important for Mobile Design?

Responsive design is important to mobile customers because it allows them to see the same website as nonmobile customers. Before RWD, web designers would often create entire separate sites for mobile customers, and such a site was invariably a subset of the full site.

RWD allows designers to create sites that work in different devices without having to repost the content multiple times. Worldwide, mobile devices are more popular than computers for viewing the web. And depending upon the market, mobile has overtaken computers in the United States and Europe as well.

RWD lets a designer build a website that doesn’t care what device the customer is using. Rather than having to build a site for mobile, a site for desktop, and a site for smart appliances, a designer creates just one site that is flexible enough to support all those devices and more.

In addition, RWD is more future-proof than standard web design. RWD doesn’t look at the device but rather looks at the features. For instance, an RWD site that checks for Retina display doesn’t care if the device is an Apple iPhone 4S or a Samsung Galaxy S9. It just notices that the screen can handle high-resolution Retina images and displays them.

In 2015, Google and other search engines announced that they were going to start penalizing sites that didn’t optimize for mobile customers. One of the best ways to do that is with responsive web design.

What Is Progressive Enhancement?

Progressive enhancement is the process of creating a strong foundation on a website and then adding enhancements to that foundation as browsers and devices can handle them.

Progressive enhancement came as a reaction to graceful degradation. Graceful degradation was a carry-over from software engineering, where the norm was to test for faults and create a system as fault tolerant as possible. In the web design world, graceful degradation turned into an excuse for web designers to create the most amazing website they could on their browser of choice and then pass on whatever scraps they could scrape together to the browsers that weren’t as powerful.

The problem was that this whole idea went against the goals of the web as an accessible medium where everyone had access to information, no matter what their situation. As Sir Tim Berners-Lee said in the July 1996 Technology Review: “Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.” If you use graceful degradation, that is what you are saying to your customers, even if you don’t slap a label on your pages.

But when you switch to a progressive enhancement mindset, you switch your focus away from what browsers and devices your customers use. Instead, you focus on content. When you’re concerned with building a site with progressive enhancement, your first concern is with the content—what the content is, how it will be manipulated on the site, and where the site will get it.

Progressive enhancement lets you create websites that are inclusive and accessible, which is the ultimate goal of the World Wide Web.

How to Use Progressive Enhancement on a Website

You can add progressive enhancement to a web page fairly quickly. But to do it well across a whole site, you need to think strategically.

Separating Content from Presentation and Functionality

The first thing you should think about when adding progressive enhancement to your site is the content. A website has three layers:

  • Image The content stored in the HTML

  • Image The presentation defined by CSS

  • Image The behavior written in scripts like JavaScript

While it is possible to add CSS and scripts inline in your HTML, the best sites separate them into three different files and maintain strict distinctions between them.

Editing the Content Layer

You should start with the content and the HTML that marks it up. Your HTML should be valid, well formed, and semantic.

Valid HTML means using the most current version of HTML and writing it without deprecated or obsolete elements. The most current version of HTML right now is HTML5.

Well-formed HTML is HTML that is written correctly. Your HTML should have closing tags where required as well as quoted attributes and good nesting. When your HTML isn’t written correctly, it can confuse some browsers, and confused browsers don’t display web pages correctly. HTML5 doesn’t require that all attribute values be quoted, and it allows you to leave off closing tags on elements such as <p> and <li>, but using the quotes and closing tags when you can will keep your HTML cleaner.

Finally, semantic HTML provides information about the content based on the tags that are used. For example, if the content includes a date or time, you can use the <time> element to indicate to the browser that it is a time. The advantage of using semantic HTML is that your content can be used more widely when it’s marked up. When you use the <time> element, the user agent can then offer to add the event to a calendar because it knows that it’s a date or time. There are many semantic tags.

When you’re building HTML for your RWD sites, you should always strive to keep it as clean and clear as possible. The technical term for this is well formed. Well-formed HTML has the following characteristics:

  • Image There is a document type declaration at the top of the document.

  • Image Tags should nest correctly, inside to outside, like so:

    <b><i>text</i></b>

  • Image Attributes with spaces in their values should be quoted using single or double quotation marks.

  • Image Comments are not allowed inside tags.

  • Image Special characters used in HTML should be escaped, such as an ampersand (&amp;), a less-than sign (&lt;), and a greater than sign (&gt;).

Well formed for XHTML standards involves additional rules, such as always closing every tag and using a closing slash in a singleton tag, including an XML declaration, and quoting every attribute. But if you are using HTML5, the rules are not as strict.

Semantic elements are elements that describe what the content contained is. They provide more information to the browser without requiring any extra attributes.

There are a number of HTML elements that are semantic and have been in use for years. The following are several of the semantic elements that are regularly used on web pages:

  • Image <abbr>—Defines abbreviations and acronyms

  • Image <blockquote>—Defines a block quotation

  • Image <cite>—Defines citations, such as for quotations

  • Image <code>Defines a code reference

  • Image <q>Defines a short inline quotation

There are many more semantic elements in HTML. You can search for semantic HTML tags in your favorite search engine to learn about them all.

The other part of clean code is using only the elements and attributes you need—and nothing more. Try to consider what your site needs and limit your HTML to only those elements.

Once the content layer is valid, well formed, and semantic, your web pages will work well even in user agents that don’t support CSS or JavaScript, such as screen readers and basic cell phones.

Adjusting How the Content Looks with CSS

Once you have all your content displayed in valid, well-formed, and semantic HTML, you can work with the CSS to adjust how the page looks. As with the content, you want your CSS to be as valid and up to date as it can be to ensure the widest support.

CSS, because of the way it’s written, provides a lot of opportunity for progressive enhancement. Some things you should be aware of include the following:

  • Image The cascade—Remember that CSS stands for Cascading Style Sheets, and the cascade says that CSS should be evaluated in order, with the last feature taking precedence. There’s more to the cascade than that, but when it comes to progressive enhancement, you should use the cascade by putting the most cutting-edge features last, with fallback options above them in the style sheet.

  • Image Browser prefixes—Not all user agents support all the new features of CSS right away, but most provide browser prefixes to give support in the interim. By placing browser-prefixed versions of your style properties first in a style rule, you ensure that the final, official version is supported when possible.

  • Image User agents ignoring what they don’t recognize—This means that if a browser sees a property that is new to it, it will ignore it and not change the style at all.

Place your CSS in an external style sheet and make changes there to change your entire site at once.

Adding Interactivity with JavaScript

Interactivity is often the most fun part of a website to work on because it’s what makes the site into an application or an entire experience. By adding in the scripts last, you know that your site already works, whether you have the scripts or not. And the best way to add JavaScript is unobtrusively.

There are four rules of unobtrusive JavaScript:

  • Image The script should be usable without the customer noticing it is there.

  • Image The script should not generate an error message, even when it fails. It should just disappear and not get in the way of the content.

  • Image The script should never block access to the core content of the page.

  • Image The script should be maintained in a separate document outside the HTML and CSS.

Unobtrusive JavaScript allows you to add interactivity to your web pages without changing the HTML or CSS. And this means you know the pages already work and look good before you add the interactive elements. Unobtrusive JavaScript is covered in more detail in Lesson 25, “JavaScript Best Practices.”

What Are the Benefits of Progressive Enhancement?

The most obvious beneficiaries of progressive enhancement are people who use outdated browsers. In the past, when designers used primarily graceful degradation, outdated browsers would often be given the priority “keep it from crashing,” and if that meant removing a majority of the content from those browsers, then that’s what happened.

But there are other benefits to using progressive enhancement, such as the following:

  • Image Basic cell phones can display content in HTML without issue. Because the focus of progressive enhancement is on content, a progressively enhanced website will display content no matter what is viewing it.

  • Image The same is true for screen readers. These devices handle well-structured HTML and so are more likely to read these pages without a problem.

  • Image Pages built with progressive enhancement are easier to maintain than their counterparts because the content, design, and functionality are kept separate.

  • Image Finally, a site built with progressive enhancement is going to get more viewers than one that isn’t because the site is not exclusionary in its design.

A progressively enhanced website might not even need any changes to the CSS to be responsive. Depending on how you write the CSS, it can be mobile friendly and not require any extra styling.

Writing HTML for Responsive Web Design

Responsive design doesn’t add any new HTML tags or attributes, which makes it easy to learn. You simply write your HTML so that it is well formed, valid, and semantic, as previously mentioned.

You should start with HTML5, the most recent version of HTML, which provides the most assistance to web designers who want to use progressive enhancement and RWD. While you can build RWD sites using other versions of HTML, it’s best to stay as up to date as possible. This book uses HTML5 code samples.

Using Tags Every Page Should Contain

There are several HTML tags that every web page should contain:

  • Image <!doctype>

  • Image <html>

  • Image <head>

  • Image <meta charset>

  • Image <title>

  • Image <body>

These tags may not be required for valid HTML, but they provide information about the page to the browser to make them easier to use. These tags are covered in more detail in Lesson 2, “Structuring an HTML Document.”

If your web page contains these elements, it contains the minimum HTML required to start building a responsive page. Listing 16.1 provides a standard template you can use for starting any web page. Note that the tags listed above have both starting and ending tags, as well as some attributes.

Listing 16.1 A Basic HTML Template

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> </title>
  </head>
  <body>
  </body>
</html>

All these elements are covered in Lesson 2.

Writing Tags for Web Content

While the tags in the preceding section are all you need to create a website, the site would be very plain and hard to read. While there are dozens of HTML tags you can use, there are only a few you need to know about to start creating a decent web page:

  • Image Headline elements, including <h1>, <h2>, and <h3>

  • Image Content elements, such as <p> and <br>

  • Image Links with <a>

  • Image Semantic elements such as <strong> and <em>

  • Image General container elements such as <div> and <span>

  • Image Multimedia elements such as <img>, <audio>, and <video>

You should also include HTML5 sectioning elements to define the sections of the page. There are many such elements, but these are the most commonly used sectioning elements:

  • Image <article>

  • Image <aside>

  • Image <section>

  • Image <nav>

  • Image <header>

  • Image <footer>

These elements define areas of the content that are commonly found on web pages. A web page typically has a main article that defines the page (<article>); there is usually sidebar information for either the article, the page, or the entire site (<aside>); navigation is critical (<nav>); and many web pages are divided into separate sections with different semantic meanings that don’t fall into the above categories (<section>).

The <header> and <footer> tags are not technically sectioning elements, but they are used in a similar fashion. You can add a header or footer to any of the sectioning elements listed above, you can add them to the entire page, or you can add them to both.

Understanding Basic Attributes

Nearly every tag in HTML has attributes. These are keywords that are defined within a tag itself and give the browser more information about that tag. You have already used attributes with the <img src=""> tag and the <a href=""> tag. Two other attributes you should be familiar with are id and class. These attributes, which can be added to any HTML tag in your document, provide additional information about that element.

The id attribute is used to give an element a name. The id must be unique to the page it is on. But you can give every single tag on your page a unique id. This attribute is used to identify the element. You can then link to that element by using the pound sign (#) in your URL followed by the id value. For example, if you have the element <article id="main">, you add a link to that element by writing <a href="#main">link to main</a>.

You can also use the id attribute as a hook for styles and scripts such as with the method getElementById(). Because it must be unique on the page, you know when you attach a style to that id, you will affect only one element. This attribute also makes a style rule that uses it more specific, which means it’s more likely to be applied.

Like the id attribute, the class attribute is used to apply styles and scripts to an element. But it does not have to be unique on a page. This means you can apply a class to multiple elements on a page, and any style rules that are written for that class will be applied to all the elements. For instance, say you want some of your <h1> headlines to be red, but others should remain the default color. You could give the red headlines a special class that you would style as red in your CSS: <h1 class="highlight">.

Caution

In the class example, we suggested that you might want to make some of your headlines the color red. But in the code, we gave it the class name "highlight". It can be tempting to give your elements classes and IDs that describe exactly what they do, such as <h1 class="red">. But doing so can cause problems in the future. What if two years from now, you decide that all the highlighted headlines need to be colored blue rather than red? The fastest thing to do is simply change the class rule in the CSS so that the font color is blue. But anyone editing the site will look at that rule and think there is an error. The class name is "red" but it changes the color to blue? By giving your elements more generic class and id names, you avoid this problem and keep your code more future-proof.

One of the nicest things about using classes is that you aren’t limited to just one. You can include multiple class names on any element to add styles to the element or hook up with your scripts. To add a second class to an element, simply separate the classes with a space, like so:

<h1 class="highlight fancy">

Validating HTML, CSS, and JavaScript

As you’re working through building a site with progressive enhancement and getting ready for responsive web design, you should validate first the HTML and then the CSS and finally the JavaScript.

Validating your HTML is easy and takes only a moment. Simply go to https://validator.w3.org and fill in the URL of the page to be validated. If the page isn’t live yet, you can validate it by uploading a file or pasting the HTML in as direct input. If you’ve been careful, you should see a green line that reads “This document was successfully checked as HTML5!”

Validate CSS the same way, with the Jigsaw validator (https://jigsaw.w3.org/css-validator/). One thing you can check is the vendor extensions, as shown in Figure 16.2. The vendor extensions can give you clues about browser extensions and help you make sure they are correct, along with the standard CSS properties.

A screenshot shows the "CSS validation service" webpage.
Figure 16.2 Validate CSS with the Jigsaw validator.

Validating JavaScript is a little more difficult. There are many online validators you can use. You can also use the web developer tools in modern browsers to make sure your JavaScript works correctly.

Summary

In this lesson you learned a lot more theory of web design than actual coding, but you got a good basis for creating professional web pages that work well on most devices. You learned what responsive web design (RWD) is and the history of web design that brought it about. This lesson explained some of the reasons RWD is important to design, including better content delivery and support for mobile devices.

This lesson taught you how to design pages using progressive enhancement. Progressive enhancement involves determining the most important content on page and ensuring that it is viewable by the largest number of devices. You learned to first focus on valid, well-formed, and semantic HTML. Then you saw how to add styles to make it look good. Finally, you learned to add scripts that add behaviors to the page. But the goal is to keep the core content viewable by all users.

This lesson revisited the keys to writing good HTML to prepare for RWD. You learned about the tags and attributes to include as well as how to validate all the code.

This lesson only scratches the surface of what RWD is and why you should use it. If you want a more complete course on RWD, check out Jennifer’s book Sams Teach Yourself Responsive Web Design in 24 Hours. There is also a video course based on the book—“Learning Responsive Web Design LiveLessons.” You can find out more about these resources at www.html5in24hours.com.

Q&A

Q. I prefer to write XHTML rather than HTML. Can I write responsive pages with XHTML?

A. As long as your XHTML is valid, well formed, and semantic, you can make it responsive.

Q. Isn’t RWD just media queries?

A. Most people think of RWD as media queries that affect the layout of a website depending on the width of the device viewing it. But there are other ways to make a site responsive. In Lesson 17 you’ll learn some responsive techniques that don’t require media queries. And many of the first responsive sites used flexible layouts based on percentages and the max-width CSS property that you learned about in Lesson 12, “Creating Layouts Using Modern CSS Techniques.”

Workshop

The Workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.

Quiz

1. True or False: Responsive web design is just a form of progressive enhancement.

2. Is the following HTML well formed?

<strong><em>My dog is</strong> big</em>

3. Is it better to use a <p> or a <div> tag when marking up a paragraph?

4. Is the <header> element semantic?

5. How many versions of a website should you build to create a mobile version and a computer version using modern responsive web design?

6. List four semantic HTML elements that are not also sectioning elements.

7. What language modifies the presentation layer?

8. Where should you store styles and scripts on web pages?

9. What six tags should every web page contain?

10. What web languages should you validate?

Note

Just a reminder for those of you reading these words in the print or e-book edition of this book: If you go to www.informit.com/register and register this book (using ISBN 9780672338083), you can receive free access to an online Web Edition that not only contains the complete text of this book but also features an interactive version of this quiz.

Answers

1. False. Progressive enhancement is often used in responsive design, but websites that use it do not have to be responsive—and vice versa.

2. No, this is not well formed because the <strong> and <em> tags do not nest correctly. This is a common error that designers make when they want to close the outermost tag first. Here’s how you can correct the HTML:

<em><strong>My dog is</strong> big</em>

3. When you’re marking up a paragraph, you should use the <p> tag because it defines paragraphs semantically.

4. The <header> element is semantic because it describes the content as being the header section of a web page, section, or element.

5. The best websites use just one version of the site for both mobile and desktop computers but make them responsive.

6. There are lots of semantic elements; some commonly used ones include <abbr>, <blockquote>, <cite>, <code>, <q>, and <time>.

7. CSS modifies the presentation layer.

8. Styles and scripts should be stored in external files and linked to in the HTML.

9. Every web page should contain <body>, <!doctype>, <head>, <html>, <meta charset>, and <title>.

10. You should validate your HTML, CSS, and JavaScript as well as any other languages you use on your site.

Exercises

  • Image Think about what aspects of your website are not responsive and decide what elements you would change to make it responsive. Consider things like the layout, the font choices, and even colors and backgrounds.

  • Image Go through the HTML for the site you are evaluating. Convert it as much as possible to semantic HTML5. Remove unnecessary tags and then validate it with an HTML5 validator. If the validator finds errors, fix them until the page is valid.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
35.175.201.245