Responsive Web Design

Outline

• The Need – Mobile Growth
• What is Responsive Web Design
• How to Design Responsively
• Major Technology Features

– media queries
– fluid grids
– scalable images

• More Examples of Responsive Websites

Media Queries & Responsive Web Design

The Growth of Mobile Marketing and Tagging by Microsoft Tag

Size of the Mobile Market

• There is a proliferation of mobile devices
worldwide.

• More and more people access Internet
only through mobile devices.

• Estimated by the year 2020, 12 billion
mobile subscriptions.

• Websites must be designed to make sure
the mobile viewer has an excellent
experience.

As of October 2020, mobile internet had overtaken desktop internet usage.

How Fast is the Mobile Internet Growing?

• From http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet

Mobile Forces You to Focus
• Requires the design team to focus on the most important

content, data, and functions.
• There is no space in a 320 by 480-pixel screen (the original

2007 iPhone) for extraneous, unnecessary elements
• More recent devices have resolutions of 1,000 ppi, but the

screen size is still between 4 and 6 inches
• One is forced to focus on content that’s most important to

users
– What features and functionality are essential
– It may be nice to have, but does it belong on your page

• Designers must prioritize

Screen Resolution Stats
• From http://gs.statcounter.com/screen-resolution-stats

Building for Mobile Can Extend Your
Capabilities

• The design technique of “Mobile first” encourages designers
to use the full capabilities of the mobile device.

“Saying mobile design should have less is like saying paperbacks
have smaller pages, so we should remove chapters.” (Clark)

• Mobile devices offer
– Use of geo-location to optimize the experience.
– Require Switch layouts depending on the way they’re held.
– Need to support rich, multi-touch interfaces

• input devices that recognize two or more simultaneous touches
– e.g. two finger tap, two finger scroll, pinch, zoom

• some devices also recognize differences in pressure and
temperature (i.e. Apple Watch)

Design for the Mobile Web
• There are three main approaches:

1. Build an entirely separate mobile .mobi site
• The domain name mobi is a top-level domain. Its name is

derived from the adjective mobile, indicating it is used by
mobile devices for accessing Internet resources via the
Mobile Web.

• The domain was approved by ICANN on 11 July 2005, and
is managed by the mTLD global registry

• To date only 0.06% of web TLDs:
http://w3techs.com/technologies/details/tld-mobi-/all/all

2. Host the mobile site within your current domain (a subdomain)
(mobile.mycompany.com)

3. Configure your current website for mobile display using
Responsive Web Design (RWD) techniques

Reasons for not using
mobile.mycompany.com websites

1. Redirects can hinder/annoy search engines
2. Redirects take lots of time
3. If you offer a mobile.website for iPhone, what about for iPad,

Android, etc.
4. Sharing a mobile.website will not work for people on laptops, as they

will end up with a site designed for a small screen
5. Philosophical: every web resource should live at one URL!

In conclusion, building a single responsive website is the preferable way
to go.

Responsive Web Design
• RWD is the concept of developing a

website in a way that allows the
layout to automatically adjust
according to the user’s screen
resolution (called its viewport).

• The viewport meta tag lets you set
the width and initial scale of the
viewport.

• For example

• See viewport sizes at
http://viewportsizes.com/

phone desktop tablet

Responsive Web Site Example:
Microsoft

https://microsoft.com/

Use your laptop/
desktop, tablet
and smartphone
to check out the
website

Responsive Web Site Example
Clean Air Commute Challenge

http://clearairchallenge.com/

Popular Viewport Sizes
• Smartphones: Size (pixels) Pixels/in Size (inch on diag)
iPhone 12/13 Pro Max 2778×1284 458 ppi 6.7in
iPhone X/XS/11 2436×1125 458 ppi 5.8in
iPhone 7/8 Plus 1920×1080 401 ppi 5.5in
Samsung Galaxy S21 Ultra 3200×1440 515 ppi 6.8in
• Tablets:
iPad Air 2 2048×1536 264 ppi 9.4in
iPad mini 3 2048×1536 326 ppi 7.9in
Samsung Galaxy Tab S 1600×2560 360 ppi 8.4in, 10.5in
• Notebooks:
MacBook Air 1440×900 128 ppi 13.3in
MacBook Pro Retina 2880×1800 220 ppi 15.4in
• Desktops:
iMac 2560×1440 109 ppi 27in
HP XR30W 2560×1600 101 ppi 29.7in

