Scribd
Upload
134 views

Responsive Web Design Tutorial: (Fundamental Concepts, Without Bootstrap)

The document is a tutorial on responsive web design without using Bootstrap. It discusses designing mobile first then using media queries for larger screens. Key concepts covered include the viewport meta tag, fluid grids that resize with the screen, and flexible images. It provides an example of a responsive layout that is one column on mobile and two columns on desktop, using CSS classes like .left and .right to float elements and a clearfix. The tutorial simplifies concepts from Google's responsive design documentation and provides sample CSS and HTML to demonstrate a responsive two-up layout.

Uploaded by

mojtaba sardarabadi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
134 views

Responsive Web Design Tutorial: (Fundamental Concepts, Without Bootstrap)

The document is a tutorial on responsive web design without using Bootstrap. It discusses designing mobile first then using media queries for larger screens. Key concepts covered include the viewport meta tag, fluid grids that resize with the screen, and flexible images. It provides an example of a responsive layout that is one column on mobile and two columns on desktop, using CSS classes like .left and .right to float elements and a clearfix. The tutorial simplifies concepts from Google's responsive design documentation and provides sample CSS and HTML to demonstrate a responsive two-up layout.

Uploaded by

mojtaba sardarabadi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Responsive Web Design Tutorial1

(fundamental concepts, without Bootstrap)

Responsive Web Design __________________________________________________________________________ 2


Viewport ______________________________________________________________________________________ 2
Design Mobile First then Apply Media Queries ________________________________________________________ 2
Responsive Two-Up Desktop Layout versus One-Up Mobile Layout _______________________________________ 4
First Page Hero and Response Form Styling ___________________________________________________________ 5
Responsive Image Styling _________________________________________________________________________ 6
Responsive Tabular Data__________________________________________________________________________ 7

Written by: Sally Kyvernitis, Temple University, 2-11-2016

1
Tutorial source https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en (reworked and simplified)

1
Responsive Web Design
2
Responsive web design (RWD) means designing sites to provide for optimal viewing and user interaction (easy to read and navigate with a
minimum of resizing, panning, and scrolling) across a wide range of devices (from desktop computer monitors to mobile phones).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries,
in the following ways:

 The fluid grid concept prevents horizontal scrolling by sizing elements in relative units like percentages, rather than absolute units like pixels.
 Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
 Media queries allow the page to use different CSS style rules based on characteristics of the device, like browser width.

Since mobile traffic now accounts for more than half of total internet traffic, Google boosts the ratings of mobile friendly sites if the search is made from a
mobile device. This has the net effect of penalizing sites that are not mobile friendly.

JavaScript frameworks like Modernizr, jQuery, and jQuery Mobile can directly test browser support for HTML/CSS features (or identify the device or user
agent) are popular.

Viewport
All pages must include a viewport meta tag. The viewport indicates to the browser that the page needs to be scaled to fit the screen.
Although there are various options, we recommend this as a default for you to use:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Design Mobile First then Apply Media Queries


The recommended approach to responsive web design is "mobile first", which means you begin by styling your page for your smal lest
width, then you add a "media query" to redefine those CSS rules that need to be modified for the next wider screen and then the next
wider, until you are done.

A media query first specifies media (like "screen" or "print), then a device width range, and possibly more factors (like device pixel ratio,
orientation), and finally a set of braces inside which you place the CSS rules you want to apply to those devices. To implement your own
responsive design, start out by deciding how you want to group the devices of users viewing your site. Of course, you would w ant to
create a small number (2-4?) of groups, but you might want to look at detailed specifications of particular devices to help you decide
where to set your "media query breakpoints". Here is an example of a media query (which is way too specific, but it shows the syntax of
a media query and it also shows the level of detail that is available about current devices, if you are interested).

/* From https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* iPhone 4 and 4S Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
{
/* styles */
}

2
Definition from https://en.wikipedia.org/wiki/Responsive_web_design (abbreviated)
2
To keep this tutorial simple, we will design for just two categories:

 Mobile (anything less than 600px) – no media query will be used since we are using the "mobile first" design approach.
 For Desktop, we will use this media query: @media screen and (min-width: 600px) { /* styles */ }

