ifi7174 lesson4

@ Sonia Sousa 1

IFI7174.DT – Lesson 4

Responsive Web Design

2015

@ Sonia Sousa 2

Content

• We will start by understand– What is Responsive web design• Distinguish different Layout types

• Then to understand the page elements, – Layout types– Position elements in the screen– Grid based design

2015

@ Sonia Sousa 3

Responsive web design• We use Responsive web design – when we wont to design a page that can adjust to user’s

environment.• One site for every display

– Small + Medium + Large• To respond to

– Unbiquous computing.• To be able to

– Tailor user experiences;

• Or above all – Looking for flexibility – Focus on the users needs; and

• Provide a good usage in multiple contexts.2015

@ Sonia Sousa 4

Responsive web design

• Aims to adjust – A page content to any display

• Mobile display (960 x 640 pixels)• Tablet display (1024 x 768 pixels)• Laptop display (1280 x 800 pixels)• PC high resolution display (2560 x 1440 pixels)

• With responsive design pages1. The page Layout should fit in any screen resolution;2. The text should be easier to read and navigate; and3. Images should be easily accessible.

2015

@ Sonia Sousa 5

Responsive Web Design

• As said before, responsive design– Consider different browser windows and screens• dimensions and shapes

– Establish the • Content boundary; and• Give the page more flexibility.

2015

@ Sonia Sousa 6

How do we do it…

• How can we?– Constrain the page content and layout, and give – Flexibility at the same time.

• First…– You need to understand very well the concepts

1. Layout2. Constrain layout, 3. Position elements in the screen4. Grid based design.

2015

@ Sonia Sousa 7

Layout types

• A layout is part of the page graphic design• Is the arrangement and styling of – Page elements

• Three main types of layouts– Fix design– Fluid or liquid design – Responsive design

2015

@ Sonia Sousa 8

Layout types• Consider different different – Display resolutions

• dimensions and shapes; and • screen size.

– Adjust the layout to them by • Placing the different elements in the page

– Create content boundary by• Deciding which elements need to be

– Fix width; or – Flexible.– Based on which elements works as containers

» Of page elements and which are contained2015

@ Sonia Sousa 9

Layout types• Stop

– Thinking in Pages. • Start Thinking

– in Systems– In information– In context

• Best practices– Make your most important content to fit the display resolution– Start Small. Think Mobile First– Exit Photoshop,

• Enter the Browser– Make It Modular– Always think in Optimizing

2015

@ Sonia Sousa 10

Understand display Resolution

• Resolution refers to the number of – dots a screen shows per inch• 1 inch = 72 dots per inch

• Size of the screen– In inches; and • Size: 13.3 inches

– The total number of pixels in the • horizontal and vertical directions

– Resolution: 1280 x 800 pixels

2015

@ Sonia Sousa 11

Units

• Pixels is – a dot on the computer screen• Equals to pixels, relative to the canvas resolution

• 1 point is – the same as 1/72 inch

• 1 inch is – Equal to 2.54cm

2015

@ Sonia Sousa 12

Display Resolution

– iPhone 4• Size: 3.5 inches• Resolution: 960 x 640

pixels– iPad 2

• Size: 9.7 inches• Resolution: 1024 x 768

pixels

– 13" screen• Size: 13.3 inches• Resolution: 1280 x 800

pixels– 27" screen

• Size: 27 inches• Resolution: 2560 x 1440

pixels

• Your design needs to– adjust to several range of different screens sizes

2015

@ Sonia Sousa 13

Fix design• This means that you need FIX your page layout– To a common display size • Mobile (960 x 640 pixels)• Tablet (1024 x 768 pixels)• Laptop (1280 x 800 pixels)• PC high resolution Screen (2560 x 1440 pixels)

2015

@ Sonia Sousa 14

How to…

• Establish first – What display size you wont to FIX your content

• Mobile? Or tablet or laptop?

• Common rule is to adjust your layout to a predefined resolution screen– A mobile display for instant

• A Mobile has a display (960 x 640 pixels)– fix using 920 pixels wide

– A tablet (1024 x 768 display)• Fix using 950 pixels wide

• The aim is to avoid scrollbars2015

@ Sonia Sousa 15

Things to know about

• Fix width layouts – do not change size if you increases or decreases

the size of your browser window; and therefore– do not adjust to different types of screens.

• Why used them – Because you need • Consistency in your design• You need to control the content of your page

2015

@ Sonia Sousa 16


• Advantages– You have control over the appearance

• You know exactly how your page will be displayed when using different displays