Responsive Web Design
• The term “Responsive Web Design” was coined by Ethan Marcotte in an article

on May 25, 2010.
• for his article see http://www.alistapart.com/articles/responsive-web-design
• for his website see http://ethanmarcotte.com/

• Responsive web design (RWD) is a web design approach that tries to achieve an
ideal viewing experience, which means:
– easy reading and navigation with a minimum of resizing, panning, and

scrolling
– across a wide range of devices (from mobile phones to desktop monitors)

• A site designed with RWD adapts the layout to the viewing environment by using
1. fluid, proportion-based grids,
2. flexible images, and
3. CSS3 media queries (you provide different CSS based upon the viewport size).

• see the W3C documentation of Media Queries at
http://www.w3.org/TR/css3-mediaqueries/

Media Queries
• W3C created media queries as part of the CSS3 specification.

– http://www.w3.org/TR/css3-mediaqueries/
• A media query consists of a media type (screen) and the actual query enclosed

within parentheses, containing a particular media feature (max-device-
width) to inspect, followed by the target value (480px). The query can be zero
or more expressions that check for the conditions of particular media features
– Example below: Style sheet (example.css) applies to devices of a certain

media type (screen) with certain feature (color screen).

• Note: the keyword “all” applies to all media types and is the default
• Here are two equivalent pair of media queries

Media Queries (cont’d)

• Enhanced media types allows targeting of specific physical characteristics of the device,
e.g.

• A media type (screen), and
• the actual query enclosed within parentheses, containing a particular media feature (max-
device-width) to inspect, followed by the target value (480px).
• the expression is asking the device if its horizontal resolution (max-device-width) is equal
to or less than 480px.

Media Queries (cont’d)

• Multiple property values in a single query can occur by chaining
them together with the and keyword

caniuse.com for Media Queries

“Can I use” provides up-to-date browser support tables for front-end web technologies on desktop and
mobile web browsers. The site was built and is maintained by Alexis Deveria”.

All recent browser versions support media queries.

A Simple Example
• Create a circle that is green for mobile phones, blue for tablets,

and pink for desktops (watch with Chrome resizing)

find the code here http://jsbin.com/EsEJixu/1/

A Simple Example: the Source Code

Note: to create a circle, width and height must be equal and border-radius set to 50%, which causes the

to wrap around

Using JavaScript to Handle Older Browsers
• Many older browsers do not support media queries;
• css3-mediaqueries.js by Wouter van der Graaf is a

JavaScript library to make IE 5+, Firefox 1+ and Safari 2
transparently parse, test and apply CSS3 Media Queries.

• Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already
offer native support.

• Retrieve the library from here:
– https://css3-mediaqueries-

js.googlecode.com/svn/trunk/css3-mediaqueries.js
• P.S.: The percentage of users still using those browsers is

less than 1%. No longer recommended.

Hiding Content on Smaller Screens
• In some cases, it may be advisable to hide content on the mobile device that

would otherwise be visible on the desktop
– this is done so users with small screens can avoid long scrolls
– the usual way to handle this is to provide a link to “additional content”

• CSS allows us to show and hide content using
display: none;

• Either declare display: none for the HTML block element that needs
to be hidden in a specific style sheet or detect the browser width and do it
through JavaScript.

• Note that visibility: hidden just hides the content (although it is
still there), whereas the display property gets rid of it altogether.

• See Google on Mobile FriendlyWebsites
https://developers.google.com/search/mobile-sites/

Firefox Includes a Tool to Check for
Responsive Design View

Firefox Responsive Design View

Creating Fluid Grids
• In “adaptive grids”, we define pixel-based dimensions.

– Hence, we have to adjust the widths and heights manually for
certain device viewports.

• In “fluid grids” we define relative-based dimensions.
– Since fluid grids flow naturally within the dimensions of its parent

container, limited adjustments will be needed for various screen
sizes and devices.

• In fluid grids we
1. Define a maximum layout size for the design.
2. The grid is divided into a specific number of columns to keep the layout clean and