For this tutorial, we will work on a "single page layout" that has several (4) "virtual pages" when shown in desktop layout (see below). As
you can see, the desktop version has a two-up layout while the mobile version has a one-up layout.

Mobile Desktop

…more images…

followed by rearranged table data

3
Responsive Two-Up Desktop Layout versus One-Up Mobile Layout
To keep things clear (and so that I could place the two style sheets side by side while I worked), I created two style sheets :
 one for mobile (has no media queries - contains initial styling, and any styling that is in common between the 2 layouts) and
 one for desktop (all styles are inside of a single media query specifies desktop widths).

My HTML code references the mobile/common style sheet then the desktop style sheet which redefine rules only where needed.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="mobile.css" rel="stylesheet" type="text/css" />
<link href="desktop.css" rel="stylesheet" type="text/css" />
</head>

Terminology: this is a CSS Rule Set, with two CSS Rules in it.

To accomplish a one-up to two-up transformation, these are my suggestions (after studying and simplifying the Google code3).

1. Put your most common CSS rules inside of a body selector within your mobile/common style sheet. By placing CSS rules at the
highest level, you will have less code to copy/paste, and more consistency in your layout.

2. Create a container class that will hold either the one-up or two-up content for each "virtual" page. For mobile, you'll set its width is
100%, but in desktop, you'll prevent it from getting too large and make sure that it is centered on the page (margin:auto).

3. Create a class named "left" to style the first half of each two-up virtual page and a class named "right" to style the second half.
Notice that we float the "left" class left, make it 49% wide and provide a 1% right margin. For the "right" class, we do the opposite
(float it right with width 49% and left margin of 1%). Just as we saw with our first layout exa mples (where the "City Gallery" title was
floated left and the Nav bar floated right, both inside of a titleNav element), we need a "clear:both" rule to stop the floating at the
end of every virtual page. Since the desktop layout is the only version that needs to float elements (left/right), the mobile style sheet
will not define the left, right, and clear styles.

mobile.css desktop.css
body { @media screen and (min-width: 600px) {
margin: 0; padding: 0; /* avoid white line just inside browser window */ .container { margin: auto; max-width: 1000px; }
/* set up default text properties - most commonly used */ .left { float: left; width: 49%; margin-right: 1%; }
font-family: Tahoma, 'Arial Black', san-serif; .right { float: right; width:49%; margin-left: 1%; }
font-size: 18px; .clear { clear: both; }
} /* more rule sets */
.container { width: 100%; } }
/* more rule sets */

This HTML code changes from one-up (mobile) to two-up (desktop) by using the left, right, and clear styles.
<div class="container">
<h2>What will I learn?</h2>
<p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
<div class="left">
<p>You'll understand what it takes to … </p>
</div> <!-- end left -->
<div class="right">
<video controls >
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
</video>
</div> <!-- end right -->
<div class="clear"></div> <!-- stop float behavior -->
</div> <!-- end container -->

3
Tutorial source https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en (reworked and simplified).

4
In my html, I wrapped each "virtual page" (container class) inside of a div where I applied a "section" class (to allow for common styling
of all the sections) but also a unique id to allow for styling anything special about that particular page (like different background color or
different text alignment).

<div class = "section" id="section1">


<div class="container">… </div>
</div>
<div class = "section" id="section2">
<div class="container">… </div>
</div>
<div class = "section" id="section3">
<div class="container">… </div>
</div>
Take a look at the "version 1" code example (v1.html, v1_mobile.css and v1_desktop.css). This version only shows the following page
(and excludes styling for the other pages so it is easier to follow). To make this page change from one-up to two-up when the browser
gets wider, its container class has a div styled "right", a div styled "left", followed by one styled "clear".

Mobile Desktop

Getting the video to look nice only required this one rule set in mobile.css (see below). The video looks good in mobile width because it
is 100% wide. When the desktop layout kicks in, the video still looks good, filling up 100% of its right/left co ntainer which is now only
about 50% of the width of the screen.

video {
width:100%;
height: auto;
border-radius:16px;
border:2px solid gray;
}

First Page Hero and Response Form Styling


