Transcript to view/download Uwe`s Powerpoint presentation

RESPONSIVE WEB
DESIGN
NYU Webmaster Meetup, October 3rd, 2014
© 2014 Boyle Software, Inc.
Who am I
• Uwe Kristen
• I grew up in ze Black Forest
• Front-end developer since 1997
Boyle Software, Inc. (http://boylesoftware.com)
• Clients: NYU, Adobe, American Media Inc., Morgan
Stanley, Scholastic
• Twitter: @FloatNone
© 2014 Boyle Software, Inc.
WHY ON EARTH RWD?
© 2014 Boyle Software, Inc.
1996 – 575px
© 2014 Boyle Software, Inc.
1999 – 600px
© 2014 Boyle Software, Inc.
2001 – 800px
© 2014 Boyle Software, Inc.
2014 – 1024px
© 2014 Boyle Software, Inc.
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.
Size matters
© 2014 Boyle Software, Inc.
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.
2010: Responsive W. Design is born
© 2014 Boyle Software, Inc.
DESIGN & FRAMEWORKS
© 2014 Boyle Software, Inc.
Photoshop
“Photoshop is the most effective
way to show your clients what
their website will never look like.”
Stephen Hay
Question: Graceful Degradation vs. Progressive Enhancement?
© 2014 Boyle Software, Inc.
Mobile first
• PROs:
• Most 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.
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.
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.
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.
Organize your CSS well
• OOCSS: Object-oriented CSS
• CSS Pre-processors: Sass, LESS
• Live stylesheet
© 2014 Boyle Software, Inc.
CHALLENGES
© 2014 Boyle Software, Inc.
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.
Layout
• Balancing line length: 45-75 characters.
• Vertical stacking order.
• Flexbox: most recent versions of all browsers.
© 2014 Boyle Software, Inc.
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.
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.
Resources
• RWD
•
•
•
Ethan Marcotte: Responsive Web Design
RWD weekly newsletter: responsivedesign.is
Clarissa Peterson: Learning Responsive Web Design
• CSS
•
•
•
•
•
An Introduction To Object Oriented CSS (OOCSS)
Sass vs. LESS
Flexbox (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
Media queries test: MQTest
Responsive Email template: Antwort
Line-length bookmarklet 45-75-characters