easy to handle.
3. Then we design each element with proportional widths and heights instead of pixel-

based dimensions.
• So whenever the device or screen size is changed, elements will adjust their

widths and heights by the specified proportions to its parent container.

Converting Fixed Pixel Sizes to Percentages

• To transform pixel-based column widths into percentage-based, flexible measurements use
the formula: target ÷ context = result

• If the initial value of the page’s title is 700px — but it’s contained within a designed width
of 988px, divide 700px (the target) by 988px (the context) like so:

• 700 ÷ 988 = 0.7085

• And 0.7085 translates into 70.85%, a width one can drop directly into the stylesheet:
h1 { width: 70.85%; /* 700px / 988px = 0.7085 */ }

• we can do the same with the margin of 144px (288px ÷ 2):
• 144 ÷ 988 = 0.14575

• the 0.14575 becomes 14.575%, and add that directly to the style rule as a value for the
title’s margin-left:

h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */
width: 70.85%; /* 700px / 988px = 0.7085 */ }

Flexible Images

• To avoid having an image deformed due to the screen size one
should avoid specific definitions of width and height and
instead use CSS’s max-width property setting it to 100%:

img { max-width: 100%; }

• As long as no other width-based image styles override this rule,
every image will load in its original size, unless the viewing
area becomes narrower than the image’s original width.
– With the maximum width of the image set to 100% of the screen or

browser width, if the screen becomes narrower, so does the image.

• The browser will resize the images as needed using CSS to
guide their relative size.

More Examples of Responsive Web Sites
For some additional examples of responsive web design see:

•http://hicksdesign.co.uk/
•http://2011.uxlondon.com/
•http://www.stpaulsschool.org.uk/
•http://css-tricks.com/
•http://yiibu.com/
•http://sickdesigner.com/
•http://ethanmarcotte.com/
•http://foodsense.is
•http://earthhour.fr
•http://w3conf.org
•http://mediaqueri.es
•http://fourkitchens.com
•http://achieveinternet.com

Bootstrap
• Bootstrap is a powerful front-end framework for faster and easier

responsive web development.
• It includes HTML and CSS based design templates for common user

interface components like Typography, Forms, Buttons, Tables,
Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel
and many other as well as optional JavaScript extensions.

• Bootstrap also gives you ability to create responsive layout with much
less effort

• Bootstrap responsive features make your web pages to appear more
appropriately on different devices and screen resolutions without any
change in markup

Getting Started
• There are two versions available for download, compiled Bootstrap and

Bootstrap source files. Current version is 5.1.3.
• Recommend use stable version 4.6.x.
• Go to http://getbootstrap.com/ and click on Download Bootstrap
• Select the compiled and minified CSS, JavaScript and fonts, or link to

CDN
• Lots of different installations available

– May need jQuery, Popper

• See samples of uses of Bootstrap at: http://expo.getbootstrap.com

Supported Browsers
• Specifically, Bootstrap support the latest versions of the major

browsers and platforms. On Windows, it fully supports Internet
Explorer 11 and Edge. Partial support is available for IE 8-10.

The Bootstrap file structure

Compiled CSS and JS files, bootstrap.* as well as
Compiled and minified CSS and JS (bootstrap.min.*)
Reboot provides improved cross-browser rendering
Four font files (glyphicons-halflings-regular.* in the
fonts folder)

Creating a Basic Bootstrap Template File

Basic Bootstrap Template

Hello, world!

Bootstrap Grid System
• Bootstrap 3 introduces the responsive mobile first fluid grid system that

scales up to 12 columns as the device or viewport size increases.
• Bootstrap 3 includes 4 predefined grid classes for quickly making grid

layouts for different types of devices like phones (xs), tablets (sm),
desktops (md),and larger desktops (lg). For example,
– you can use the .col-xs- class to create grid columns for extra small devices

like smartphones;
– similarly, the .col-sm- for small screen devices like tablets;
– the .col-md- class for medium size devices like desktop, and
– the .col-lg- for large desktop screens.

• Bootstrap 4 provides simplified navigation, removes Glyphicons, adds
reboot, improved grids (up to 5-grid tier), flexbox layout, improved
form control, improved browser support, new utility classes. See:

Bootstrap 3 vs Bootstrap 4: Should you move? What are the Differences?

