Responsive Web Design

Nir ElbazResponsive Web Design
Nir Elbaz

Nir ElbazNIR ELBAZNir Elbaz
Responsive Web Design
var vCard = {
“name”: “Nir Elbaz”,
“company”: “Como (formerly Conduit)”,
“position”: “Senior Software Engineer”,
“email”: “nire0510[at]gmail.com”
};

Index
Intro
The Basics
The Principles
UI Frameworks & Libraries
RWD Toolbox
DIY

Index
Intro
The Basics
The Principles
RWD Toolbox
DYI

Intro
The only thing we cared for…
90’s
640×480, 800×600
2000’s
800×600, 1024×768
2007
1024×768, 1280×800The iPhone
480 x 320
…… …… ……
Android
How my website
looks like

Intro
Common acceptable solutions:
❖ Design a single fluid single-column layout
❖ Create & maintain a separate “iPhone” (480x320) website
(which often has separate URL - SEO unfriendly)
❖ Ignore mobile visitors
Quite reasonable alternatives
back then

Intro
… But since then:
240×320, 240×400, 320×480, 480×640, 480×800, 540×960, 600×960, 600×1024, 640×960,
768×1024, 720×1280, 1366×768, 800×1280, 1080×1920, 1536×2048, 640×480, 768×576,
800×600, 1024×600, 1024×768, 1152×720, 1280×720, 1280×768, 1280×800, 1152×864,
1280×960, 1280×1024, 1360×768, 1366×768, 1440×900, 1600×900, 1400×1050, 1680×1050,
1600×1200, 1920×1080, 2048×1152, 1920×1200, 1920×1440, 2560×1440, 2560×1600, …
Landscape, Portrait Operating Systems
Watches, Appliances, Smartphones, Phablets, Mini-tablets,
Tablets, Netbooks, PC, Smart TVs, Vehicles...

Intro
Review - Common acceptable solutions:

Intro
Hmmm… NO.
Wouldn’t it be a waste of precious desktops & tablets screens real estate?

Intro
NO.
Wouldn’t it be a waste of precious development resources?

Intro
NO!
Wouldn’t it be a waste of precious money?

Intro
Are you convinced yet?
❏ More than 1.9 billion mobile users worldwide (Jul 2015)
❏ >80% of the Israelis own a smartphone (2015)
❏ 655 million of Facebook users are using only mobile (Jul 2015)
❏ 1 of 10 access the internet using a mobile in the U.S. (Apr
2015)
❏ Mobile device sales increased with over 85% (2013)

Intro
is the future
now!
...But... what is it, exactly? :-|

Intro
❖ A relatively new approach to web design
❖ Accommodating optimal viewing for different screen sizes
❖ Single:
➢ URL (SEO & user friendly)
➢ content source
➢ code base
➢ deployment
❖ All content available* for all devices (including updates)
DEVICE AGNOSTIC
easy reading and navigation with a
minimum of resizing, panning, and scrolling
across a wide range of devices

Intro
❖ The first “RWD” based website: Audi.com (2001)
❖ A RWD demo by Cameron Adams (2004)
❖ Ethan Marcotte coined the term RWD (2008)
➢ He also defined its principles (2010)
❖ YUI - The first RWD framework (2008)
640×480800×6001024×768

Intro
The challenges
❖ Characterization - what to show on each channel?
❖ Design - how to get the best out of my screen?
❖ Image resizing (high CPU, bandwidth, HTTP requests...)
❖ 3rd party content: iframes, videos, ads, social widgets...
❖ Backwards compatibility (media queries*)
❖ Optimization (conditional loading, RESS...)
❖ Devices and browsers bugs & inconsistencies
❖ Touch interaction

Intro
The approaches
❖ Build multiple fixed layouts websites (AWD)
Same (Google’s best practice) / different URLs
❖ Load the relevant resources (CSS, JS, HTML) using JS loaders
head.js, yepnope based on browser sniffing feature detection
❖ RESS - Server side controls
and -
❖ Using new HTML 5 & CSS 3 client side techniques
This is (mainly) what we’re going to learn today
deprecated

The Basics
Fixed, Fluid & Elastic Layouts

The Basics >> Layouts
Why do we need different kinds of layouts?
❏ Dealing with various design parameters:
❏ Screen size
❏ Screen resolution
❏ Browser’s window state (maximized, restored), window /
tab size etc
❏ Device (keyboard, ratio etc)
❏ Etc…

