Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
Flexible Content: An Introduction to Responsive Design
Nicky Bleiel Watson Information Developer, IBM NEO Ohio Chapter Meeting 16 April, 2015
A Little About Me • 20+ years of experience as a technical
communicator.
• Watson Information Developer, IBM
• Immediate Past President, Society for Technical Communication.
• Written and designed documentation for software products in a variety of industries.
• Speaker at STC, WritersUA, tcworld, LavaCon, and CIDM. Published in STC Intercom, tcworld magazine, TechCom Manager, WritersUA website, and the Content Wrangler.
• Learn more about me at nickybleiel.com
What We’ll Discuss • The Power of Responsive Design
• Why the Time is Right for Responsive
• A Responsive Primer
• How Technical Communicators Can Optimize for Responsive
We will look at several examples and resources are included.
Definition
Responsive design is a technique for designing web pages that automatically adjust to the device accessing them.
• No content is lost; the content and page layout adjust by stacking or collapsing.
• There is no horizontal scroll bar. Interactions – such as touch – are also components of responsive design.
THE POWER OF BEING RESPONSIVE
One for All … and All for One With Responsive Design, Technical Communicators can create and deliver one output that will work on thousands of devices – new ones, old ones, even ones that don’t exist yet.
Wikipedia.org open on http://ami.responsivedesign.is/
Progressive Enhancement
A web design philosophy aimed at crafting experiences that serve your users by giving them access to content without technological restrictions.
It is all about context.
From Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron
Gustafson http://easy-readers.net/books/adaptive-web-design/
Embraces Kairos
Correct or opportune moment to say or do the appropriate thing. The “supreme moment.”
H/T Karen Schriver
Chapter 12: “What We Know About Expertise in Professional Communication” by Karen Schriver from Past, Present, and Future Contributions of Cognitive Writing Research to Cognitive Psychology edited by Virginia Wise Berninger
RESPONSIVE EXAMPLES
Responsive Examples
http://www.microsoft.com/
• How does it work? http://moz.com/blog/seo-of-responsive-web-design
• http://docs.couchdb.org/en/latest/intro/why.html (TOC moves to the bottom)
• http://getbootstrap.com/2.3.2/getting-started.html#download-bootstrap (top menu > collapsing menu)
• http://www.gwtproject.org/doc/latest/DevGuide.html# (???)
• http://www.wikipedia.org/ (search moves to top)
• http://www.westminster-abbey.org/home (menu button) (founded 960!)
• http://forum.camendesign.com/ (uses search as main navigation)
See http://mediaqueri.es/ for a compilation of responsive sites.
WHY THE TIME IS RIGHT FOR RESPONSIVE … A FEW STATISTICS
Tablet shipments > PC Shipments in 2015
Gartner predicts that in 2015:
• Traditional PCs and ultramobile devices will combine to ship 317 million units
• Tablet shipments will top 320 million.
Currently there are 285 million tablets worldwide
http://www.forbes.com/sites/louiscolumbus/2014/07/18/gartner-forecasts-tablet-shipments-will-overtake-pcs-in-2015/
http://www.news-sap.com/what-are-ultra-mobiles/
http://tabtimes.com/resources/the-state-of-the-tablet-market
http://www.nielsen.com/us/en/insights/news/2013/how-the-mobile-
consumer-connects-around-the-globe.html
Smartphone Sales
Gartner estimates
smartphones will make
up 66% of global mobile
phone sales this year,
and jump to 88% by
2018.
http://www.forbes.com/sites/louis
columbus/2014/07/18/gartner-
forecasts-tablet-shipments-will-
overtake-pcs-in-2015/
http://mashable.com/2013/11/22/mobile-internet-subscriptions/
60% of Web Traffic is from Mobile Devices
http://smallbiztrends.com/2014/07/online-traffic-report-mobile.html
Being Responsive = Better SEO
http://www.smartinsights.com/search-engine-optimisation-seo/mobile-seo/googles-changing-recommendations-on-seo-
for-mobile/
http://googlewebmastercentral.blogspot.co.uk/2012/06/recommendations-for-building-smartphone.html
http://www.bing.com/blogs/site_blogs/b/webmaster/archive/2012/03/07/building-websites-optimized-for-all-platforms-
desktop-mobile-etc.aspx
Responsive web design is Google’s recommended configuration.
Bing also prefers responsive content, referring to it as a “one URL per content item” strategy.
• Having a separate mobile (mdot) site not optimal.
Content Parity – Brad Frost
Mobile users want everything that desktop owners have, they want one web.
• Myth that mobile users don’t want to do everything desktop users do.
• OK to optimize the presentation of content as long as the content remains accessible in some way, shape or form.
In the W3C Mobile Best Practices Specification:
Thematic Consistency of Resource Identified by a URI
http://bradfrostweb.com/blog/mobile/content-parity/
htt
p://s
erv
ice
s.g
oo
gle
.com
/fh/file
s/m
isc/m
ultis
cre
en
wo
rld
_fina
l.p
df
Two more reasons …
• Increase in user task completion
• Savings on translation costs, because there is only one site, not a “traditional” site and an “mdot” site.
http://www.paulolyslager.com/how-responsive-design-improves-user-
task-completion/
A (VERY) SHORT PRIMER ON RESPONSIVE DESIGN
Responsive Primer
• Technique for designing web pages that automatically adjust to the device accessing them.
• HTML doesn’t change, the presentation adjusts based on CSS rules specified for the device/browser
• Elements size, shape, and place themselves based on the width of the browser screen.
Responsive Primer
• Interactions are part of responsive design
−Small screens can incorporate touch interaction, while large screen can interact with mouse/keyboard, as well as touch.
• Core technologies: media queries, fluid layouts, flexible images.
Media Queries
• The HTML media attribute is used to specify which CSS should be called based on the width of the screen.
• One responsive site will use multiple style sheets to transform the presentation of the content.
http://stackoverflow.com/questions/16704243/best-widths-for-apply-media-queries-for-a-responsive-website-
satisfying-portrait
Example
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
<link rel="stylesheet" media= "(min-width:320px)" href="css/mobile.css" />
Fluid Grids • Use percentages, not pixels.
• Grid is divided into a specific number of columns.
• When the device or screen size is changed, elements will adjust their widths and heights proportionally.
http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/
htt
p:/
/de
mosth
enes.info
/blo
g/5
86/C
SS
-Flu
id-I
mage
-Te
chniq
ues-f
or-
Responsiv
e-S
ite
-Desig
n
Flexible Images
Use relative units, rather than absolute pixels.
OPTIMIZING FOR RESPONSIVE DESIGN
Simple > Complex
On Writing Well The baseline experience is always in the form of text. No specific technology shapes this layer, instead its success or failure relies entirely on the skills of the copywriter. Clear, well-written copy has universal device support and does wonders to improve the accessibility of the content to users.
From Adaptive Web Design: Crafting Rich Experiences
with Progressive Enhancement by Aaron Gustafson
Optimizing for Responsive
Need to think “Mobile First” – what works well on mobile (smaller) screens will work well on tablets, the desktop, and more.
“Mobile First” Optimizations
Large image files increase load time; 74% of mobile users will abandon a site that takes more than 5 seconds to load.
Keep image files sizes small, and consider reducing the number of images.
“Mobile First” Optimizations
Complicated diagrams/technical drawings will be hard to read on smaller devices.
Insert “thumbnail” images that must be clicked to display a larger version.
“Mobile First” Optimizations
Large blocks of text are difficult to navigate on smaller devices.
Write concisely. (Added benefit: Reduces translation costs.)
“Mobile First” Optimizations
Large, multicolumn tables are hard to navigate and read.
Reduce the size and number of tables.
Implement options that hide columns on smaller devices.
“Mobile First” Optimizations
Mobile users need a way to access additional information if they need it.
Use progressive information disclosure. Show them a little and let them choose … collapsible text, inline text, and other dynamic features are options.
“Mobile First” Optimizations
Bulleted and numbered lists with multiple levels (“nested” lists) can be hard to navigate on smaller devices.
Limit the levels of bulleted/numbered lists to fewer than three.
“Mobile First” Optimizations
Links that are clustered together in paragraphs are harder to select.
Avoid embedding multiple links in the same paragraph. Consider putting all links at the bottom and space appropriately.
“Mobile First” Optimizations
Users can accidentally navigate away from your content.
Improve content navigation so users don’t use the device’s ‘back’ button.
“Mobile First” Optimizations
Users can be confused by terms such as “click” or “tap” if they don’t apply on their device.
Do not use device-specific terminology.
References/Further Reading
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson http://easy-readers.net/books/adaptive-web-design/ Responsive Web Design by Ethan Marcotte http://www.abookapart.com/products/responsive-web-design Implementing Responsive Design by Tim Kadlec http://www.implementingresponsivedesign.com/ Compilation of Responsive Sites: http://mediaqueri.es/ Creating a Mobile-First Responsive Web Design by Brad Frost http://www.html5rocks.com/en/mobile/responsivedesign/ Responsive Patterns (a collection) http://codepen.io/bradfrost/full/xkcBn Beyond Squishy: The Principles of Adaptive Design http://bradfrostweb.com/blog/post/beyond-squishy-the-principles-of-adaptive-design/ Twenty Best Responsive Web Design Examples of 2012 (Get with the Future blog): http://socialdriver.com/2012/07/20-best-responsive-websites/ Responsive Design Newsletter: http://responsivedesignweekly.com/
References/Further Reading Mobile Responsive Design 101: http://www.copyblogger.com/mobile-responsive-design-101/
Common Responsive Web Design Pitfalls: http://www.sitepoint.com/4-common-responsive-web-design-pitfalls/
Unified Device Design by Luke Wroblewski http://static.lukew.com/unified_device_design.png
Google developer guidelines for building mobile optimized websites https://developers.google.com/webmasters/smartphone-sites/
Building Websites Optimized for all Platforms (Bing Webmaster Blog) http://www.bing.com/blogs/site_blogs/b/webmaster/archive/2012/03/07/building-websites-optimized-for-all-platforms-desktop-mobile-etc.aspx
“A List Apart” Responsive Web Design by Ethan Marcotte http://alistapart.com/article/responsive-web-design
Stats on mobile device web traffic http://www.marketingprofs.com/charts/2013/11010/web-traffic-from-mobile-devices-up-78-year-over-year and http://mashable.com/2013/08/20/mobile-web-traffic/
References/Further Reading
How Does Responsive Design Ensure Audience Response on Mobile Devices? Business to Community Blog http://www.business2community.com/marketing/responsive-design-ensure-audience-response-mobile-devices-0758181#M5izPOSuPQzBBiK2.99
The Limits of Responsive Design http://www.paulolyslager.com/limits-of-responsive-design/
Why 2013 is the Year of Responsive Web Design http://mashable.com/2012/12/11/responsive-web-design/
How Responsive Design Improves User Task Completion http://www.paulolyslager.com/how-responsive-design-improves-user-task-completion/
The Psychologist’s View of UX Design http://uxmag.com/articles/the-psychologists-view-of-ux-design
Am I Responsive? http://ami.responsivedesign.is/
References/Further Reading
Smartphone Users Worldwide Will Total 1.75 Billion in 2014 (eMarketer.com) http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014/1010536
The State of the Tablet Market (tabtimes.com) http://tabtimes.com/resources/the-state-of-the-tablet-market
Mobile Internet Subscriptions to Triple by 2019 (mashable.com) http://mashable.com/2013/11/22/mobile-internet-subscriptions/
Gartner: Tablet shipments to top PCs by 2015 (usatoday.com) http://www.usatoday.com/story/tech/personal/2014/07/07/gartner-tablets-pcs/12285971/
70 Examples Of Modern Responsive Web Design http://mag.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/