Presentation given at the North Carolina Tech4Good Conference in Chapel Hill, NC – June 7, 2013
While responsive design may sound like a buzzword, it has real implications for your nonprofit’s website.
This session will cover:
• responsive design principles
• provide several illustrations of responsive design done well (from small to large • nonprofit sites and a few commercial examples)
• explain the process of planning for, and implementing responsive design
• discuss ways to retrofit an existing site to responsive
• the respective level of effort for responsive projects
Additionally, we will share several tools that we have found helpful in the planning, design and implementation phases.
Confluence focuses on website design and development using open source content management systems for nonprofits and organizations. We have implemented several responsive sites for our clients over the past 18 months and have invested heavily in training our staff in this important discipline.
7. 1. What is responsive
design?
2. Responsive design
examples
3. Process/workflow
4. Retrofitting site to
RD
5. Level of effort
8.
9. 1. Heard of
responsive design?
2. Considering
responsive design?
3. Actively planning
responsive?
4. Already have
responsive in
place?
SHOW OF HANDS
10. RESPONSIVE 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 (from
desktop computers monitors to mobile phones).”
– Wikipedia
“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 (from
desktop computers monitors to mobile phones).”
Ethan Marcotte
Coined term responsive
A List Apart, 2010
11. 2013: THE YEAR OF RESPONSIVE DESIGN
“For those of us who create websites and services, all of this leads to a singular
conclusion: A million screens have bloomed, and we need to build for all of
them.”
– Pete Cashmore
Pete Cashmore
Founder/CEO - Mashable
“For those of us who create websites and services, all of this leads to a singular
conclusion: A million screens have bloomed, and we need to build for all of
them.”
– Pete Cashmore
12. GETTING READY FOR 2014
http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx
13. Mobile site
1. Different
versions of one
site
2. Multiple
codebase
Adaptive design
1. Sniffs for
specific end
device
2. Loads pre-
defined layout
based on result
WHAT RESPONSIVE DESIGN IS NOT
14.
15. • CSS3:
content, layout
tailored to
screen size
• Specify
width, height, or
ientation
(landscape/port
rait), resolution
1. MEDIA QUERIES DEFINE BREAKPOINTS
16. <!-- CSS media query on a link element -->
<link rel="stylesheet" media=”(max-width: 800px)"
href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
MEDIA QUERY CODE
Consists of
1. Media type
• Screen
• All
2. Expression
• Orientation
• Min-width
• Max-width
• Device-aspect ratio
• Device-height
• Device-width
17. <link rel="stylesheet" media="screen and (color)"
href="example.css" />
COMBINING EXPRESSIONS
And/Or/Not
1. And = AND
2. Comma = OR
3. Not = NOT
@media screen and (color), projection and (color) { … }
<link rel="stylesheet" media="not screen and (color)"
href="example.css" />
18. COMMON SIZE BREAKPOINTS/BREAKRANGES
• Breakpoints – base them
on content/layout
• Not based on device!
• # of layouts can range
from 2-5 (ish)
• 320 – 480 pixels Phone
• 768 – 1025 pixels Tablet
• > 1024 Desktop
@media only screen and (min-device-width : 320px) and
(max-device-width : 480px) { … }
@media only screen and (min-device-width :768px) and
(max-device-width : 1024px) { … }
@media only screen and (min-device-width :768px) and
(max-device-width : 1024px) and (orientation:
portrait) { … }
@media only screen and (min-device-width :768px) and
(max-device-width : 1024px) and (orientation:
landscape) { … }
19. • Ability to scale
= dependent on
fluid design
• No more fixed
width; pixels
• Think in
percentages
and proportion
2. FLUID GRID
Photo credit: Robert Couse-Baker, Creative Commons
21. 3. IMAGES & VIDEOS RESIZE
Issues:
1. Have to serve
largest version
of image to
cover all scaled
amounts OR
2. Use media
queries to serve
different images
per screensize
To start:
1. No width/height
attributes on
<img> tag
2. Add img {max-
width: 100%;} to
CSS
22. 3. IMAGES & VIDEOS RESIZE - WORKAROUNDS
Icon fonts
• Scalable font
• Often open
source
Adaptive Images
• Add .htaccess, 1
php
file, javascript
call
• Properly sized
images created
on the fly
• www.adaptive-
images.com
23. 4. REMOVE NON ESSENTIAL CONTENT
Photo credit: jonasginter, Creative Commons
• Mobile-first mantra
• Focus/concentrate
“must” have content
for small sizes
• Ask your audience!
• Review analytics to
validate
• RD isn’t about
mobile!
• It’s about device
size.
• What experience
is appropriate for
small, medium, lar
ge?
• Don’t make
assumptions that
can’t be validated
24. 5. RETHINK NAVIGATION FOR SMALL SCREENS
• Ask yourself:
• What width is
too narrow to
tap easily?
• Clue to
breakpoint size
25. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– SIMPLE PADDING
Source: http://responsivenavigation.net
26. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– SELECT MENU
Source: http://responsivenavigation.net
27. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– SIMPLE TOGGLE MENU
Source: http://responsivenavigation.net
28. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– MULTI-TOGGLE MENU
Source: http://responsivenavigation.net
29. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– OFF CANVAS SLIDE MENU
Source: http://responsivenavigation.net
60. PROS
• Separate codebase
• No legacy issues from
existing code
• Feels “app-like”
• Can be good for
microsite, event, confe
rence, etc.
• Works better for sites
that can serve limited
content to phones
CONS
• Not future friendly
• Support costs for
updating two sites
• Content parity (if
necessary) is work
RETROFITTING: DEDICATED MOBILE SITE
Cost: Low to moderate
61. PROS
• One codebase
• Future friendly
• Tools available
(RWD
Retrofit, MobifyJS)
• Can “buy” you
another 12-16
months before
redesign
CONS
• Relies on existing
clean, semantic
markup
• Hard to use
framework tools
(Bootstrap, Zurb, etc
.) and existing
markup
• Extensive
testing/QA cycle
necessary
RETROFITTING: RESPONSIVE RESKINNING
Cost: Moderate to high
62. PROS
• Holistic approach
• Content first thought
• Supports widest
variety of end users
• One codebase
• Future friendly
• Tools available for
IE 7/8 compliance
CONS
• Extensive
testing/QA cycle
necessary
• Testing on real
devices - $
RETROFITTING: DECIDING ON RWD
Cost: High at present
63.
64. Elements that add time
• Learning curve (will lessen into
2014)
• Content strategy for multiple views
• UX design (wireframing)
• Media queries/CSS
• Testing
• Project management
Level of Effort
• ~80% > effort for RD through
Q2 2014
• ~ 50% > following 12-18
months
• May even out to ~30%
greater effort than fixed site
Other Choices
• Mobile site: Potentially less at
start, future upkeep of two
sites
• Adaptive-device (device
specific): New devices out
every month; phablets – gets
mobile or desktop?
LEVEL OF EFFORT
----- Meeting Notes (6/6/13 21:37) -----So, let's see what Wikipedia tells us responsive design is…what's the key point in this sentence? "Optimal viewing experience--easy reading and navigation with a minimum of resizing, panning and scrolling-- ascorss a wide range of devices.
http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx----- Meeting Notes (6/6/13 21:37) -----That was 2013, let's take a look at what's going to happen in 2014. Mobile internet will almost certainly take over desktop internet usage. Mobile browsing has already overtake desktop amongst certain demographics – the young, those who cannot afford home computers or the cost of internet access.
----- Meeting Notes (6/6/13 22:46) -----Where adaptive design fails is when new devices come to market or certain device aren't recognized.
----- Meeting Notes (6/6/13 22:46) -----Ok, let's discuss responsive design principles. I've broken this down into five main ones.
----- Meeting Notes (6/6/13 22:46) -----Media queries are the root of responsive design. And what's a breakpoint? A breakpoint is the screen width at which layout adjusts or reflows.The UX London conference site.4 right we have laptop/desktop size. Moving in, tablet in landscape, continuing tablet in portrait and lastly, phone.
Default is screen
And, Or, Not in order.
Area ripe for improvement and we’ll likely see big changes in workflow in next 12-18 months
\
\
Facbook on phones is doing this now.
www.wildlife.org
www.water.org
www.mercycorps.org
www.thehorizonfoundation.org
www.bostonglobe.com
www.nytimes.com
www.wildlife.org
Nypl.org = Public library site has fluid grid, Pinterest style. Scale down from laptop to tablet, lose the dropdowns on tablet
www.barackobama.org
http://www.stpaulsschool.org.uk - slick main nav action on resizing
http://www.law.gmu.eduNotice how the carousel text scales so small that it’s unreadable
www.smashingmagazine.com – good resource. Big use of search bar on tablet/phone.
http://stuffandnonsense.co.uk - Fun header
So, let’s discuss the process for creative a RD
Discovery: typical first step in any web project. You’ll recognize a lot of this process as similar to what you would expect in any web project. I’ll make careful note, however, of elements that are specific or otherwise different for RD.
Marketing review – what are your users asking for? What are your competitors providing in terms of a responsive experience?Analytics review – find out what browser configurations your users have. What screen resolution, what devices, what type of connection speed. Try to identify pages that are more, or less, commonly used by devices with smaller screen sizes.
Content review and inventory – not specific to RD. Removing ROT – not specific to RD. Determine strategy for device size content. Do you provide less content? Same amount content? Different content to different sizesDevelopment of site map – start to note sections/pages that are specific to certain screen sizes.IA can take many forms.
Onto design – my favorite part!
Devices will change; content needs to drive the choices for layout breakpoints. Don’t do more major breakpoints than you need – don’t go crazy with them. Minor breakpoints can also be discussed.
The wireframes section is critical for responsive design! Tools are listed in the resources section at the end.
Intentionally devoid of color, size/weight show importance of information.Developing structure for navigation (dropdowns on large, no drops on tablet portrait, select list on phone)
Structure, fabric analogy. Color choices possibly different on smaller screens, typography sizes must adjust naturally.
Tools are listed in the resources section at the end.
This code is from the iBS site above. Notice how we set the breakpoints and their respective widths/padding.Flash, not responsive in addition to all the other reasons not to use it.
Jumping to the first con, a responsive reskinning requires that the existing markup is clean, semantic, uses CSS 2 or 3 for positioning…RWD Retrofit is free files that set and change the viewport on the fly to ensure the right CSS is read.