Fixed layout - key features
❏ Fixed width wrapper with fixed position
60% 20% 20%
Code Sample

Fixed layout - pros
❏ Much easier to use and to customize
❏ Less hassle with fixed-width contents
width === width === width on every device (*)
❏ No need to deal with min/max-width
❏ Good enough even to fit the smallest screen (800x600)

Fixed layout - cons
❏ May create excessive white space (large screens)
❏ May require a horizontal scroll bar (small screens)
Tip: Place content on the left hand side of page (LTR)
❏ Lower accessibility score for users w/ large screens

Fluid (liquid) layout - key features
❏ Wrapper size based on percentage or no wrapper at all
❏ Components also based on percentage
❏ Adjusted to user’s screen
Code Sample

Fluid (liquid) layout - pros
❏ Gets the most out of available screen’s real estate
❏ Extern white space is similar between all browsers / screens
❏ May eliminate horizontal scroll bars

Fluid (liquid) layout - cons
❏ May create excessive white space inside (large screens)
❏ The designer has less control over what user sees
❏ Content with fixed widths (video, images etc.) may need to be
set at multiple widths

Elastic layout - key features
❏ A “mix” of the previous couple of layouts
❏ Scales with browser text size
❏ The secret - use em / rem to set size
EM / REM In a Nutshell
- Not an absolute measure unit
- Relative to parent element font size (em) or root element font-size (rem)
- 1 r/em === 16 px in most browsers
- Conversions (rem): x px / 16 px = y em
y em * 16 px = x px
Not supported in <= IE8
Code Sample

Elastic layout - pros
❏ User friendly, if implemented correctly
❏ Everything resizes at the same rate
❏ Great for x-platform x-device web applications

Elastic layout - cons
❏ More difficult to create than the other two
Can be easier if using CSS pre-processors
❏ Requires a lot of savvy & testing
❏ May require IE hacks to support older versions of IE
❏ Can cause a usability disaster if gets wider w/o a reason

The Basics
Viewport

The Basics >> Viewport
Intro
❏ Mobile browsers render pages in a “virtual window”
❏ The viewport meta tag controls the viewport size and scale
❏ All popular mobile browsers support this tag
page
page
page
page
No viewport Viewport enabled

The Basics >> Viewport
Settings
width Width of the viewport in pixels. If not set, default is desktop size
height Height of the viewport in pixels. Usually it is better to ignore this value
initial-scale Multiplier that sets the scale of the page after its initial display (0 - 10.0)
minimum-scale The minimum multiplier the user can “zoom out” to (0 - 10.0)
maximum-scale The maximum multiplier the user can “zoom in” to (0 - 10.0)
user-scalable Indicates whether to allow a user to scale in/out (yes, no, 0 or 1)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Understanding Viewport

The Principles -or- TL;DR
❏ Fluid grid system (CSS 3 flexbox & grid)
❏ Flexible images and media
❏ Media queries
❏ RESS - Server Side Components
❏ Characterization and design strategies
❏ Unobtrusive JavaScript

The Principles >> Fluid Grid System
Intro
❏ Originated from the printed media
❏ Method for aligning elements on a page on screen
❏ Available in all layouts formats (fixed, fluid & elastic)
❏ Great for rapid prototype designs
❏ Page is divided to x equal columns with gutters in between
X = 12, 16 or 24
❏ Each element occupies 1 - max columns
❏ Complex layouts can be achieved using lib methods
push, pull etc

Popular grid systems:
Grid 960 (fixed)
Blueprint (fixed)
Semantic (fixed & fluid)
Unsemantic (fluid)
Golden Grid System (fluid)
Responsive Grid System (fluid)
Demo based on 960 Grid System

More samples

Unsemantic cheat sheet
Viewport: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
Container: grid-container
Columns *: grid-5, grid-10, …, grid-100, grid-33, grid-66
Hidden cols: hide-on-desktop, hide-on-tablet, hide-on-mobile
Nesting: grid-parent
Swapping *: push/pull-5, push/pull-10, …, push/pull-100, push/pull-33, push/pull-66
White space *: prefix/suffix-5, prefix/suffix-10, …, prefix/suffix-100, prefix/suffix-33, prefix/suffix-66
Breaks: clear
*: use with mobile- prefix to target mobile devices (width < 768px)
use with tablet- prefix to target tablet devices (768 <= x <= 1024px)
Download & read more here: Unsemantic demo & documentation
Code Sample