• Bootstrap 5 provides 6-grid tier (xs, sm, md, lg, xl, xxl)

Bootstrap 5 Grid System

Creating Layouts with Bootstrap Grid System

• In the above illustration there are total 12 content boxes in all devices, but
its placement vary according to the device screen size,

• E.g., the mobile device layout is rendered as one column grid layout , with 1
column and 12 rows placed above one another,

• in tablet it is rendered as two column grid layout which has 2 columns and 6
rows.

• in medium screen size devices like laptop and desktop it is rendered as three
column grid layout which as 3 columns and 4 rows, and

• in large screen devices like large desktop, it is rendered as four column grid
layout which has 4 columns and 3 rows.

Browser Output

In a laptop or desktop having screen or viewport width greater than or equal to
992px and less than 1200px;
it has 4 rows where each row has 3 equal columns resulting in 3×4 grid layout.

Bootstrap 4 Grid System
Applying any .col-sm- class to an element will not only affect its styling on small devices
like tablets, but also on medium and large devices having screen size greater than or equal
to 768px (i.e., ≥768px) if .col-md- and .col-lg- class is not present.

Similarly, the .col-md- class will not only affect the styling of elements on medium
devices, but also on large devices if a .col-lg- class is not present

Grid columns should add up to twelve columns for a single horizontal block.
Bootstrap 4 changes Extra Small to <576, and shifts over to Extra Large, for 5 columns. © Ellis Horowitz & Marco Papa 2014-2021 41 Five Bootstrap Grid Examples © Ellis Horowitz & Marco Papa 2014-2021 42 https://getbootstrap.com/docs/4.0/examples/grid/ https://getbootstrap.com/docs/4.6/layout/grid/ (4.6) Source Code (1 of 5)

Grid Template for Bootstrap

Three Equal/Unequal Columns

Source Code (2 of 5)

Three equal columns

Get three equal-width columns starting at desktops and scaling to large

desktops. On mobile devices, tablets and below, the columns will automatically
stack.

.col-md-4

Three unequal columns

Get three columns starting at desktops and scaling to large

desktops of various widths. Remember, grid columns should add up to twelve for a
single horizontal block. More than that, and columns start stacking no matter the
viewport.

.col-md-3

.col-md-6

.col-md-3

Two Columns, Two with Nested Columns

Source Code (3 of 5)

Two columns

Get two columns starting at desktops and scaling to large
desktops.

.col-md-8

.col-md-4

Full width, single column

No grid classes are necessary for full-width elements.

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an

existing column. This gives you two columns starting at desktops and scaling to
large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns
will stack.

.col-md-8

.col-md-6

.col-md-4

Mixed Mobile, Desktop, Tablet

Source Code (4 of 5)

Mixed: mobile and desktop

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm
(tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of
these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths
for xs and sm, you only need to specify xs.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

Mixed: mobile, tablet, and desktop

.col-xs-12 .col-sm-6 .col-lg-8

.col-xs-6 .col-lg-4

.col-xs-6 .col-sm-4

Column Clearing; Offset

Source Code (5 of 5)

Column clearing

Clear floats at
specific breakpoints to prevent awkward wrapping with uneven content.

.col-xs-6 .col-sm-3

Resize your viewport or check it out on your phone for an example.

.col-xs-6 .col-sm-3

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.

.col-sm-5 .col-md-6

.col-sm-5 .col-sm-

offset-2 .col-md-6 .col-md-offset-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6
.col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

Bootstrap 5 Grid System
See: https://getbootstrap.com/docs/5.1/layout/grid/

CS计算机代考程序代写 javascript chain Java flex js android jquery Excel Responsive Web Design

Hello, world!

Bootstrap grid examples

Three equal columns

Three unequal columns

Two columns

Full width, single column

Two columns with two nested columns

Mixed: mobile and desktop

Mixed: mobile, tablet, and desktop

Column clearing

Offset, push, and pull resets

Hello, world!

Bootstrap grid examples

Three equal columns

Three unequal columns

Two columns

Full width, single column

Two columns with two nested columns

Mixed: mobile and desktop

Mixed: mobile, tablet, and desktop

Column clearing

Offset, push, and pull resets

Related Posts