Responsive Design: What Is It & Why Is It Important?
-
Upload
springboard-marketing -
Category
Design
-
view
308 -
download
1
description
Transcript of Responsive Design: What Is It & Why Is It Important?
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
RESPONSIVE WEB DESIGN FOR A FUTURE-FRIENDLY WEB
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
CHAD MYERSSpringboard Marketing & Web Design - President
EMAIL: [email protected]
MOBILE: 317-431-4306
TWITTER: @ChadJMyersTWITTER: @SuburbanHunter
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
DESIGNDesign is the shaping and formation of a physical space.
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
MY CHILDHOOD DREAMI wanted to be an architect!
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
ARCHITECTURE & WEB DESIGNThere are a lot of similarities
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
ARCHITECTURE & WEB DESIGN+ understanding the end-user+ planning – and lots of it+ ideation & sketches+ floor plans & wireframes designs+ design concepts and revisions+ design and construction phases
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
ARCHITECTURE & WEB DESIGN+ understanding the end-user+ planning – and lots of it+ ideation & sketches+ floor plans & wireframes designs+ design concepts and revisions+ design and construction phases+ creating a physical space that people will interact with
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
RESPONSIVE ARCHITECTUREResponsive Architecture: measurement of actual environmental conditions (via sensors) to enable
buildings to adapt their form, shape, color or character responsively (via actuators).
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
RESPONSIVE ARCHITECTUREResponsive Architecture: measurement of actual environmental conditions (via sensors) to enable buildings to adapt their form, shape, color or character responsively (via actuators).
Smart HomesMotion Activated Lights
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
ADAPT RESPONSIVELY – WHY NOT THE WEB?
If the physical structures around are responding to our actions and the
conditions, why not the web?
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
ADAPT RESPONSIVELY – WHY NOT THE WEB?
If the physical structures around are responding to our actions and the
conditions, why not the web?
It simply wasn't time – until recently!
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
THE SMARTPHONE+ 2007 iPhone+ 2008 Android
We began interacting with the web on a different medium
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
THE SMARTPHONE+ 2007 iPhone+ 2008 Android
We began interacting with the web on a different medium
The 1st big change in how we browse
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
THE SMARTPHONE+ Today mobile devices account for over 15% of web usage in North America+ That’s up from 9% in 2012
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
A TIME TO CHANGEEthan Marcotte: 2009 / 2010+ media queries+ fluid grids+ flexible images
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
A TIME TO CHANGEEthan Marcotte: 2009 / 2010+ media queries+ fluid grids+ flexible images
The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence.
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
A NEW WAY IS BORNMarcotte begins a ground-swell for responsive web design
+Wikipedia defines responsive web design as:Responsive web design (RWD) 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 mobile phones to desktop computer monitors).
+Chad defines responsive web design as:Providing the visitor an experience tailored for the device they're using to view your website.
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
RWD BECOMES EMBRACEDResponsive design was listed as #2 in Top Web Design Trends for 2012 by .Net Magazine
In late 2012, Google recommended responsive design in its Webmaster’s Guide: “Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
WHY IS A CHANGE NEEDEDUser experience
The audience has changed, and we must “respond”+ We consume information differently
+ Technology is continually changing over 220 different screen sizes
+ RWD gives the user the information they’re seeking – on their device
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
EXAMPLES OF RWDMenu control
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
EXAMPLES OF RWDRe-organization of content
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
EXAMPLES OF RWDControl of font size
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
YOUR APPROACH MUST CHANGE
+ Define your goals at each state
+ Prioritize the information to align with what the consumer is seeking
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
CHAD MYERSSpringboard Marketing & Web Design - President
EMAIL: [email protected]
MOBILE: 317-431-4306
TWITTER: @ChadJMyersTWITTER: @SuburbanHunter