DFW - Viewports and Layouts [LESSON]

Responsive Web Design

Responsive Web Design

Responsive web design refers to your website responding to the size of the device of the user. In the past, most people looked at websites on large screens, such as desktops and laptops.  However, now people use a variety of devices all the way from large screens to small screens on our phones.  To deal with this, web developers have adjusted how their sites are viewed on a variety of devices. You want your site to be easy to read, no matter the device of the user. You don’t want the viewer to have to scroll horizontally to see the words and images on their screen.  So, your site needs to adapt to the size of the device.

Viewports

The viewport is the visible area of the web page, it is what the viewer sees on their screen.  This is small for a phone and large for a desktop.  To make your page adaptable to the size of the screen, you will give directions in your code to make the width of the screen adjust to the “device-width.”   You can also set the zoom level of the page when it is loaded by the browser. When developing your elements for your site, you also need to consider the viewport. It is best to use percentages as often as possible, rather than specific sizes in pixels.  Later in the course, we will learn how to set your viewport and how to make your elements adjustable. The image here shows how responsive web design affects how your site is viewed on a variety of devices.

Image envoi-20.jpg courtesy of Eva Cornejo at https://www.vecteezy.com/vector-art/304793-responsive-web-design

Layouts

When designing the layout of your site, you need to consider your viewer’s experience.  Are you noticing a trend here? We keep talking about the viewer, that is because one of the most important things in design is user experience (UX).  Whether you are designing a website, a video game, a program, a room, or a presentation, you need to consider how the viewer/user will experience your product.  Part of that is called usability; usability is how easy it is for the user/viewer to use your site.  So, when considering layout, you need to consider how the user will view the page, what they are likely to be most interested in, and make it easy for them to get where they need to go on the site.  The user doesn’t need to be hunting all over the page or site to find what they need. If you make it hard, they will leave and find another site. Considering how many websites there are out there, there will be another site able to give them what they need.  You want to keep your user on your site as long as possible; you don’t want to frustrate your audience. 

When considering layout there are 4 main parts – the header and navigation, the images, the content, and the footer.  The header and navigation give the user important information. It helps them understand the purpose of the page (title) and how to navigate the site (navigation). Images are very important in web design; they help to tell the story. A lot of people are more visual, so they prefer to see images and get information from images rather than reading text. Images you use should be well thought out and add value to the site/page. The content is important, as that is why people are there, so you need to pay attention to the writing and the placement of the content. People tend to scan websites and stop and read when something catches their attention.  People tend to scan either in a Z pattern or an F pattern. So, you should consider this when placing your most important elements in the layout.  The most important items should be at the top, as the viewer tends to see less as they go down the page. For the Z pattern, there are 4 areas of emphasis, the top left, the top right, the bottom left, and then the bottom right. For the F pattern, the most important elements should be in the “golden triangle”, which is the triangle area formed by the top of the F and the top part of the left side of the F. As you can see, in the image below, the viewer will look further to the right at the top and as they go down the page they tend to look less and less to the right. See below for an example of both the Z pattern and the F pattern.

Another helpful tool is the rule of thirds.  In the rule of thirds, you draw a 9 square grid, you place the elements you want the viewer to focus on where the intersections of the lines are.  The rule of thirds is used in visual art, including photography.  It helps to have an attractive composition. The image below shows the rule of thirds where you would place the important elements at the blue circles.

Finally, the footer gives additional information, including attribution to the creator of the site or the business with the copyright statement. Some sites, usually those where the page or pages are long, will have navigation options in the footer as well.  Many business sites have contact information and additional information in the footer section.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION