[PPT] - Responsive Web Design What & How Manjunatha A Hosur 1 PowerPoint Presentation

SLIDE 1

1

Responsive Web Design – What & How

Manjunatha A Hosur

SLIDE 2

2

Responsive Web Design

Introduction
What
Layouts
Media Queries
Responsive Media
Considerations
Pros & Cons
Useful resources
Q&A

Agenda

SLIDE 3

3

With 5.9 billion

mobile-cellular subscriptions, global penetration reaches 87%, and 79% in the developing world.

Mobile-broadband

subscriptions have grown 45% annually

ver the last four

years and today there are twice as many mobile- broadband as fixed broadband subscriptions.

SLIDE 4

4

17% of cell phone owners do most of their online browsing on their phone, rather than a computer or other device

SLIDE 5

5

Mobile users greater than desktop in near future Source: Morgan Stanley Internet Trends Mobile users greater than desktop in near future

SLIDE 6

6

Users are always in control Web designers v/s Web users – Who is in control

Designers

Target specific browser
Optimize for specific

width

Implement hacks to

create identical experiences cross- browser & cross-platform

Users

Choose browser they want

to use

Zoom-in & zoom-out to

increase and reduce font size

Maximize browser or view

it at half available width

Full control over where and

how, they access our content

SLIDE 7

7

So many devices

SLIDE 8

8 8

Screen sizes

Screen Size

800x480 854x480 482x320 1024x768 1024x600 960x640 1920x1080 Samsung Galaxy S Vibrant Nexus One HTC Incredible HTC EVO HTC Desire HD Windows Phone 7 Droid Droid 2 Droid X iPhone 3GS & lower iPhone 4 iPad PC Galaxy Tab Blackberry Playbook PC TV

SLIDE 9

9 9

Input devices

SLIDE 10

10 10

Summarize the issues Users are in control

Summarize the issues

Display size Hundreds of devices now, thousands more to come Network speeds Standards support Input method Context

SLIDE 11

11 11

Is Separate sites the solution?

Creating separate sites for specific kinds of devices

Desktop site
Tablet site
Site for touch enabled mobile devices
Site for mobile devices without touch

support

m.website.com
tablet.website.com
tablet.version.website.com

No hope of convergence Building separate sites is not future friendly. Adapting to flexible web is the only way

SLIDE 12

12 12

Responsive Design Approach

Small + Medium + Large One site for every screen.

SLIDE 13

13

Layouts

Fluid Layouts Converting fixed units to flexible units

Target / Context = Result

Sizing of fonts

Percentages
r ems

Grid Layouts

Better site

structure

Consistency.

CSS tables

display:table- cell;

SLIDE 14

14

Media Queries - Introduction Media queries define which styles should apply under specific circumstances by allowing you to query the values of features such as resolution, colour depth, height, and width. By carefully applying media queries, you can iron out the remaining wrinkles in fluid layout.

SLIDE 15

15

The viewport meta tag lets us control the scaling and layout viewport of many devices.

Meta Tag

Width

Height

User-Scalable

Initial-Scale

Viewport tags and properties

Maximum-Scale / Minimum-Scale

@viewport { width: device-width; }

CSS Device adaption

Currently Limited to prefix – Opera & IE 10

SLIDE 16

16

Media query

Let you question the browser to determine if certain expressions are true. If they are, you can load a specific block of styles intended for that situation and tailor the display.

@media [not|only] type [and] (expr) { rules } Basic components

Media Types
Media Expressions
Logical Keywords
Rules

SLIDE 17

17

Media Types

Source : http://www.w3.org/TR/CSS2/media.html

SLIDE 18

18

Media Types - Components

Media Expressions

Tells user agent to whether or not to load a particular stylesheet for a given type of media. Syntax : @media print { }

r externally, using the media attribute on a link element, it would be:

Most devices support screen instead of specific devices. Ability to test against different features of a device using expressions that evaluate to either true or false. Syntax : @media screen and (min-width: 320px) { } Width Device-Height device-aspect-ratio monochrome Height Orientation Color Resolution Device-Width aspect-ratio Color-Index Grid

SLIDE 19

19

Media Types - Components

Rules

Combination with media types and media expressions would make media

queries more powerful.

and – Used to test against more than one expression - @media screen and (color)
not - The not keyword negates the result of the entire expression

@media not screen and (color) {...}

r - There is no ‘or’ keyword for media queries, but the comma acts as one. This lets you

load a set of styles if any one of a series of specified expressions evaluates to true: @media print and (color), tv and (color)

only keyword can be used to hide media queries from older browsers, as they won’t

recognize it. @media only screen and (color)

These are basic CSS style rules that included within media query. @media only screen and (min-width: 320px) { a{ color: red; } }

SLIDE 20

20

Using media queries

Placed in media attribute of link element to include an external stylesheet.

a{ text-decoration:none; } @media screen and (min-width: 960px) { a{ text-decoration: underline; } }

Media queries could be used in two ways

SLIDE 21

21

Media query order

Mobile

/* base styles */ @media all and (max-width: 768px) { ...} @media all and (max-width: 320px) {….}

Desktop

The default layout is what you typically see on the screen of a browser on a laptop or desktop computer. Then, using a series of media queries (typically max-width), the layout is simplified and adjusted for smaller screens Using media queries to adjust the layout for mobile experience first. /* base styles */ @media all and (max-width: 320px) {….} @media all and (max-width: 768px) {…}

SLIDE 22

22

Responsive Navigation

Designing proper site navigation is key to responsive design.

Good responsive navigation adheres to following criteria

Less screen real

estate

User friendly and

intuitive

Support variety of

devices Following are some of popular techniques for handling navigation in responsive designs

Top Nav or “Do Nothing” Approach
The Footer Anchor
The Select Menu
The Toggle
The Left Nav Flyout
The Footer Only
The “Hide and Cry”

Navigation needs to be accessible and easy to use, no matter the screen size. Example, www.indochino.com

Source:

http://bradfrostweb. com/blog/web/resp

nsive-nav-patterns/

SLIDE 23

23

Responsive Media 71% of mobile phone Users

expect mobile phone users to load as quickly on their mobile phones as their desktops.

Increasing page load time increases performance. 74% of mobile phone Users

will only wait 5 seconds or less for a page to load.

57% of mobile web users

who were disappointed will not recommend the site.

are unlikely to return to a slow loading site.

Main reason for degraded performance of mobile sites is due to large media assets being downloaded like images and video.

Source: Equation Research on behalf of Compuware

SLIDE 24

24

Solution to performance issues

Solution

matchMedia() javascript

Better handling of background images. Handling devices with Retina display using –webkit-min-device-pixel-ratio

Responsive Image options Selectively serving images to mobile if (window.matchMedia("(min

width: 38em)").matches)

{ ….. } Sencha.io Adaptive Images http://src.sencha.io /768/http://www.d

mainname.com/im

ages/product1.jpg Cloudinary

SLIDE 25

25

When to use?

Time & Money Support

Performance

Content Mobile Ads

SLIDE 26

26

Pros & Cons

Its not a silver bullet
Detailed planning need.
Longer build time
Testability
Responsive design is not a

technology, it’s a powerful development philosophy.

Multiple teams maintaining

different device specific sites is costly and drags the innovation.

Enables a new approach to web

development intended to support

ptimized web experience from

single front end codebase.

SLIDE 27

Where can we learn more

Sketching / Wireframing

tools

metaltoad.com
csswizardry.com
Adobe Dreamweaver

6

Responsive design elements

Responsive Images
Responsive Titles
Responsive data Tables
Responsive Videos
Responsive Sliders
Responsive Carousel
Convert Menu to dropdown
Adaptive Images

Templates and Grids

Gridless
Skeleton
Less Framework
Bootstrap
Mobile Boilerplate

js scripts

CSS3

Mediaqueries JS

Respond
Adapt

Testing tools

Responsinator
Media queries

debugger

Responsivepx
Screenfly
RWD Testing Tool

SLIDE 28

28

Thanks Q A

&