CSS 3 Grid & Flexbox in a nutshell
❏ New layout options (like: block, inline...)
❏ CSS3 Grid – best for organizing the layout structure of
higher-level elements, such as headers & sections
❏ CSS3 Flexbox – targeting the position of child elements and
their spatial relationship within a parent element
❏ Browser support: Flexbox Grid
Code Sample - Simple
Code Sample - Advance

Nir Elbaz
Let’s Practice!
1. Convert layout to elastic
2. Explore layout benefits
3. Use Unsemantic and convert
page to grid based
4. Bonus - convert layout to
fluid

The Principles >> Media Queries
Intro
❏ Supported in all major browsers (IE 9+)
❏ Help us to define set of classes per device target
❏ Can be used inside elements as an attribute, in CSS or JS
❏ Syntax:
@media rule {
class {
/* ruleset */
}
}
@import url(…) rule; <element media=“rule”>
1 2 3

Operators
Devices

Indicators

Common breakpoints
Target devices Media queries
Smartphones (P & L) (min-device-width : 320px) and (max-device-width : 480px)
Smartphones (L) (min-width : 321px)
Smartphones (P) (max-width : 320px)
Tablets (P & L) (min-device-width : 768px) and (max-device-width : 1024px)
Tablets (L) (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
Tablets (R) (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
Desktops and laptops (min-width : 1224px)
Large screens (min-width : 1824px)
Test our screen
Ordermatters!
Source code
*

Breakpoints

The Principles >> Flexible Images
Intro
❏ Images should change size based on screen resolution
❏ Common approaches:
❏ Load a big image and let it scale (fluid image)
❏ Use JavaScript code determine which is the right one
❏ Let server do that (e.g. generic handlers)
❏ Use HTML 5 & CSS 3 techniques:
MQ, picture, SVG (flat icons)

Guidelines
❏ Images should fit the screen perfectly
Quality, proportions, size
❏ Bandwidth should not be overused
3g, internet packages
❏ HTTP requests should be reduced to the minimum
❏ DOM manipulation should be avoided if possible

Common solutions
❏ Simple fluid image
❏ Fixes the non-fluid behavior
of images (unlike text)
img {
max-width: 100%;
height: auto;
}
Pros:
❏ Very easy to implement
❏ Doesn’t require additional resources
Cons:
❏ Wrong proportions on small screens (narrow)
❏ Bandwidth
❏ CPU (scaling)
Score:
:-(
Demo

Common solutions
❏ Focal point - Simple fluid image improvement
❏ Allows developers to “crop” images and control the focus on
its focal point for responsive design
❏ An image is represented in
12x12 grid
❏ Developer can set the
image’s focal point using CSS

1 2 3 4 5 6 7 8 9 10 11 12
1
2
3
4
5
6
7
8
9
10
11
12
down-1
right-4
Demo

Common solutions
❏ Use JS code:
a. Use matchMedia or other
JS device props to detect
device and load the right img
Pros:
❏ No need to scale image
Cons:
❏ JS dependant
❏ DOM manipulation
❏ Dead zones displayed until image download
Score:
:-(
Demo

Common solutions
❏ Server side solution:
a. Client writes screen res &
DPR in a cookie
b. Server serves the right
resources based on cookie
values
❏ Examples: Adaptive Images,
ReSRC
Pros:
❏ Great for performance
❏ Image can be generated on-the-fly
(not focal-point, though)
Cons:
❏ Server dependant
❏ Require server side skills
Score:
:-)

Common solutions
❏ Client side (HTML 5 & CSS 3):
1. Define the right image using
media queries
2. Use picture element and
media queries (experimental!)
3. Use srcset attribute
4. Use SVG icons or fonts
Foundation icons, icoMoon
Pros:
❏ Great for performance
❏ Pure client solution
Cons:
❏ Requires more coding
❏ Requires different resolution versions of the
same image
Score:
:-)
Demo

Dealing with high-res images
❏ High-res screens → Physical res > Logical res
❏ Display looks sharper
❏ Example: iPhone 4S Retina screen:
Physical resolution: 960 x 640
Logical resolution: 480 x 320

Dealing with high-res images
❏ Displaying standard images on high-res screens:
❏ Images appear smaller
❏ Images appear blurry
❏ Solutions:
❏ Media queries
❏ Picture element
❏ srcset attribute
❏ 3rd party libs, like Retina.js

Apropos: srcset & sizes
❏ Images
❏ large.jpg (1024 x 768)
❏ medium.jpg (640 x 480)
❏ small.jpg (320 x 240)
Scenarios:
Viewport 320px & 1x: 320*1*1.0 = 320px >> small.jpg (w-320px)
Viewport 400px & 1x: 400*1*1.0 = 400px >> medium.jpg (w-640px)
Viewport 800px & 2x: 800*2*0.3 = 528px >> medium.jpg (w-1024px)

The Principles >> RESS
Intro
❏ The here & now RWD solution
❏ Responsive images haven’t been standardized
❏ Devices still load the CSS behind media queries that they never use
❏ We lack native responsive layout systems (flexbox, templates etc.)
❏ We lack element media queries
DudeGot a wake-up call!!!

Key features
❏ Use server side components for faster loading, and hence
makes the mobile experience even better
❏ How it is done
❏ Reduce image payload (the biggest effect)
Load the right size image
❏ Reduce HTML, JavaScript and CSS payload
Load only what is necessary and suits device
❏ Further optimize based on bandwidth detection
❏ More expensive to develop

Key features
❏ Based heavily on feature detection
ua-parser, modernizr:
a. Client stores relevant info in a cookie
b. Server reads cookie content in every HTTP request
c. Server serves the right resource based on the cookie content
Client Server

The Charac..ics >> Characterization & Design
Intro
❏ Mobile First vs. Desktop First
❏ Progressive Enhancement vs. Graceful Degradation
❏ Old times web design process:
Plan → Design → Develop → Optimise
Nowadays:
Plan → Content → UX/IA → Design → Develop → Optimize

The Charac..ics >> Characterization & Design
Common techniques & notes
❏ Navigation: Resize and reposition, Horizontal → vertical, Slide-in side menu,
Toggle menu and more
❏ Slide-in “pages” instead of popups
❏ Loading widget
❏ Thumbs (two of them) instead of mouse
❏ On screen keyboard
❏ First impression - app icon
❏ Delights

The Charac..ics >> Unobtrusive JavaScript
Principles
❏ Keeping the JS, CSS, and HTML separated
❏ Using JavaScript to progressively enhance your app
❏ Think DRY while maintaining your code
❏ Adhering to web and accessibility standards

The Charac..ics >> Unobtrusive JavaScript
Sample
ROI = Visitors * 0.02 * % conversions * Avg Sale * Avg. Profit
Hmmmm… Should I go for it???

What is a framework?
A framework is a real or conceptual structure intended to serve as a
support or guide for the building of something that expands the
structure into something useful.

Why do we need a framework?
❏ Using a matured framework saves precious time
❏ You are good to go in no time
❏ Others maintain & improve it for you
❏ Implementation of best practices (The wisdom of crowds)
❏ Tested & used in hundreds of thousands of websites
❏ Designed to circumvent x-browser compatibility problems
❏ No need to reinvent the wheel

What exactly is a UI / front-end framework?
❏ Collection of tools for composing user interfaces:
❏ Grid system
❏ Typography
❏ Browser incompatibility solutions
❏ Common controls (JS / no JS)
❏ RWD support
Did you know?
The first UI framework was
YUI (2005)

How to choose “the right” one?
❏ Documentation
❏ Popularity
❏ Roadmap
❏ Seniority (DEV)
❏ Maturity (PROD)
❏ Browser compatibility
Randomlyorderedlist
❏ Plays nice with others
❏ Ease of use
❏ License
❏ Special features (RTL...)
❏ Founder / Sponsor
There is no absolute right!

5 Popular UI frameworks
❏ Twitter Bootstrap
❏ Zurb Foundation
❏ Skeleton
❏ Semantic UI
❏ HTML Kickstart
❏ Material Design
Randomlyorderedlist

Bootstrap vs. Foundation
Twitter Bootstrap Foundation Zurb
License MIT MIT
Size (All files) 14 files at 1019 KB 30 files at 936 KB
CDN Yes Yes
Contributors 658 722
Followers 386K 48K
Founder Twitter Zurb
Pre-processor SASS & LESS SASS
Twitter Bootstrap Foundation Zurb
Browser Support IE8+ (8,9 w/ hacks) IE9
Repository Github Github
RTL Support No * Yes
Responsiveness 3 breakpoints (px) Full (rem)
Support No Yes
Seniority Mid 2010 October, 2011
Comprehensive comparison & More frameworks

Getting Started With Foundation

UI Frameworks & Libraries >> Foundation
Getting Started
Complete Essentials Custom Sass
Grab this version of
Foundation if you want
everything in the
framework in simple,
vanilla CSS and JS.
A simple, lighter version
that includes typography,
the grid, buttons, Reveal
and Interchange.*
Include or remove certain
elements and define the
size of columns, colors, font
size and more.
Foundation is built using
SCSS, and you can work
with it in the same way.
Check out the instructions
on the Install
documentation page.
Download Download Customize Install...

Framework files
index.html
humans.txt
robots.txt
+ css
foundation.css
foundation.min.css
normalize.css
+ js
foundation.min.js
+ foundation
+ vendor

Demo - Forms Demo - Grid Demo - Navigation Demo - Components

Test drive

Fluid grid system
Key features:
- Originated from the print media
- Method for aligning elements
- Available in all layouts formats
- Great for rapid prototype designs
- Page is divided to x equal columns
- Each element can occupy 1 – max cols
- For complex layouts use lib methods
Foundation Grid Documentation
Foundation Block Grid Documentation

Syntactic sugar classes
❏ Using media queries to target specific device
❏ Using visibility classes to toggle elements based on device
❏ Using utility classes to deal with common layout tasks
❏ Using JavaScript classes to add common functionalities
❏ Using foundation playground for learning more

UI controls
❏ Some controls are JS based (topbar) & some aren’t (buttons)
❏ To add a JS based control:
❏ Add script reference to Modernizr
❏ Add script references to Foundation’s dependencies
❏ Add script references to Foundation OR individual plugins script files
❏ Initialize foundation (w/o plugins options)

Foundation JavaScript Documentation

RWD Toolbox
❏ Get inspired
❏ Responsive patterns
❏ Edge Reflow - Go from static design to responsive comp in just one-click
❏ Responsinator - test RWD on different device resolutions
❏ Screen sizes - A screen specifications DB for popular devices
❏ quirktools - Wireframes & screen simulator
❏ BrowserStack - Live, web-based browser testing
❏ Content generators - Images, content, icons
❏ Interface Sketch - Simple templates for web apps design
❏ Google Chrome ADB plugin
❏ Chrome, IE & Firefox developer tools
❏ Online code editors: Feditor, CodePen etc...
More tools, frameworks and libs can be found in presentation!

The Basics
<summary>

Summary
So… What have we learned today?
❏ The Basics
Fixed, fluid & elastic layouts, rem...
❏ The Principles
Fluid grid, images/media & media queries, RESS, characterization tips
❏ UI Frameworks & Libraries
Framework definition, popular frameworks, comparison, Foundation crash course
❏ RWD Toolbox
Useful design & development tools

Summary
Plan first
Plan first

Summary
Plan first
Think “Mobile First”

Summary
Work together
Work together as a team

Mix rich UX & good performance

Summary
Test, test & test some more
Always check yourself. Always.

Summary
Stay up-to-date

Summary
So… should I go responsive???
if (isComplexUC && (hasNoMobileUsers && hasNoMobileAddedValue))
{
return;
}
else {
goResponsive(‘go.’, ‘now!’, ‘why are you still here???’);
}

Summary
Resources & useful links
❏ Responsive web design
❏ Multi-screen resources
❏ Responsive websites examples
❏ CSS 3 Flexbox & Grid
❏ Building A Responsive Web Application
❏ Building Smartphone-Optimized Websites
❏ Responsive Design + Server Side Components
❏ Improve Mobile Support With Server-Side-Enhanced Responsive Design
❏ Creating a Mobile-First Responsive Web Design
❏ The Banker Street Inquirer
❏ 10 principles mobile interface design

Responsive Web Design

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Responsive Web Design

Similar to Responsive Web Design (20)

More from Nir Elbaz

More from Nir Elbaz (6)

Recently uploaded

Recently uploaded (20)

Responsive Web Design