Responsive web design Html5 and CSS3

learn responsive web design with html5 and css3 and beginning responsive web design with html5 and css3 pdf
JohenCorner Profile Pic
Published Date:02-08-2017
Your Website URL(Optional)
Responsive Workflow It’s one thing to understand all the pieces of a responsive website . It’s another thing altogether to be able to create one . In this chapter, we’ll look at the process for creating a responsive design, starting with user research and content strategy, then designing in text, sketching, and creating responsive prototypes . We’ll look at style tiles and other new approaches to design that provide alternatives to creating unresponsive, fixed-size designs in tools like Photoshop . And at the end of the chapter, we’ll finish up by looking at how to sell responsive design—both to clients and to coworkers—and how to adjust your approach to working with clients when you’re doing a responsive project . If you want to delve deeper into how to adjust your worko fl w to produce responsive websites, check out Stephen Hay’s book Responsive Design Workflow (http://responsivedesignworko fl w . com) . Strategy and Planning Before you even start thinking about the design of a website, you need to step back for a moment and think about the goals of the website . Unless it’s the rare occasion when you’re just making a site for fun or practice, your goal isn’t to build a website, it’s to solve a problem: how to communicate with customers, how to sell products online, and so forth . The website is the tool you’re creating to solve the problem . You should know from the start what the goals are for the website or project, whether from your own communication with the client or stakeholders, or from information passed on from a project manager or 183 aother staff . “Our company needs a website” isn’t a goal . Dig a bit deeper and find out who the company is trying to communicate with, and what it hopes the website will accomplish . Creating a website, whether it’s responsive or not, is not straightfor- ward . There are a lot of creative decisions made during the process, starting with what content is included on the site, where the content goes, and what paths users will take through the site . If you know the goals of the site, you’ll make better decisions during the design process .  NOTE  I use the term “client” a lot in this section, but I don’t just mean it in the sense of a client who hires an agency to build a website. a nytime you work on a website for someone else, that person or group is your client. So, if you are in-house web sta, t ff he stakeholders for a project would be considered your clients. USEr r ESEar CH At the start of the project, you’ll likely be doing user research and devel- oping personas, scenarios, and other resources to guide you in the site design process . For the most part, none of this work is specific to responsive design, so we won’t go into details here . There are a lot of great resources out there, in case you want to learn more: in particular, check out Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition (http://communicatingdesign . com) by Dan Brown, which will tell you how to create much of the documentation you need during the web design process, such as personas, flow charts, wire - frames, competitive reviews, and usability reports . One warning, though, particular to responsive design: as you’re devel- oping personas, resist the temptation to make them correspond with device types . You aren’t creating a website for a “mobile user” and a “desktop user,” you’re creating a site for users who each may be using different devices at different times to access the website . 184  LEarNING rESPONSIVE WEB DESIGN a NOTE  If you’ve never done user research and you don’t have any idea what personas or scenarios are, check out “What & Why of Usability” (http:// on, especially the section on User r esearch Basics and the Glossary. CONt ENt Content is the most important part of any website . You should address content first during the design process, rather than trying to piece it into a finished visual design at the end . In Chapter 2, we looked at how to create a content strategy for your site and discussed starting the design process with a content audit . We also talked about how to create content that will work well across screen sizes . Information architecture Once you’ve decided what content you need on your site, the next step is to organize and label it, and develop a structure for the site . This part of the process is called information architecture (IA) . The general IA principles you’d use for any website still apply to respon- sive sites, but you need to make sure that the site architecture will work on small screens, where there may not be room for a large or detailed navigation . Also remember that your site architecture will not be set in stone, so the IA and design need to be flexible enough to accommodate future changes, as organizational or project needs require . If you don’t leave room for changes, you may end up feeling like any new content added after the site launch needs to be shoehorned into existing boxes, where it may not belong .  NOTE  Not familiar with the idea of information architecture? Check out Martin Belam’s “What is ‘Information a rchitecture’?” ( help/insideguardian/2010/feb/02/what-is-information-architecture) on The Guardian. 7. rESPONSIVE WOrKfLOW    185 aContent outline As you start organizing the content that will go on the new site, your first step should be creating a simple high-level outline of the content areas . This will be reflected in the main navigation of the website . For example, Figure 7-1 is a screenshot showing the main navigation on Mule Design’s website . This is followed by a simple content outline . f igure 7-1. The Mule Design website has a straightforward main navigation. • Home • About (Who We Are) Individual Bio 1 Individual Bio 2 Etc . • Services (What We Do) • Portfolio (Our Work) Client 1 Client 2 Etc . • Blog (Our Blog) Blog Entry 1 Blog Entry 2 Etc . • Contact (Hire Us) The top-level content areas are pretty much the same as what you’d find on many design agency websites: Home, About, Services, Portfolio, Blog, and Contact . You’ll notice that the text on the website is different from what’s in the outline: “Who We Are” instead of “About . ” 186  LEarNING rESPONSIVE WEB DESIGN aAs you are first creating a content outline, it’s best to use general terms like “About” to give you an idea of where the content fits in, rather than deciding on the specific wording for your page titles or navigation . Otherwise you’ll get too hung up on things like whether the terms fit well in the navigation, if they have similar lengths, and so on . As you continue with compiling or developing the content for the site, you’ll be able to add more detail to each section . Just as with your content inventory, you don’t need to list every individ- ual item (like blog posts, or products on an ecommerce site); just get the categories and the main content pieces down . Content Before Layout Once you have worked through a content strategy and created an infor- mation architecture, you can start thinking about what the content will look like on the screen . The content is the most important part of the website, so you’re going to build your design around the content, not the other way around . The best way to get started is to create an unstyled web page containing all your content . This shuld include all the page components, marked up with semantic HTML (appropriate heading levels, etc . ) . Doing this before you start the visual work of sketches and wireframes or prototypes allows you to think about the role that each piece of con- tent will play on the page, before you get distracted by how it will look . COMPONENt S First, determine what pieces of content will go on a page . Some exam- ples may include the site logo, a search box, the main navigation, the body content, and the footer . You need to think of these as separate pieces of content in this part of the design process, so that you can move them around on the page as you create a prototype . For example, it’s common to think of the page “header” as a solid unit, containing the site logo, search box, navigation, and so on . But you need to step outside the box, so to speak, because not all of these items will necessarily stay in the “header” area as you design responsively . 7. rESPONSIVE WOrKfLOW    187 aSome examples of the site-wide components that you might include: • Logo • Search box • Primary navigation • Secondary navigation • Informational links • Copyright notice • Ad(s) • Social media links • Login link And depending on the type of page, you may have components like: • Title • Body content • Secondary content • Synopsis • Author • Date • Pull quote(s) DESIGNING IN t EXt Next, take all the content elements you need on your page and mark them up with basic, structured HTML . We looked at how to do this in Chapter 3 . For example, in Figures 7-2 and 7-3, you can see our example web page from that chapter, before we added any CSS . Remember that for a responsive website, the first design is no design; that is, the first design you should create is what a user will see if his browser or device is unable to render the CSS and JavaScript . 188  LEarNING rESPONSIVE WEB DESIGN af igure 7-2. This is our website on a desktop monitor with no CSS applied. f igure 7-3. This is our website on an iPhone with no CSS applied. With just this basic code, you already have a functional web page that is mobile-ready, responsive, and accessible . By starting out your design this way, you’re making sure that your web page will be functional for all users . It’s much easier to start with a page that’s accessible to everyone, rather than trying to add in accessibility and compatibility later . 7. rESPONSIVE WOrKfLOW    189 aLINEar DESIGN As you’re adding the structured text to your page, you’re going to create what’s called a linear design . Linear design is a pretty simple idea . Imagine someone is reading your web page from start to finish—all of it . What order would you want them to read in? Your HTML should be in that order . This seems pretty basic, but traditionally it’s been common to do a visual design first, then write code to accommodate the design, and then fit content into the spaces . This often leads to the actual HTML being in a strange order . But with small mobile devices, everything will pretty much be dis- played in one column, so users will read it in a linear order anyway . By starting with a linear design for your unstyled text, you’re starting off with something that will work on narrow screens, and also that will work in browsers that can’t display your styles . CONt ENt HIErar CHY You need to make some decisions at this point . What parts of the con- tent are most important? The most important content should come first on the page . Imagine someone is reading your page from top to bottom . Likely you’ll have the site’s title and/or logo at the top of the page, so that when users arrive on the page, they’ll know where they are . The page title will also need to be near the top, so users know what the page is about . Keep in mind you aren’t making final design decisions yet, so don’t stress out over getting everything right . You can always make changes later . You also want to avoid thinking of your content in terms of layout at this point, because with responsive design it won’t always be in the same place . You may be used to placing certain elements in a side- bar, but some screen sizes may not have room for a sidebar, so those elements will have to go above or below the main content . Focus your thinking on the hierarchy of the content . 190  LEarNING rESPONSIVE WEB DESIGN aThinking About Layout Once you know what’s going to go on each page, you’ll start working out what each page will look like . You’ll need to think about how the design will look on screens of various sizes . Before you move on to formal wireframes or prototypes, you may want to start by making rough sketches . SKEt CHING Stephen Hay, in his book Responsive Design Workflow (http://respon- sivedesignworko fl w . com), calls sketching “thinking on a surface . ” You can do small sketches, with few details, to try many ideas quickly . Later, when you have your ideas more fleshed out, you can move on to more detailed sketches . Start by thinking about how the site will look on various sizes of screen, from small mobile phones to huge monitors . Don’t worry if you can’t “draw . ” You’re only drawing shapes and lines, and it doesn’t even matter if the lines are straight . Make notes on what works and what doesn’t work, so you can incor- porate those thoughts into the design later . Your preliminary sketches are not meant to be deliverables for the client; they’re just a design tool . You can share the most helpful sketches with your team members—or not . It’s up to you . Think of the various screen sizes—mobile phone, small tablet, larger tablet, and so on—and make rectangles of those approximate sizes to draw your layout ideas in . But don’t use a ruler to measure the rectan- gles—you’re not aiming toward specific devices for the design break - points, you’re just looking at general device categories . You can draw on paper, or you may find it easier to visualize a device screen by drawing directly on the device with a stylus, as in Figure 7-4 . A good iPad app for sketching is Paper (http://www . fiftythree . com/ paper) . 7. rESPONSIVE WOrKfLOW    191 af igure 7-4. Preliminary sketches can be drawn directly on a device screen with a stylus (photo credit: Baldiri, baldiri/5734993652). Start SMa LL Whether you’re starting with sketches or prototypes, it’s best to use a small-screen-first approach . Start with the design for the smallest screen size, and work your way up to the widest screen size . We’ll talk in Chapter 8 about how to determine the range of screen sizes you should design for, but essentially the smallest screen size is going to be a mobile phone–sized screen . Why not go from large to small? After all, the desktop-sized design is going to be more detailed, so wouldn’t it be easier to get it out of the way first? Actually, it’s quite the opposite . I like to use this metaphor to explain: imagine you live in an apartment, and you have the opportunity to move into a much larger house . There will be plenty of room for your furniture and belongings, and even extra space to add some new pic- tures on the walls and other decorations . 192  LEarNING rESPONSIVE WEB DESIGN aThen imagine moving from a house into a small apartment . Everything is squished together, you have boxes piled against the walls because there’s no room to unpack them, and even then you have to get rid of half your furniture . Now imagine doing that with a website . Trying to fit everything from a desktop-sized screen onto a small screen is incredibly difficult . It’s much easier to start with the small screen, because then you’ll end up only using what you can actually fit into the design . It will force you to pay more attention to your content and what is actually necessary, rather than just sticking everything in there because there’s room . The same thing goes if you live in a small apartment: you only own what you have room for, yet somehow you manage to fit in everything you need . If you live in a larger house where there’s plenty of extra room, though, you’ll tend to accumulate lots of extra belongings that you don’t really need and never use . However, there are times when starting your design with the desk- top-sized screen may be a better option, such as when you’re doing a redesign of an existing website and you have to use the existing fixed- width design as part of the responsive design . If you already have a desktop-sized design, and it needs to stay like it is, starting there might be more effective . Keep in mind too that starting with the design for small screens first doesn’t mean you can’t be thinking about the larger screens as you go along . Sometimes it’s helpful to move back and forth, at least during the preliminary process . MOBILE FIr St You’ve probably heard the term “mobile first,” and you may be wonder - ing if it’s the same thing as “small-screen first . ” Although the concepts have some overlap, they aren’t exactly the same . “Mobile first,” a term popularized by Luke Wroblewski in his book Mobile First (http://www . abookapart . com/products/mobile-first ), is an approach to creating websites and web apps in which your design pri- oritizes users who are using mobile devices and how those users inter- act with the site . It requires that you think first about the constraints and capabilities of mobile devices . And the word “first” in that context means considering mobile to be more important than nonmobile . 7. rESPONSIVE WOrKfLOW    193 aMaking sure your site works well on touchscreens is important, and in Chapter 8 we’ll talk about devices and address topics such as touch- target sizes . But as you’re designing a responsive site, it’s best to be as flexible as possible with regard to devices, aiming to design a device- agnostic site that will work well on any type of device . There isn’t such a fine line between mobile and nonmobile devices any - more . You can buy a desktop computer that has a touchscreen . You can hook a monitor and keyboard up to your mobile phone and use it as a “computer . ” The lines will only continue to blur . So when I use the phrase “small-screen first” in this book, I’m refer - ring only to the process of designing a responsive layout and design for a website . And I don’t use the word “first” to mean that small screens are more important, but rather in a chronological sense—you are designing for small screens before you design for larger screens . All the screen sizes are equally important, and even though you are starting with the smallest screen, you’ll probably end up spending more time on how the design looks on wider screens . Prototypes Once you have a rough idea of your layout, you can start putting it together . WIr EFra MES VEr SUS Pr Ot Ot YPES Before you dive into the visual design, you need to start with a good backbone of the site layout and how it’s going to work, and where things go on the screen . There are two different ways to visualize the site layout . Traditionally, web design has used wireframes, which are static drawings of what a page looks like . But with responsive design, you don’t just have one design; you have a design that changes depending on the width of the screen . So, it’s becoming more common to use responsive prototypes, which are basi- cally wireframes built in responsive HTML . They can be viewed on various screens to see how the design changes with the viewport width . 194  LEarNING rESPONSIVE WEB DESIGN aWIr EFra MES Traditionally, the next step in the web design process would be creating wireframes . Wireframes for a website are a model of where the individual compo- nents should go on the page . An example is shown in Figure 7-5 . You can see the general shape of things, but a wireframe specifically leaves out the visual details, which will come later . For a fixed-width website, a wireframe lays out the exact locations of the different page components: header, navigation, search box, columns, and so on . But for a responsive site, you don’t have just one location for each com- ponent, as the layout changes across viewport widths . So, rather than creating formal documents that are not a true representation of a responsive website, you’ll likely find it’s more effective to create respon - sive prototypes (sometimes referred to as responsive wireframes) . r ESPONSIVE Pr Ot Ot YPES A prototype (also a term used in industrial design and other fields) is a model that not only demonstrates how something will look, but also how it will work . A prototype is not necessarily produced by the same method as the final product . For example, when a new car has been designed, often a prototype is made and sent to car shows to get consumer feedback, before a decision is made as to whether the car should actually be man- ufactured . These prototypes are individually manufactured in research labs, not made with the usual factory assembly line process, and they may not even be drivable . Similarly, your responsive prototype doesn’t need to be coded in the same way that the actual website will be coded, and interactive ele- ments don’t need to work . You might build a prototype with HTML, or use a prototyping application (we’ll look at a few of those in a bit) . 7. rESPONSIVE WOrKfLOW    195 af igure 7-5. a detailed wireframe for a fixed-width website (photo credit: a fter Victory, ). A responsive prototype is a “real” web page, in that you can view it in a browser, but it’s just the basic layout, with a similar look to a wireframe . In fact, it is essentially the same thing as a wireframe, with the differ- ence being that the layout is responsive, so that you can resize your browser window or look at the prototype on different devices to see how the layout changes . Prototypes may be at any depth of fidelity: anywhere from minimal detail to very close to the actual end product . A car prototype may look like a real car but be just for visual show, lacking an engine and the rest of what’s under the hood . Or it may be a working car, but only meant to travel at low speed for demonstrations, lacking safety features that would make it highway-ready . The same thing applies with a website prototype . Generally, you’ll start out early in the process with a low-fidelity prototype, and as you get further along, it will be more in-depth . 196  LEarNING rESPONSIVE WEB DESIGN aWHat ’S IN a Pr Ot Ot YPE? Your prototype should show the basics of the layout, and how the site layout responds to changes in viewport width . Although you can continue to make changes to the layout later in the process after you’ve started working on the visual design, it’s easier to get a lot of the layout decisions taken care of now, when you can focus only on the layout . Although you will likely have prototypes for a few different types of pages (e . g . , front page, interior page), don’t attempt to connect them so you can click from one to the next as if they were part of the actual website . That just adds complexity, when you should only be focused on layout . Later on in the process you may want to make interactive pro- totypes that can be used to test how the site actually works (such as a checkout process), but for now your prototypes should be only visual, not interactive . Start WIt H t HE Ba SICS The first responsive prototypes you create will just give a rough idea of content placement and content hierarchy on the page at the vari- ous viewport widths . Eventually, you’ll move on to higher-fidelity prototypes . You don’t want to be thinking about details such as typefaces or colors here, just the layout . Choose a simple sans-serif font for everything, and use borders and shades of gray to separate various items on the page . This will help you focus on the layout . If you make your respon- sive prototype look too realistic, clients may have trouble understand- ing that it isn’t the “real” website . If you’re doing responsive prototypes, start out from the beginning test- ing them on different devices, in a range of device categories, so that any issues can be addressed early . As you start with low-fi prototypes, you can either use placeholders for content, or use actual content . The benet fi of using actual content is that you can get an idea of how it will fit in the layout . For example, if you have the words “Example Page Title” at the top of the page, they may fit fine where you want the title, but later when you have to plug in an actual page title that’s 10 words long instead of 3—it may not fit . 7. rESPONSIVE WOrKfLOW    197 aAlso, when you’re creating prototypes, don’t just think about how an ideal page on your website would look . Make sure your prototypes can handle the edge cases: the most complicated pages on your site . HOW Ma NY Pa GE LaYOUt S t O Cr Eat E As you start looking at actual pages on the site, you need to decide which pages, or page categories, to create layouts for . Because parts of the design will look the same on most pages or on every page (e . g . , the header and navigation are likely the same on every page), you’ll only need to create layouts for a few types of pages . Go through your content outline and figure out the types of pages you have, based on content . For example, on a newspaper website, some types of pages might be: • The home page, which will be unique • Article pages, each containing one article • Category pages (e . g . , a “Local” section with links to the current articles in that category) • Photo gallery pages, which are freestanding pages similar to arti- cles, but contain primarily photos instead of text • Informational pages, such as a “Privacy Policy” You can see these types of layouts from The Washington Post website in Figure 7-6 . There will be elements that are consistent throughout all the pages . For example, every page on the site will probably have the same header, navigation, and search box at the top—but not necessarily . In Figure 7-6, the navigation bar is the same on every page type except the front page, which omits the logo for “The Washington Post” on the left side of the bar . Think about how each page can be divided into components, which are self-contained pieces of content that can be moved around the page, or replicated on other pages . 198  LEarNING rESPONSIVE WEB DESIGN af igure 7-6. Six of the different layouts used on The Washington Post website. Some page types will be mostly similar to other types . For example, the article pages and the information pages just described will probably be very similar, as they both contain mostly text . However, the article pages will need to have a place for metadata such as author and date, whereas the informational pages will not . You’ll do one or more layouts during the design process, for each of the different page types . Generally, two to five page types are common . These should be the most complicated layouts, because the simpler lay- outs can often be derived from those . For example, you would not need to create a separate prototype for the informational page, because it’s just an article page with some of the components removed . 7. rESPONSIVE WOrKfLOW    199 aIt’s tempting to do the front page first, because it’s what feels like the “face” of the website . But it’s often easier to start with the most straight- forward interior pages and then, when you have a solid layout for those, move on to the more complex home page . Fra MEWOr KS To make the prototyping process quicker, you may want to use a frame- work . A framework is a downloadable set of HTML and CSS that con- tains all the elements needed to make a basic website . You can create a responsive HTML prototype in an hour or two by starting with a frame- work, rather than having to start from scratch . Frameworks can also be used as the basic code for actual websites . With a framework, the included CSS adds basic style to the HTML ele- ments . Thus, your paragraphs, headings, lists, buttons, and form fields all look good (but basic) from the start, without you having to write CSS to style them . The framework will also include instructions on how to use the CSS classes to add responsive layout to your page elements, including columns and navigation . Even if you only have a basic knowledge of HTML and CSS, you can easily use a framework to create a responsive prototype fairly quickly, like the ones in Figure 7-7 . Using a framework isn’t a substitute for knowing how the code works when creating an actual website, but during the prototyping process, it means that design team members will be able to create or work on responsive HTML prototypes—they don’t need to be developers to be able to use frameworks and modify the code as needed . f igure 7-7. These example prototypes were all created using the f oundation responsive framework. 200  LEarNING rESPONSIVE WEB DESIGN aFoundation by ZURB (http://foundation . zurb . com), as you can see in the example prototypes, is a great place to start . It has a small-screen- first, 12-column flexible grid, with semantic markup . Bootstrap (http:// getbootstrap . com) is another commonly used framework . You can also search the Web for “responsive framework” and find dozens of other options . They are all different, so check a selection out to find the framework that best meets your needs . Pr Ot Ot YPING t OOLS If you don’t want to create a prototype in HTML, there are several tools that you can use to create responsive prototypes—both desktop and online applications . However, for the most part, these tools will not create true responsive prototypes that can be viewed at any screen size . Instead, they will let you create several separate static wireframes at different screen sizes . Some responsive prototyping tools include: • Balsamiq (http://balsamiq . com/) • Froont (http://www . froont . com/) • HotGloo (http://www . hotgloo . com/responsive-prototype-tool), as pictured in Figure 7-8 Also check out Balsamiq’s article “Responsive Design with Mockups” (http://support . balsamiq . com/customer/portal/articles/615901-respon- sive-design-with-mockups) for some tips on getting started . Visual Design Moving on from the prototype, the next step is creating a visual design for the website . This is where you add colors, typography, and branding elements . Once again, this needs to happen a little differently than with a fixed-width site . Traditionally, the design would be presented to clients or stakeholders in one or more Photoshop comps (a flat visual representation of what the site will look like), to show the front page and interior pages of the site . However, with a responsive site, you don’t want to show them just one static view of the page . 7. rESPONSIVE WOrKfLOW    201 af igure 7-8. The h otGloo online prototyping application. It’s best to involve clients earlier in the process by showing them the responsive prototypes . This will help make sure they have a clear under- standing of what a responsive site is, throughout the process . When you get to the visual design part of the process, there are ways to present visual design elements other than those Photoshop comps . St YLE t ILES If we aren’t going to show clients a pixel-perfect design comp, how do we bridge the gap from prototypes to a fully designed site? Style tiles are one place you can start . Designer Samantha Warren came up with the idea of Style Tiles (http:// styletil . es) as a “design deliverable consisting of fonts, colors and inter- face elements that communicate the essence of a visual brand for the web . ” Warren explains that creating style tiles is similar to the process used by interior designers when designing a room in a house . The interior designer doesn’t just come up with three different room designs off the bat . First, the designer works with the client to decide on colors, tex- tures, and materials; design options are then based on those choices . You can see an example of style tiles in Figure 7-9 . 202  LEarNING rESPONSIVE WEB DESIGN a