responsive design - files.meetup.com€¦ · products/responsive-web-design. i want to see some...
TRANSCRIPT
RESPONSIVE DESIGNBasic concepts and implementation
WHO ARE YOU?Mario Noble
WHAT IS RESPONSIVE DESIGN?
• Responsive design is a technique that uses fluid grids, media queries and flexible images.
• A strategy/tool.
•Not a cure for all ills.
• http://www.abookapart.com/products/responsive-web-design
I WANT TO SEE SOME EXAMPLES.
WHY SHOULD I DO IT?
FOR THE MONEY, OF COURSE!
CHANGING EXPECTATIONS.
FRUSTRATION
VARIOUS CONTEXTS
NOT JUST MOBILE
THE GOLDEN MEAN
PROGRESSIVE ENHANCEMENT
BACK TO THE FUTURE
PURE FLUID VS. RESPONSIVE
•Fluid stretches but doesn’t deliberately arrange.
•Adaptive is break point based
•Responsive is range based.
•There is overlap. Semantics overlap.
•Both are an extension of Universal Design.
HOW DO YOU DO IT?
DESIGN
FOCUS, FOCUS, FOCUS
MODULE APPROACH
CODINGaka the Boring Part, depending on who you are...
TARGET ÷ CONTEXT = RESULT
NOOOOO!!!!!! MATHHHHHH!!!!!!
900 ÷ 960 = 0.9375becomes 93.75%
#MAIN { MARGIN: 0 AUTO; WIDTH: 93.75%; /* 900 / 960 */}
650 ÷ 900 = 0.7222222272.222222%
215 ÷ 900 = 0.238888or 23.8888%
#main-content { float: left; width: 72.222222%; /* 650 / 900 */}
#sidebar { float: right; width: 23.8888%; /* 215 / 900 */}
<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"
href="shetland.css" />
@media screen and (max-device-width: 480px) { .column { float: none; }}
media only screen and (min-width:321px) and (max-width:481px) {.two-sidebars .content-inner,.one-sidebar .content-inner,.region-sidebar-first,.region-sidebar-second {margin-left: 0; margin-right: 0;}.region-sidebar-first, .region-sidebar-second, .region-sidebar-first .block, .region-sidebar-second .block {width: 100%;}.region-sidebar-second {width: 100%;}.content-inner,.region-sidebar-first,.region-sidebar-second {float: none;}.region-sidebar-first, .region-sidebar-second {clear : both;}.container {width: 100%;}}/* Tablet portrait one-col-vert */@media only screen and (min-width:481px) and (max-width:800px) {.two-sidebars .content-inner,.one-sidebar .content-inner,.region-sidebar-first,.region-sidebar-second {margin-left: 0; margin-right: 0;}.region-sidebar-first {width: 100%;}.region-sidebar-second {width: 0%;}.one-sidebar .sidebar {width: 100%;}.region-sidebar-first, .region-sidebar-second {overflow: hidden; margin-top: 20px;}.region-sidebar-first .block, .region-sidebar-second .block {width: 100%;}.container {width: 90%;}}
Scalable Imagesusing
max-width: 100%;and various other solutions
like filament
Beware IE and explicit dimensions
Embrace Modernizr/Respond.js
HOW CAN YOU USE IT? WHAT ARE THE PROS AND CONS?
PROS
MONEY + TIME
MORE PEOPLE + PLACES
•More adaptable.
•Design once, deploy everywhere
•Maintains aspect ratios
•Saves time in long run
•More future proof
•Less time and money over the long haul
CONS
TIME + MONEY
ADAPTING EXISTING SITES
• Can be difficult to port over to existing complex sites
• Need to breakout of the one-off mindset
• Not necessarily supported cross browser
• Serving up media can be challenging.
• Potential bandwidth issues.
• May be more time up front (particularly at first)
• Addressing non-responsive plug-ins
• Navigation
• Tables and forms
• Sidebars
• Selling stakeholders on the process
• Advertising
RUBBER PEG
ALTERNATIVES
•Fat Finger Design
•User Agent Sniffing
• Javascript sniffing
•Design for lowest common denominator
•Fluid design
TO RESPOND OR NOT?
HOW MUCH TIME, MONEY AND ENERGY DOES IT TAKE
TO MAKE A SITE RESPONSIVE?
• It all depends on your time, money and energy.
• Is your orientation primarily desktop or mobile?
•Most of all your clients/organization and customers/visitors.
• It all depends on the complexity of your site.
• Advertisers
• Third party plug ins
IS IT WORTH IT?
MARIO’S TRICKS AND OPINIONS
TAKE IT WITH A GRAIN OF...
TRICKS• Start with mobile first if
doing from scratch
• Small usable Fat Finger changes for pre existing complex sites
• Fix worst offending problems anyway that you can in different contexts.
•Display tables inline or reformat as spans or divs
OPINIONS
•Don’t leave things out.
• Give the visitor more actual control.
• Allow to choose the context or task
• Load media on demand (images, slideshows, galleries, videos)
TOWARDS A NEW MINDSET
• Pay now or pay later.
• Responsive design may not work for you. But you will need to find something that does.
• Responsive design is less a technique than a mindset.
• Instead of pixel perfect, priority perfect.
• Eyes on the prize - Usability and Engagement.