Rwd lecture Chiang Mail Pete Hillman
84
petehillman.com RWD Responsive Web Design
description
What is RWD? why is it important? How can do we use it?
Transcript of Rwd lecture Chiang Mail Pete Hillman
Thanks for coming to the talk
email me on: [email protected]
please note there may be some differences between this pdf slide and the presentation
Online Since 1992
Online Since 1992
Online Since 1992
What is a web creative
programmer coder web designer graphic designer
A responsive design is composed of three distinct parts: !A flexible grid. !Flexible images. !Or more specifically, images that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow). !Media queries. !The final layer of a responsive design, media queries optimize the design for different viewing contexts, and spot-fix bugs that occur at different resolution ranges.
Responsive web design is a web design approach aimed at crafting sites to
provide an optimal viewing experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide range of devices. ...
http://en.wikipedia.org/wiki/Responsive_web_design
Ethan Marcotte
Definition
http://liquidapsive.com/
Demos of !
static liquid
adaptive responsive
Real world examples
“A consistent user experience across devices.”
“Not a consistent appearance across devices.”
NOTE
What happens when we lose 80% of traditional screen space?
?
Lose 80% of your screen space?
Economics
User Experience
Future Internet Usage
Device type explosion and viewport size
Future Internet Usage
• mobile data use to increase by a factor of 26 by 2015
suggests that 40% of smartphone net use happens in the home, 25% at work, and the remaining 35% in transit
•more widely available than electricity in the Middle East, Sub-Saharan Africa, and Southeast Asia
Average smartphone usage doubled: 79 MB per month, up from 35 MB per month in 2009
Cisco report 2013: Global Mobile Data Traffic Forecast Update, 2012–2017
•more mobile devices than people on earth end of 2013
User Experiencenavigation
Economics
Walmart Canada recently unveiled its new responsive design, the first enterprise e-commerce site in the country to make the switch. !Conversion’s up 20%, mobile orders up 98%.
Device explosion
Viewport size variation
Take note that small failures can have big effects
CNN site failure
Design Flow content strategy !!
!typical design strategy !
client designer content creator
PSD > developer / coder > website !!fixed
pixel perfect !
folds and magazine desktop mentality !
!!
Responsive Design Flow !!
Client interview share insight knowledge
how what where when why !
current site analysis of users, target audience.
No fixed layouts (PSD's)No pixel perfect layouts and expectations
!!
in Browser design and development. !
Iterate > Client > iterate* !
Costly as more work involved labour intensive, more time pre planning as well as
iterating.
petehillman.com
Content is king
!what does the user want and need (on that device)
!e.g. data, images, product, etc….
!fluid mindset
petehillman.com
How Google does it:
So from the basic core message develop up and then relate all the following content to the core message to stay simple / on track
message mission essence
user context
Look and feel
finishing touches fine details
media queries !
wiki !
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). !It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web Design. !examples of supported properties: !!device-aspect-ratio aspect ratio !device-height length height of the output device !device-width length width of the output device !resolution resolution ("dpi" or "dpcm") resolution !width width of the rendering surface
media queries !
examples: !<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' /> !linking to stylesheet if meets criteria here its 701 px and max width 900 px !or directly into the page: !screen and print differences !@media screen { body { width: 75%; } }
@media print { body { width: 100%; } }
!@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { body { background: #ccc; } }
compounded media queries
Common media query breakpoints
These breakpoints cover about 95% of use cases.
!
Large Desktop - Default styles if designing for desktop-first
Small Desktop - 1440px width
Laptop - 1280px width
Tablet Landscape - 1024px width
Tablet Portrait - 768px width
Mobile Landscape - 480px width
Mobile Portrait - 320px width
The Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1">
no Viewport Meta Tag
1
iOS Safari assumes a webpage is 980px wide, zooming out in order to fit the whole lot within the available (iPhone 4) 320px. The content is then much less readable, unless you zoom in.
By stating that the width of your layout is equal to the device width, you'll run into problems when a device is used in landscape.
11
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
In Windows 8, there are two “modes” of use: Metro mode and classic mode. !!When snapped, IE10 ignores the meta viewport tag for any viewport smaller than 400 pixels in width (which it is, when in snap mode). This in turn messes up your beautifully set responsive plans and results in the same kind of smart scaling you see on non-optimized sites on an iPhone or Android device.
Problem Microsoft Windows 8
While the specification states that device-width should return the width of the “rendering surface” of the device, Windows 8 doesn’t seem to adhere to that when in snap mode. Unless they are claiming that in snap mode the “rendering surface” is just the snapped portion of the screen.
http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
Progressive enhancement
Graceful degradation
Browser wars
the rise of internet explorer
the dark lord and evil to all web developers
massive market share
Microsoft Internet Explorer 8.0 21.14% Microsoft Internet Explorer 11.0 15.71% Chrome 33.0 12.67% Firefox 27 10.55% Microsoft Internet Explorer 9.0 8.76% Microsoft Internet Explorer 10.0 7.12% Microsoft Internet Explorer 6.0 4.15% Firefox 28 2.83% Safari 7.0 2.61% Chrome 32.0 1.79%
http://www.netmarketshare.com/
Desktop Browser Version Market Share
Market Share of Safari 7.0 Safari 7.0 34.29% Market Share of Android Browser 4.0 23.04% Market Share of Chrome 33.0 Chrome 33.0 7.14% Market Share of Safari 6.0 Safari 6.0 6.22%
Mobile/Tablet Browser Version Market Share
http://caniuse.com/#feat=css-mediaqueries
IE slow version release issue
Graceful degradation
ie 10 ie 9 ie 8 ie 7
failing with grace
dealing with reduced browser capabilities
Progressively Enhance
design from the core elements simply and increase complexity
so basic html, css then js (why designers need some code!)
mobile first
nav
nav
nav
nav
image
copy
copy
Different layout examples
User Context Dependent
considerations:
User demographicsproduct / service being shared
i.e. know your user, how the come to the site, what they want, and when they want it
dan’s example
http://danhershberger.com/
Flat Design
What is it?
Flat Design
skuemorphic flat design
skuemorphic
flat design examples
ios7
• simple access to the content on mobile device
• Loads faster as no complex graphic images
• Less distracting
• Easier for the developer ? folds easier?
Benefits
Problems with coding for responsive design
display:none;
images
bandwidth / load time
the picture or element is still loaded even though not visible
the whole image is loaded even if the image needed is small. problem for retina devices that demand high rez.
chewing up data plans and load times that are slow create none returners. (note the time for a website to load before
a user goes to your competitor = 3.5 sec)
Responsive Image solns
WHAT IS THE `PICTURE` ELEMENT? !The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media queries, it gives developers control as to when and if those images are presented to the user. !SAMPLE MARKUP FOR `PICTURE` <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture> !!!WHAT IS THE `SRCSET` ATTRIBUTE? !The srcset attribute is an extension to the img and source elements that provides a concise method for delivering high-res assets to high-density displays only, while allowing the user to override requests based on a preference or available bandwidth. !SAMPLE MARKUP FOR `SRCSET` <img src="fallback.jpg" alt="" srcset="photo.jpg 1x, photo-hd.jpg 2x">
Optimisation
why?
Users expect 2 seconds. !!
After 3 seconds, 40% will abandon your site. !
gomez.com !!
75% of shoppers who experience an issue will not buy from that site.
!akamai.com
!>56% of shoppers left for a competitor’s site
rather than suffer delays. !
gomez.com
http://info.cern.ch/hypertext/WWW/TheProject.html
Below is a copy of the 1992 version of the World Wide Web that Berners-Lee had stored on a floppy drive since the early days. Last
year, it was re-uploaded onto CERN's servers
An example of fluid responsive website design with a very fast load time
First website:
Modern average web page:1.4mb
(size of my three years at university and my degree research project)
Size matters
Ford Model T October 1, 1908 highly economical
simple to maintain / make
Range Rover 2014 economical 0
complexity high dependency
BUT
Model Tmore mpg
than
progress does not necessarily mean efficiency
What happened?
desire for Rich media = increasing complexity
graphic designers brought imagerydemanded layout control
video images
js effects
So with increasing complexity:
dependency on externalities
html css js databases video
controlled layouts
browser variations
adaptive variation to deal with these demands
higher bandwidth more server calls
Browser specific prefixes and kinks
Browser strengths and weakness’s
Variable Browser support for new properties and tech
also software wars e.g. Adobe v Apple flash
Result of all this
Polyfills (often js)
-webkit-min-device-pixel-ratio: 1.5 min--moz-device-pixel-ratio: 1.5 -o-min-device-pixel-ratio: 3/2
unknown support
=
Solutions
Optimisation
images = compress / optimisesize / scale : retina devicesserver detection = serve correct size scale browser detection = serve correct size (problem http requests delay)
Dont set image size use auto height and 100% width
PNG: for transparency (PNG-24), or there are few colours (PNG-8).
JPG: for tons of colours (like photos). No transparency.
GIF: very heavy Most animations can be replaced with CSS3.
Image types
Lazy Load = js (also place js at end)
minify and compress (clean code)
Gzip = correct server settings
Reduce HTTP requests
how a browser renders a page !Render path that this page takes before it gets displayed.... !• browser downloads the html file • browser reads the html and sees that there are one css file, one javascript file and one
image • browser starts downloading the image • browser decides it can not display the webpage without first getting the css and
javascript • browser downloads the CSS file and reads it to make sure nothing else is being called • browser decides it still can not display the webpage yet until it has the javascript • browser downloads the javascript file and reads it to make sure nothing else is being
called • Browser now decides it can display the webpage
Stop calling in extra scripts, styles and fonts combine them to reduce the need for multiple http requests
Critical render path
Most websites have absolutely terrible render paths because they are calling so many things that the browser must load before the webpage can be displayed. The two most common are the CSS files and the javascript files.
development solutions
H5BP
Bootstrapper
Custom code creation and design
frameworks
Yahoo
Zurb Foundation etc…
Box Sizing
Width padding border included inside the width of the element
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
REMS
An em value is calculated against the font-size of a current element, so boxes sized with it will consequently scale as font sizes are adjusted by
the element or its ancestors.
ems
1em is equal to the current font size.
Problem the classic nested em scaling problem.
e.g.
• 16px from the root html element
In translating the pixel size of the heading to ems, we apply the target ÷ context = result formula (24px ÷ 16px) to arrive at a relative and scalable font-size of 1.5em
create a H1 (24pxl) tag in ems
REM =
avoids the classic nested em scaling problem.
rem is defined as the font-size of the root element. So, all references to rem will return the same value, regardless of ancestor font size
"root em"
To calculate its size relative to its parent, which is the H1 tag, you have to use the same target ÷ context = result formula, where target is 11 pixels, and the size of the H1 tag (the context) is 24 pixels. This gives you 11 ÷ 24 = 0.458333333333333em.
Problem
what if we want to create a page element (e.g. link) relative to its parent, which is the H1 tag?
html { font-size: 100%; } /* Browserdefault, 16px */ h1 { font-size: 1.75rem; } /* 28/16 = 1.75 */
h2 { font-size: 1.375rem; } /* 22/16 = 1.375 */ p { font-size: 0.875rem; } /* 14/16 = 0.875 */
Why is this a big deal?
totally changed the size of the elements easily
@media only screen and (min-width: 1060px) {
html { font-size: 10px; } .content-area { width: 70%; font-size: 1.6rem } .sidebar { width: 30%; font-size: 1.4rem; } }
} no need to re-calculatenew widths and font sizes using
pxs or ems
Grids
many types: flexible - fixed width
navigation patterns
“Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy.” ! Trent Walton
Creatives developed ways of folding websites depending on the scale and viewport size
Most common wordpress etc…
navigation pattern examples
http://tympanus.net/Tutorials/AnimatedBorderMenus/
http://tympanus.net/Blueprints/SlidePushMenus/
email me on: [email protected]
