Web Design and Development
Responsive Web Design (RWD)
Some content from:
Jump Start Responsive Web Design
(Craig Sharkie and Andrew Fisher)
Learning Outcomes
demonstrate best practices in creating standards-based websites
understand the need for sites that are presented appropriately for the device they are accessed with
be able to use CSS media queries to create responsive websites
2
What is Responsive Web Design?
ensuring the user enjoys the best experience possible on your site… minimal resizing and scrolling, be it on a desktop, laptop, or mobile device... an approach that allows our designs to respond to any device they find themselves on
3
Environment
screen sizes and shapes vary
landscape and portrait
how users interact varies
touch, gesture, game controllers…
4
Aspect ratio is the term used to describe the dimensions of an image by comparing the width to the height and expressing it in ratio form.
Write Once, Run Anywhere
Ethan Marcotte, credited as the father of RWD, published an article on A List Apart in May 2010, “Responsive Web Design”, which focused on technical pillars for RWD:
fluid grids
flexible images
media queries
5
Ethan Marcotte
Simplest example: viewport meta tag
site without (left) and with (right) the code:
<meta name="viewport" content="width=device-width, initial-scale=1">
6
Fluid Grids
grids were discussed in the lecture on design principles
7
Wikipedia’s Grid entry overlaid with the 960 Grid System, 16-column structure
Adaptive Images
looks to solve two problems:
the difficulties in predicting the dimensions at which an image will display
resolution at which images can display
adaptive image techniques:
ways to allow your images to better accommodate fluid grids and layouts
new proposals in HTML5 - different image sources used by different devices
potential problems:
users may notice stretched or pixelated images
using large images (suitable for larger resolutions) for smaller displays means the user is downloading unnecessary data
8
Media Queries
media queries assess the capability of a device – is the browser capable of meeting these requirements? if so, then load this CSS or execute these rules…
media type:
<link rel="stylesheet" href="print.css" media="print">
media query:
<link rel="stylesheet" href="projection.css" media="projection and (color)”>
9
HTML for Media Queries
you can apply multiple classes to an element, e.g.
<div class="col w-4col m-2col">
…
<div class="col w-2col m-1col">
then style these differently depending on viewport width - so the right style applies for a class at a given size…
10
Media Queries
@media (min-width:45em)
{
.m-2col { width: 100%; }
.m-1col { width: 48%; }
.col:nth-child(2) { margin-right: 0; }
}
11
these styles apply only when the width of the viewport is 45em or above (wide width)
at this (wide) width:
w-2col – no style applied
m-1col – style applied
<div class="col w-2col m-1col">
Media Queries
@media (min-width:30em) and (max-width:45em)
{
.w-4col { width: 100%; }
.w-3col { width: 74.5%; }
.w-2col { width: 49%; }
.w-1col { width: 23.5%; } }
12
these styles apply only when the width of the viewport is between 30em and 45em (medium width)
at this (medium) width:
w-2col – style applied
m-1col – no style applied
<div class="col w-2col m-1col">
Example Code
https://github.com/learnable-content/introduction-to-RWD/tree/ lesson4.2final
https://github.com/learnable-content/introduction-to-RWD/tree/ lesson5.2final
13
These 3 windows show the same code at different window sizes and how the styles are different. Left-to-right: small, medium, large
13
Dynamic Content
content changes based on user's situation
somewhat of a frontier
examples:
calls-to-action don't need to exist after that action has been taken
page content could be based on your location e.g. display international shipping information for people located in other countries, but for locals, display local information
14
Mobile-First
one school of thought: instead of designing a 'regular' website, then adding features to make it mobile-friendly, design it with mobile users in mind first, then augment it to produce a desktop version
focuses early design process more on the content
should end up with better results for both site styles
15
Now… Read the book Watch the video course
sitepoint.com/premium/books/jump-start-responsive-web-design
sitepoint.com/premium/courses/introduction-to-responsive-web-design-2889
16
Summary
Responsive Web design is a modern best practice in creating standards-based websites
CSS media queries allow you to create sites that are presented appropriately for the device they are accessed with
this helps the site to achieve the goals
17
https://www.bringyourownlaptop.com/courses/dreamweaver-cc-2018-introduction-to-responsive-web-design-basic