– You don’t need to worry about • what happens to your design on a very wide (or small)

monitor– You can concentrate the content in the center in the

middle of the window to guarantee good visualization • Independently of the device used

2015

@ Sonia Sousa 17


• Disadvantages– In higher resolution screens• The page can look smaller• The text can be harder to read

– Works better in similar desktop or laptop computers

– You can have big gaps around the edge of a page

2015

@ Sonia Sousa 18

Fix design

• Main rules 1. Fix the width of your page in pixels• Based on the average display you wont to design form

– 960 pixels is the most used – But to accommodate small resolution displays

» you can use as well 760 pixels

2. Set the left and right margins and paddings• padding: 0px;• margin: 0px;

2015

@ Sonia Sousa 19

Fix design

• Main rules 1. Use a extra HTML element to contain the page• Instead of contain the elements in the body

2. Always center the Layout3. The elements inside the Fixed container can

have • either percentage widths or fixed widths

2015

@ Sonia Sousa 20

Fix design

2015

@ Sonia Sousa 21

Fluid (liquid) design• Also known as liquid layout– Is the design that adjusts to user’s displays

• the page gets wider or narrower as you resizes the window (big/small).

• Advantage: – Makes the best use of the space available.– Create user-friendly pages,

• because it adjusts to the user.– No large and similar extra white space

• Making it more visually appealing.– If designed well, a fluid layout can eliminate horizontal scroll

bars in smaller screen resolutions.

2015

@ Sonia Sousa 22

Things to know about• Disadvantage:

– You need more work to do make it work – less control over what the user sees

• It is not guaranteed you will have control – Over the page elements; or– That your design looks good at different displays.

– So you may overlook problems – Images, video and other types of content

• with set widths need to be readjusted to accommodate different resolutions.

– In some case in high the resolution displays• Lack of content may create excess white space and diminish aesthetic

appeal.

2015

@ Sonia Sousa 23

Fluid design

• Main rules 1. Set the page layout in %• Constrain your content in 90%

– This means that you will have 10% free space to adjust to different displays

2. Set the left and right margins and paddings• padding: 1%;• margin: 1%;

3. Use a extra HTML element to contain the page• Instead of contain the elements in the body

2015

@ Sonia Sousa 24

Fluid design

• Keep it simple – Avoid using many graphics – Implement difficult code techniques– Create clean code– Use CSS for creating aesthetic appealing pages

• For instance min-width and max-width CSS property– To constrain you content when needed

– But be aware if certain properties are supported or not by the browses• for instance some version of Internet Explorer don’t support

this property

2015

@ Sonia Sousa 25

Fluid design

2015

@ Sonia Sousa 26

A Mix of both designs

• For instance – Two-Column Fixed Layout design• The navigation column is a fixed width• But..

– the content area is fluid

• Advantage:– Content area changes width depending of the

browser window

2015

@ Sonia Sousa 27

Responsive design

• Or elastic design is the design that uses– Both techniques• fixed-width and fluid design (with a twist)

• The twist is – to add flexibility to it• by sizing all elements with em‘s

– Typography size flexibility set in em values; and• Others with %

– Boxes and images using %;

2015

@ Sonia Sousa 28


• Advantage:– If implemented correctly, • Keep the same relative proportions;

– Can be very user-friendly – Makes sure that when someone zoom the text• The columns holding the text grow as well.

– The goal is to have everything grow larger or smaller in proportion with the user’s preference.

2015

@ Sonia Sousa 29


• Disadvantage:– If not implemented correctly, • Can bring huge usability problems.

– Once implemented • Test it in several displays and browsers.

– Is much more difficult to create than the other two

– It may require supplementary code to work in IE6.

2015

@ Sonia Sousa 30

Responsive design

• Main rules– Use Adaptive grids– Use Adaptive typesetting– Use Adaptive images

• Ingredients on how to provide a– flexible grid-based layout,– Flexible images and or media, and– Add Media queries

2015

@ Sonia Sousa 312015

@ Sonia Sousa 32

Exercise 2

• Explore carefully these web sites and – Explore some responsive web design tools– Classify some web site design in above categories.

• Fixed, Fluid or responive

• Questions:– Indicate which ones you think have responsive web

design, fixed width and or have Fluid design. Justify, – Also tell me what was the responsive design tool you

prefer, if any?

2015

@ Sonia Sousa 33

List of examples

