NYU Webmaster Meetup October 3 rd 2014 Who am I Uwe Kristen I grew up in ze Black Forest Frontend developer since 1997 Boyle Software Inc ID: 388860
Download Presentation The PPT/PDF document "Responsive Web Design" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Responsive Web Design
NYU Webmaster
Meetup
, October 3
rd
, 2014Slide2
Who am I
Uwe Kristen
I grew up in
ze Black ForestFront-end developer since 1997 Boyle Software, Inc. (http://boylesoftware.com)Clients: NYU, Adobe, American Media Inc., Morgan Stanley, ScholasticTwitter: @FloatNone
© 2014 Boyle Software, Inc.Slide3
Why on earth rwd?
© 2014 Boyle Software, Inc.Slide4
1996 – 575px
© 2014 Boyle Software, Inc.Slide5
1999 – 600px
© 2014 Boyle Software, Inc.Slide6
2001 – 800px
© 2014 Boyle Software, Inc.Slide7
2014 – 1024px
© 2014 Boyle Software, Inc.Slide8
Mobile internet
2007: Apple presents the first iPhone.
According
to CNN, “Americans used smartphone and tablet apps more than PCs to access the Internet (in January 2014) — the first time that has ever happened.” Source: Business2Community© 2014 Boyle Software, Inc.Slide9
Size matters
© 2014 Boyle Software, Inc.Slide10
Fluid layout & media queries
Fluid
or
liquid layouts – relative units instead of pixels.Media queries – control over percentage-based layouts.CSS2:@media print
{body
{
font-family: serif;}
}
CSS3:
@media and (min-width: 800px)
{
.column {float: left;}
}
© 2014 Boyle Software, Inc.Slide11
2010: Responsive W. Design is born
© 2014 Boyle Software, Inc.Slide12
design & frameworks
© 2014 Boyle Software, Inc.Slide13
Photoshop
Question:
Graceful Degradation vs. Progressive
Enhancement?“Photoshop is the most effective way to show your clients what their website will never look like.”Stephen Hay© 2014 Boyle Software, Inc.Slide14
Mobile first
PROs:
M
ost people will view your site on a handheld device (designing for desktop = designing for a minority).Mobile first helps to identify what users really need.Content first.CONs:It is the opposite of what we have been doing for the past 20 years.© 2014 Boyle Software, Inc.Slide15
Design & Development
Design and development can no longer be separated.
Designers must understand the impact of their design choices.
Developers need to learn about current technology.Wireframes are the manual of a website.© 2014 Boyle Software, Inc.Slide16
Frameworks
Bootstrap, Foundation, Skeleton
PROs:
Work on mobile, tablet and desktop. Even in IE.Common terminology within a framework.CONs:All you can eat!Created based on someone else’s needs.HTML often more complex than it needs to be:<div class=“col-sm-5
col-sm-offset-2 col
-md-6
col
-md-offset-
0”>
© 2014 Boyle Software, Inc.Slide17
Susy: Anti-framework framework
“CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen
?”
http://susy.oddbird.net/© 2014 Boyle Software, Inc.Slide18
Organize your CSS well
OOCSS: Object-oriented CSS
CSS Pre-processors: Sass, LESS
Live stylesheet© 2014 Boyle Software, Inc.Slide19
challenges
© 2014 Boyle Software, Inc.Slide20
Accessibility
Responsible
web design
.Alt text for all images.“Skip nav” link.WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) roles provide information about new structural HTML tags.
<header role="banner"
>
<
nav
role="navigation"
>
<
/
nav
>
<
/header>
<footer
role="
contentinfo
"
>
<
/footer>
© 2014 Boyle Software, Inc.Slide21
Layout
Balancing line length: 45-75 characters.
Vertical s
tacking order.Flexbox: most recent versions of all browsers.© 2014 Boyle Software, Inc.Slide22
Images
Average page size of Top 1000
websites is
1.7 MB, of which 1 MB are images. Big download for a small screen!
Source:
http://httparchive.org
Explicit
<picture
>
or let browser decide with
img
srcset
?
© 2014 Boyle Software, Inc.Slide23
Other RWD challenges
Explaining the concept of RWD to a client.
Tables / Responsive HTML emails.
Converting an existing site to be responsive.Testing: how can we test in all the different devices.For most HTML5 or CSS3 features that are not fully supported by all browsers, there is most likely a polyfill.Polyfill: downloadable code which provides facilities that are not built into a web browser. © 2014 Boyle Software, Inc.Slide24
Resources
RWD
Ethan
Marcotte: Responsive Web DesignRWD weekly newsletter: responsivedesign.isClarissa Peterson: Learning Responsive Web DesignCSSAn Introduction To Object Oriented CSS (OOCSS)
Sass vs. LESSFlexbox (
http://dev.w3.org/csswg/css-flexbox/
)
Solved by Flexbox
A complete guide to Flexbox
HTML
Don’t use <picture> (most of the time
)
http://responsiveimages.org
Responsive Images: If you’re just changing resolutions, use srcset
Accessibility
Section 508 checklist:
http://webaim.org/standards/508/
checklist
Tools
What works in which browser:
http://caniuse.com
M
edia queries test:
MQTest
Responsive Email template:
Antwort
Line-length
bookmarklet
45-75-characters
© 2014 Boyle Software, Inc.