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


CHAD MYERSSpringboard Marketing & Web Design - President

EMAIL: [email protected]

MOBILE: 317-431-4306

TWITTER: @ChadJMyersTWITTER: @SuburbanHunter


DESIGNDesign is the shaping and formation of a physical space.


MY CHILDHOOD DREAMI wanted to be an architect!


ARCHITECTURE & WEB DESIGNThere are a lot of similarities


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


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


RESPONSIVE ARCHITECTUREResponsive Architecture: measurement of actual environmental conditions (via sensors) to enable

buildings to adapt their form, shape, color or character responsively (via actuators).


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


ADAPT RESPONSIVELY – WHY NOT THE WEB?

If the physical structures around are responding to our actions and the

conditions, why not the web?


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!


THE SMARTPHONE+ 2007 iPhone+ 2008 Android

We began interacting with the web on a different medium


THE SMARTPHONE+ 2007 iPhone+ 2008 Android

We began interacting with the web on a different medium

The 1st big change in how we browse


THE SMARTPHONE+ Today mobile devices account for over 15% of web usage in North America+ That’s up from 9% in 2012



A TIME TO CHANGEEthan Marcotte: 2009 / 2010+ media queries+ fluid grids+ flexible images


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.


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.


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.”


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


EXAMPLES OF RWDMenu control


EXAMPLES OF RWDRe-organization of content


EXAMPLES OF RWDControl of font size


YOUR APPROACH MUST CHANGE

+ Define your goals at each state

+ Prioritize the information to align with what the consumer is seeking


CHAD MYERSSpringboard Marketing & Web Design - President

EMAIL: [email protected]

MOBILE: 317-431-4306

TWITTER: @ChadJMyersTWITTER: @SuburbanHunter