Responsive Design: What is it? How do we do it? How much will it cost?
-
Upload
karin-tracy -
Category
Technology
-
view
114 -
download
7
description
Transcript of Responsive Design: What is it? How do we do it? How much will it cost?
![Page 1: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/1.jpg)
RESPONSIV
E DESIG
N
NC
TE
CH
4G
OO
D |
JU
NE
7,
20
13
![Page 2: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/2.jpg)
QUICK IN
TRODUCTI
ON
WH
O A
M I
?
![Page 3: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/3.jpg)
Karin Tracy• VP, Creative
Services• Lead strategy,
UX, design• Dog lover
GOOD MORNING!
![Page 4: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/4.jpg)
• Technology & creative services company
• Focus on nonprofits• Experts in open
source technologies• Offices in DC,
Baltimore, LA, Portland OR
• Clients nationwide• @ConfluenceCorp
4 practices
1. Technology consulting
2. Creative solutions
3. Open source development
4. Salesforce
CONFLUENCE
![Page 5: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/5.jpg)
SMALL SAMPLE OF OUR CLIENTS
![Page 6: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/6.jpg)
SMALL SAMPLE OF OUR CLIENTS
![Page 7: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/7.jpg)
WHAT
SHALL
WE
TALK
ABOUT?1. What is responsive
design?2. Responsive design
examples3. Process/workflow4. Retrofitting site to
RD5. Level of effort
![Page 8: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/8.jpg)
WHAT
IS R
ESPONSIV
E
DESIGN?
SE
CT
I ON
1
![Page 9: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/9.jpg)
1. Heard of responsive design?
2. Considering responsive design?
3. Actively planning responsive?
4. Already have responsive in place?
SHOW OF HANDS
![Page 10: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/10.jpg)
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 MarcotteCoined term responsiveA List Apart, 2010
![Page 11: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/11.jpg)
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 CashmoreFounder/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
![Page 12: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/12.jpg)
GETTING READY FOR 2014
http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx
![Page 13: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/13.jpg)
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
![Page 14: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/14.jpg)
RESPONSIV
E DESIG
N
PRIN
CIPLE
S
SE
CT
I ON
2
![Page 15: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/15.jpg)
• CSS3: content, layout tailored to screen size
• Specify width, height, orientation (landscape/portrait), resolution
1. MEDIA QUERIES DEFINE BREAKPOINTS
![Page 16: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/16.jpg)
<!-- 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
![Page 17: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/17.jpg)
<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" />
![Page 18: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/18.jpg)
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) { … }
![Page 19: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/19.jpg)
• 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
![Page 20: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/20.jpg)
2. FLUID GRID
![Page 21: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/21.jpg)
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
![Page 22: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/22.jpg)
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
![Page 23: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/23.jpg)
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, large?
• Don’t make assumptions that can’t be validated
![Page 24: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/24.jpg)
5. RETHINK NAVIGATION FOR SMALL SCREENS
• Ask yourself:• What width is
too narrow to tap easily?
• Clue to breakpoint size
![Page 25: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/25.jpg)
5. RETHINK NAVIGATION FOR SMALL SCREENS – SIMPLE PADDING
Source: http://responsivenavigation.net
![Page 26: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/26.jpg)
5. RETHINK NAVIGATION FOR SMALL SCREENS – SELECT MENU
Source: http://responsivenavigation.net
![Page 27: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/27.jpg)
5. RETHINK NAVIGATION FOR SMALL SCREENS – SIMPLE TOGGLE MENU
Source: http://responsivenavigation.net
![Page 28: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/28.jpg)
5. RETHINK NAVIGATION FOR SMALL SCREENS – MULTI-TOGGLE MENU
Source: http://responsivenavigation.net
![Page 29: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/29.jpg)
5. RETHINK NAVIGATION FOR SMALL SCREENS – OFF CANVAS SLIDE MENU
Source: http://responsivenavigation.net
![Page 30: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/30.jpg)
EXAMPLES O
F
RESPONSIV
E DESIG
N
SE
CT
I ON
3
![Page 31: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/31.jpg)
WORLD WILDLIFE FUND
www.wildlife.org
Source: http://mediaqueri.es
![Page 32: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/32.jpg)
WATER.ORG
www.water.org
Source: http://mediaqueri.es
![Page 33: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/33.jpg)
MERCY CORPS
www.mercycorps.org
![Page 34: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/34.jpg)
BOSTON GLOBE
www.bostonglobe.com
Source: http://mediaqueri.es
![Page 36: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/36.jpg)
NY PUBLIC LIBRARY
www.nypl.org
Source: http://mediaqueri.es
![Page 37: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/37.jpg)
ST. PAUL’S SCHOOL
http://www.stpaulsschool.org.uk
Source: http://mediaqueri.es
![Page 38: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/38.jpg)
GEORGE MASON U SCHOOL OF LAW
www.law.gmu.edu
Source: http://mediaqueri.es
![Page 39: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/39.jpg)
SMASHING MAGAZINE
www.smashingmagazine.com
Source: http://mediaqueri.es
![Page 40: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/40.jpg)
STUFF AND NONSENSE
stuffandnonsense.co.uk
Source: http://mediaqueri.es
![Page 41: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/41.jpg)
RESPONSIV
E DESIG
N
PROCESS
SE
CT
I ON
4
![Page 42: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/42.jpg)
DISCOVERY • Research
• Information Architecture
• Content Strategy
![Page 43: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/43.jpg)
• Industry research
• Brand research
• Marketing review
• Analytics review
DISCOVERY: RESEARCH
![Page 44: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/44.jpg)
• Existing site content review
• R.O.T.• Device size-
specific content
• Site map
DISCOVERY: IA/CONTENT STRATEGY
![Page 45: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/45.jpg)
DESIG
N• User Experience
(UX)• Wireframes
(Interaction design)
• Visual design (Interface design)
![Page 46: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/46.jpg)
• Sketches -- site structure, hierarchy
• Breakpoint/range decision
• Content-driven decisions
DESIGN: USER EXPERIENCE (UX)
Photo credit: Kemeny_x, Creative Commons
![Page 47: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/47.jpg)
• Communicate functionality / process
• Gray boxes• Interactive is
best• Isn’t design
DESIGN: WIREFRAMES (INTERACTION DESIGN)
![Page 48: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/48.jpg)
DESIGN: INTERACTION DESIGN
![Page 49: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/49.jpg)
• Design decisions• Color• Typography• Detailed choices• Photoshop vs.
Style Tiles vs. design in the browser
DESIGN: USER INTERFACE DESIGN
![Page 50: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/50.jpg)
DESIGN: USER INTERFACE DESIGN
![Page 51: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/51.jpg)
DEVELO
P • Templates• jQuery• CMS
integration
![Page 52: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/52.jpg)
• HTML5• CSS3• Media queries
for breakpoints
• jQuery – no Flash
DEVELOP: TEMPLATES/JQUERY
![Page 53: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/53.jpg)
• HTML/CSS integrate with any CMS
• Confluence commitment to open source systems (WordPress, Drupal, Joomla!)
DEVELOP: CMS INTEGRATION
![Page 54: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/54.jpg)
TESTI
NG/QA • Test, test and
more test
![Page 55: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/55.jpg)
• Must test on actual devices!
• Beg, borrow, [steal]
• Use online testing, too
• Track bugs for each breakpoint
DEVELOP: TESTING
![Page 56: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/56.jpg)
TRAIN
ING/D
OCUMENTA
TION
• Clear understanding of content per breakpoint
• High enough image resolution
![Page 57: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/57.jpg)
CONTENT
MIGRAT
ION
• No different than fixed design
![Page 58: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/58.jpg)
LAUNCH
You d
id it
!
Photo credit: Express Monorail, Creative Commons
![Page 59: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/59.jpg)
RETROFIT
TING A
N
EXISTI
NG SIT
E
SE
CT
I ON
5
![Page 60: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/60.jpg)
PROS• Separate codebase• No legacy issues from
existing code• Feels “app-like”• Can be good for
microsite, event, conference, 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
![Page 61: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/61.jpg)
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
![Page 62: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/62.jpg)
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
![Page 63: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/63.jpg)
LEVEL O
F EFF
ORT/C
OST
SE
CT
I ON
6
![Page 64: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/64.jpg)
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
![Page 65: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/65.jpg)
Budget Considerations
• Discovery/education
• Understanding/buy-in from management
• Needs to be group decision
Process Considerations
• Waterfall process may not work
• Requires collaboration, iteration, experimentation
• Lots of decisions to make
LEVEL OF EFFORT
![Page 66: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/66.jpg)
RESOURCES
SE
CT
I ON
7
![Page 67: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/67.jpg)
Testing• MattKersley.co
m/responsive• QuirkTools.co
m/screenfly/• Screenqueri.es• BrowserStack.
com
Dealing with IE 7/8 :(
• Doesn’t support media queries / CSS3
• Respond.js (https://github.com/scottjehl/Respond)
• Modernizr.com
RESOURCES
![Page 68: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/68.jpg)
Responsive Wireframes
• Froont• Wirefy• Jetstrap• Balsamiq• ProtoShare
Interface Design• Photoshop /
graphics editors• Style Tiles (
styletil.es)• Adobe Edge
Reflow (html.adobe.com/edge/reflow/)
RESOURCES
![Page 69: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/69.jpg)
Layout/Grids/Frameworks
• Golden Grid System (goldengridsystem.com)
• Simple Grid (SimpleGrid.info)
• Less Framework (LessFramework.com)
Cont.• Bootstrap
(Twitter.github.io/bootstrap/)
• ZURB (Foundation.zurb.com)
• Skeleton (Getskeleton.com)
RESOURCES
![Page 70: Responsive Design: What is it? How do we do it? How much will it cost?](https://reader037.fdocuments.in/reader037/viewer/2022102922/54c734ca4a7959e5208b459c/html5/thumbnails/70.jpg)
Navigation• FlexNav
(github.com/indyplanets/flexnav)
• TinyNav (tinynav.viljamis.com)
• Mean Menu (meanthemes.com)
• ResponsiveNavigation.net
Reading• A List Apart• Mashable• Smashing
Magazine• ResponsiveDe
signWeekly.net
RESOURCES