• List of examples• http://www.bostonglobe.com/• http://www.corvusart.com• www.tlu.ee• http://www.time.com/• http://www.onoff.ee/• http://www.colourpixel.com• http://www.kino.ee/• http://www.blossomgraphicdesign.com• http://kinosoprus.ee/• http://epl.delfi.ee/• http://nodi.ee/• http://store.artlebedev.ru/

2015

http://www.bostonglobe.com/

http://www.corvusart.com/

http://www.tlu.ee/

http://www.onoff.ee/

http://www.colourpixel.com/

http://www.kino.ee/

http://www.blossomgraphicdesign.com/

http://kinosoprus.ee/

http://epl.delfi.ee/

http://nodi.ee/

http://store.artlebedev.ru/

http://store.artlebedev.ru/

@ Sonia Sousa 34

Responsive web tools:

• http://responsivetest.net/• http://www.responsinator.com/• http://mattkersley.com/responsive/• http://responsivedesignchecker.com

2015

http://responsivetest.net/

http://www.responsinator.com/

http://mattkersley.com/responsive/

http://responsivedesignchecker.com/

@ Sonia Sousa 35

Using adaptive grids

• To better use then you need to recall lesson 2 on CSS on– Control the position elements by using • CSS contain position elements

– Block level elements and In line elements– Remember the BOX concept

» borders, » margins, » padding, and » background colors

• Use CSS positioning schemes

2015

@ Sonia Sousa 36

Contain page elements

• A contain page elements is used – Contain HTML elements in a page• Those should appear only once; and • form the basic building blocks of the page• The page structure• Usually we use ID