If you look at the final version of code (final.html, mobile.css, desktop.css), you will see that the first page is styled with class
"headSection" instead of just "section". The only difference between the two classes is that the "headSection" class has its headers
styled larger (h1, h2, …) – there is nothing responsive about the "headSection" class. The registration form (id="register") has some nice
styling, but it also does not have any responsive behavior. The responsiveness of the first page is achieved by nesting the o pening text
and registration form into divs that are classed "left" and "right (respectively), followed by the a "clear" div, just as it was done for the
"What will I learn?" page explained above.

5
Responsive Image Styling
The "Who will teach me?" page translates nicely from mobile to des ktop (as shown below), going from one-up to three-up layout. The
completed code for this is provided in the final code example (final.html, mobile.css, desktop.css).

Mobile Desktop

… more images…

The approach was very similar to what we used for the one-up to two-up transformation, as you can see from the code below. In the
HTML code, each image is surrounded by an imageContainer class which holds the image and the caption below it. In mobile layout, the
image is 100% wide inside of its imageContainer. The imageContainer class has a little styling for padding but is also 100% wide inside
of its container, so the images fill up the width of the mobile device. In desktop layout, the only change is that the imageContainer floats
left and is 33% wide (to get the three-up effect). We add the "clear" div (after all the imageContainers) to stop the floating behavior.
There is also a stylistic change from square images in mobile to round in desktop.

HTML Code mobile.css desktop.css


<div class = "section" id="section2"> .imageContainer { @media screen and (min-width: 600px) {
<div class="container"> width: 100%;
<h2>Who will teach me?</h2> padding-left: 4%; .imageContainer {
<p>The worlds leading mobile web developers.</p> padding-right: 4%; width: 33%;
<div class="imageGroup"> padding-bottom: 24px; float:left;
<div class="imageContainer"> }
<img src="img/chriswilson.png" > /* border-box includes .imageContainer img {
<br>Chris Wilson padding & border in the total border-radius: 50%;
</div> width & height of box */ }
<div class="imageContainer"> box-sizing: border-box; }
<img src="img/peterlubbers.png" > }
<br>Peter Lubbers
</div> .imageContainer img {
<div class="imageContainer"> width: 100%;
<img src="img/seanbennett.png" > box-sizing: border-box;
<br>Sean Bennet border-radius: 2%;
</div> box-shadow: black 0px 0px 5px;
<div class="clear"></div> margin: 1%;
</div> <!-- image group --> margin-bottom:8px;
<br> }
</div> <!-- end container -->
</div> <!-- end section -->

6
Responsive Tabular Data
Tabular data can be hard to read in mobile formats. The Google Tutorial4 showed a technique to convert the tabular data (below right) to
a format (below left) where the column headings become row headings that are repeated for each of the original data rows. Google's
code for that is provided below.

Mobile Desktop

Google's HTML Code mobile.css (nothing in desktop.css)


<table> table { margin-top: 26px; width: 100%; }
<caption> <p>Data from … </p> </caption>
<colgroup> thead { font-weight: bold; }
<col span="1"> tbody { text-align: center; }
<col span="1">
<col span="1"> @media screen and (max-width: 600px) { /* mobile only */
<col span="1"> table thead { display: none; }
</colgroup> table td {
<thead> display: block;
<tr> position: relative;
<th>Country</th> padding-left: 50%;
<th>Desktop share</th> padding-top: 13px;
<th>Tablet share</th> padding-bottom: 13px;
<th>Mobile share</th> text-align: left;
</tr> background: #e9e9e9;
</thead> }
<tbody> table td:before {
<tr> content: attr(data-th) " :";
<td data-th="Country"><a href="#">India</a></td> display: inline-block;
<td data-th="Desktop share">32%</td> color: #000000;
<td data-th="Table share">1%</td> background: #e9e9e9;
<td data-th="Mobile share">67%</td> border-right: 2px solid transparent;
</tr> position: absolute;
<tr> top: 0;
<td data-th="Country"><a href="#">GB</a></td> left: 0;
<td data-th="Desktop share">69%</td> bottom: 0;
<td data-th="Table share">13%</td> width: 33%;
<td data-th="Mobile share">18%</td> max-height: 100%;
</tr> font-size: 16px;
<!-- More Rows --> font-weight: 300;
</tbody> padding-left: 13px;
</table> padding-top: 13px;
}
}

4
Tutorial source https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en (copied ver batum).

You might also like