– an ID is used only once per page» Identified with (#)

– Use class for elements that appears multiple times» Identified with (.)

2015

@ Sonia Sousa 37

Contain Page elements

• Block level elements

• In line elements

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• Lorem ipsum

adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur

2015

@ Sonia Sousa 38

Contain page Elements

• block-level element – inside another block-level element

Lorem Ipsum • Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

The <div> element2015

@ Sonia Sousa 39

Box offset properties

• Tell the browser how far from the– top or bottom, left or right it should be placed.• Fixed Positioning

– Positions the element in relation to the browser window,– do not affect the position of surrounding elements; and

» They do not move when the user scrolls up or down the page

• Floating Elements– Take out the elements from the normal flow– Position it to the far left or right of a containing box

2015

@ Sonia Sousa 40

Box model

2015

@ Sonia Sousa 41

Start think in

• Width• Height• Position (fixed, absolute,relative)• Top, bottom, right, left• Z-index

Position elements attributes

2015

@ Sonia Sousa 42

Page layout design

• Usually this layout design come together with notions such:– The float property• Allows you to move content to the

– left or right of the page • Help you to create multi-column layouts.

– The position property• Allows you to change the display of a page or box

– From a normal flow to where you wont it to appear• specify relative, absolute, or fixed positioning.

2015

@ Sonia Sousa 43

Overlapping elements

• z-index– control the position of overlapping elements– If you use relative, fixed, or absolute positioning• Boxes can overlap. z-index allow you to choose who

come to front or backwards

• Z-index position– Value• the higher the number the closer that element is to the

front.

2015

@ Sonia Sousa 44

Flexible grid-based layout• Ingredients on how to make your • Layout flexible

• Sizes your elements to become flexible; and • Make it adaptive/fluid by using a set of constrains. • Make it responsive

• Make flexible means– The page Layout should fit in any screen resolution;– The text should be easier to read and navigate; and– Images should be easily accessible.

2015

@ Sonia Sousa 45

Responsive design

• Main rules– Use Adaptive grids

• Adaptive grids– Are grids or templates normally used by designers to set

• How Visual elements are place in the page; and • How they are organized in the page

– They include,• Common page layout design patterns. Or• Predefined layout grids, that

– helps to create a more professional looking design.

2015

@ Sonia Sousa 46

Grids or templates • Helps you to create a structure in which

– You will contain page elements• It creates the CSS and HTML responsive code for you

• Besides– Help set a visual consistency; as well as – Proportions and spaces between the different page elements

• Make your layout Flexible– Sizes your elements to become flexible; and – Make it adaptive/fluid by using a set of constrains.

• Help users to predict– Content in the page; and – Find the information faster; also– Creates consistency to the page

2015

@ Sonia Sousa 47

Creating a flexible grid

• Use pre defined Grid-based set– It helps you to create a structure which• Will contain page elements

– It creates the CSS and HTML responsive code » Convert from pixel to %

• Used Position and float CSS properties

2015

@ Sonia Sousa 48

How Grids Work

• For instance:– The 960 grid system

http://960.gs/– The Responsive Grid System

http://www.responsivegridsystem.com/– Grid system generator

http://www.gridsystemgenerator.com/http://grid.mindplay.dk/

2015

http://www.gridsystemgenerator.com/

@ Sonia Sousa 49

How Grids Work

• The 960 Grid System presents– Two grids systems• 12-column grid

– Starts in 60 pixels wide, the increases by 80 pixels» 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and

940.• 16-column grid

– Starts in 40 pixels wide, the increases by 60 pixels» 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700,

760, 820, 880 and 940.

2015

@ Sonia Sousa 50

Grid examples

2015

@ Sonia Sousa 51

Grid examples

2015

@ Sonia Sousa 52

EXERCISE 2Exploring carefully this 3 grid systems

2015

@ Sonia Sousa 53

Exercise 2

• Start by exploring carefully this 3 grid systems and answer me (send me the answer by email):– The 960 grid system http://960.gs/ – The Responsive Grid System

http://www.responsivegridsystem.com/– Grid system generator http://www.gridsystemgenerator.com/

• Questions:– What is the major characteristic that differentiates them, If

any?– Which one you will consider more useful for your future work

and why?

2015

http://960.gs/

http://www.responsivegridsystem.com/



@ Sonia Sousa 54

Responsive design

• Ingredients on how to provide a– flexible grid-based layout,– Flexible images and or media

2015

@ Sonia Sousa 55

Basic rules of grid-based layout

• Main rules – Use a percentages % based grid set.– Assume a standard wide for the page

• For instance – a width 960 pixels wide and a height of 640 pixels

– How to know how to constrain size • Based most used standard displays

– research on screen resolution» http://www.w3counter.com/globalstats.php» http://www.onestat.com/html/aboutus_pressbox31.html

• Based on your relevant Information – Information that demonstrate site relevance without scrolling.

2015

http://www.w3counter.com/globalstats.php

http://www.onestat.com/html/aboutus_pressbox31.html

http://www.onestat.com/html/aboutus_pressbox31.html

@ Sonia Sousa 56

How it works

• Start with…– Reset all browsers styling– This is important… • because of browser differences,

– That way you start from “zero” assuming that • All browser uses a commonly format tags.

2015

@ Sonia Sousa 57

How to reset styling

• Web browsers apply different sizes to tags– You need to force all tags to be standard• For instance

– Set consistent font sizes» Make all font sizes to be 1em

• then you can – create additional styles with specific font sizes for the different

tags

– That way, you stand a much better chance of getting consistent font sizes across browsers.

2015

@ Sonia Sousa 58

How to reset styling

• Continue by removing possible – paddings and margins

• Then, remove underlines from links– If you wont later you• Can selectively add underlines when you want them.

• Finally, remove borders from linked images– Internet Explorer, Firefox, and other browsers add

a colored border around any image inside of a link

2015

@ Sonia Sousa 59

FROM PIXELS TO %

2015

@ Sonia Sousa 60

From pixels to percentage

960 px

900px / 90%

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• Lorem ipsum

850px / ??

?? ??

#container

2015

@ Sonia Sousa 61

target ÷ context = result

– Converting pixel to % (the #container)• Target is 850px• Context is 900px

– 850px/900px = 0.94444444– The % is 94.444444%

– Converting pixel to % • Margins – relate to the outside block

– 10px/900px= 0.01111111» The % is 11.11111%

• Paddings – relate to the element itself (the #container)– 10px/850px= 0.01176471

» The % is 11.11111%2015

@ Sonia Sousa 62

FLEXIBLE IMAGES

2015

@ Sonia Sousa 63

Flexible images

• How to make it fluid?– Prevent images from exceeding the width of their

container

• Forces the image’s width to match the width of its container

.figure { float: right; margin-bottom: 0.5em; margin-left: 2.53164557%; /* 12px / 474px */ width: 48.7341772%; /* 231px / 474px */

}

img, embebed. Object, video { max-width: 100%;}

2015

@ Sonia Sousa 64

Background images

• Scalable and flexible background images– That stretch to fill the container box

.backgroundimg { background: url(me.jpg) top left no-repeat;background-size:100% 100%;}

2015

@ Sonia Sousa 65

FLEXIBLE TYPESETTING

2015

@ Sonia Sousa 66

Text attributes

• Text-align (center, right, left)• Text-decoration (overline, underline)• Text-transform (uppercase, lowercase, capitalize)• Color• Font-family• Font-style (italic)• Font-size• Font-weight (bold)

2015

@ Sonia Sousa 67

Units

• 1em is– the height of the element's font• 1.2 to the current font size = 16px

• % are – relative to other values• mostly used to cope with an absolute units• 100% = 16 pixels

2015

@ Sonia Sousa 68

What does an em actually mean?

• The em is a sliding measure. – One em is a distance equal to the type size. • In 6 point type, an em is 6 points; • in 12 point type an em is 12 points; and • in 60 point type an em is 60 points.

– Thus, one em space is proportionately the same in any size.

Robert Bringhurst, author of The Elements of Typographic Style, writes

2015

@ Sonia Sousa 69

Using ems• Using em units– The measurements will adjust proportionately

• Offer more precision and control• Allows users to resize text;

• The text in em adjust proportionately.– font size, line height, and spacing between elements

• default medium setting – Font-size in pixels

• Normal = 16px in most current browsers• Smaller = 11px

– Font-size in em• Normal = 1 em in most current browsers• Smaller = .75 em2015

@ Sonia Sousa 70

How this works?

• You make units match (more or less) to pixel equivalents– The technique assumes a default browser text size

set at medium, which is most often 16px.

2015

@ Sonia Sousa 71

How to apply?

• Assuming that– the current font-size (default) of most browsers is

• 16px, then 1em would equal 16px– If the default is set smaller at 11px,

• 11px would equal• But like this you can get long divisions• 11px/16px=. 0.6875

• An easier way is to use – a crafty method for normalizing a base font size using

ems • See http://clagnut.com/blog/348/

2015

http://clagnut.com/blog/348/

@ Sonia Sousa 72

One solution is• To set the font-size base down to 62.5%

– on the <body> element:body { font-size: 62.5%; }

– This will take based text down from 16px to 10px• Why?

– With a base of 10px you get round number to deal with • Then you can think in pixels when setting type in ems.

• after you apply 62.5% to the <body>– Then…

• 1em would appear as 10px• 1.2em as 12px• .9em as 9px• 1.8em as 18px

2015

@ Sonia Sousa 73

Use a convert tablePoints Pixels Ems Percent6pt 8px 0.5em 50%

7pt 9px 0.55em 55%

7.5pt 10px 0.625em 62.50%

8pt 11px 0.7em 70%

9pt 12px 0.75em 75%

10pt 13px 0.8em 80%

10.5pt 14px 0.875em 87.50%

11pt 15px 0.95em 95%

12pt 16px 1em 100%13pt 17px 1.05em 105%

13.5pt 18px 1.125em 112.50%

14pt 19px 1.2em 120%

14.5pt 20px 1.25em 125%

2015

@ Sonia Sousa 74

Or do the math

• Start to think proportionally, – express those pixel-based font-size values– and convert tem in relative terms em

• How should we do it?– 1em = 16px – Tranform 24px in em• 24px ÷ 16px = 1.5em

2015

@ Sonia Sousa 75

@MEDIA QUERIES

2015

@ Sonia Sousa 76

The final touch

• Use @media queries to – be able to adjust your styling better.

• conditional comments that – Adapt, respond, and overcome– Is part of the CSS3 specification

• the @media rule allows to apply– different style rules to different types of media • in the same style sheet.

2015

@ Sonia Sousa 77

Media query

• the @media rule – When a @media query is true

• Execute– If not

• applied, the normal cascading rules

• for example– change style sheets based on

• the width and height of the viewport– min-width and max-width

• On the orientation– orientation: landscape or orientation: portrait

2015

@ Sonia Sousa 78

Media query

• Media types– all, braille, embossed, handheld, – print, projection, screen, – speech, tty, and tv.

• customizing the media attribute of a link – <link rel="stylesheet" href="global.css" media="all" /> – <link rel="stylesheet" href="main.css"

media="screen" /> – <link rel="stylesheet" href="paper.css" media="print" />

2015

@ Sonia Sousa 79

Media query• creating an @media block in your stylesheet, and

associating it with a particular media type:

@media screen and (max-width: 400px) {figure, nav, #container {

width: 44.4444444%; /* 400px / 900px */ margin-right: 0;

}}@media screen and (min-width: 800px) and (max-width: 1200px) {

The style to change}@media screen and (orientation: landscape) {

The style to change}2015

@ Sonia Sousa 80

Organization

• @media queries in a standard css HTML link

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />

<link rel="stylesheet" media="print" href="print.css" />

2015

@ Sonia Sousa 81

In the css as @media rule

• include them in our CSS either as part of a @media rule:

@media screen and (max-device-width: 480px) { .column { float: none; }}

2015

ifi7174 lesson4

Education