RESPONSIVE WEB DESIGN
FOR A FUTURE-FRIENDLY WEB

245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarke...
CHAD MYERS
Springboard Marketing & Web Design - President
EMAIL:

cmyers@SpringboardMarketing.com

MOBILE:

317-431-4306

...
DESIGN

Design is the shaping and
formation of a physical space.

245 East Eleventh Street , Indianapolis, Indiana 46202 /...
MY CHILDHOOD DREAM
I wanted to be an architect!

245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarke...
ARCHITECTURE & WEB DESIGN
There are a lot of similarities

245 East Eleventh Street , Indianapolis, Indiana 46202 / Spring...
ARCHITECTURE & WEB DESIGN
+ understanding the end-user
+ planning – and lots of it
+ ideation & sketches
+ floor plans & w...
ARCHITECTURE & WEB DESIGN
+ understanding the end-user
+ planning – and lots of it
+ ideation & sketches
+ floor plans & w...
RESPONSIVE ARCHITECTURE
Responsive Architecture: measurement of actual
environmental conditions (via sensors) to enable
bu...
RESPONSIVE ARCHITECTURE

Responsive Architecture: measurement of actual environmental conditions (via
sensors) to enable b...
ADAPT RESPONSIVELY –
WHY NOT THE WEB?
If the physical structures around are
responding to our actions and the
conditions, ...
ADAPT RESPONSIVELY –
WHY NOT THE WEB?
If the physical structures around are
responding to our actions and the
conditions, ...
THE SMARTPHONE
+ 2007 iPhone
+ 2008 Android

We began interacting with the web on a different medium

245 East Eleventh St...
THE SMARTPHONE
+ 2007 iPhone
+ 2008 Android

The 1st big change in how we
browse

We began interacting with the web on a d...
THE SMARTPHONE

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

245...
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
A TIME TO CHANGE
Ethan Marcotte: 2009 / 2010
+ media queries
+ fluid grids
+ flexible images

245 East Eleventh Street , I...
A TIME TO CHANGE
Ethan Marcotte: 2009 / 2010
+ media queries
+ fluid grids
+ flexible images

The English architect Christ...
A NEW WAY IS BORN

Marcotte begins a ground-swell for responsive web design
+Wikipedia defines responsive web design as:
R...
RWD BECOMES EMBRACED

Responsive design was listed as #2 in Top Web Design Trends for 2012
by .Net Magazine
In late 2012, ...
WHY IS A CHANGE NEEDED
User experience
The audience has changed, and we must “respond”
+ We consume information differentl...
EXAMPLES OF RWD
Menu control

245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
EXAMPLES OF RWD
Re-organization of content

245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing....
EXAMPLES OF RWD
Control 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 i...
CHAD MYERS
Springboard Marketing & Web Design - President
EMAIL:

cmyers@SpringboardMarketing.com

MOBILE:

317-431-4306

...
Upcoming SlideShare
Loading in …5
×

Responsive Design: What Is It & Why Is It Important?

456 views

Published on

This is a presentation that was given by the owner of Springboard Marketing & Web Design at the 2013 Masters of Business Online (MBO) in Indianapolis, Indiana.

This presentation will help you understand the following aspects of responsive design:
- What is responsive design
- When did responsive design become popular
- Responsive architecture
- The increasing popularity of responsive design
- Google's standpoint on responsive design

The presentation also includes real world examples of responsive web design presented side-by-side: one being a normal computer monitor and the other a responsive version.

Everything is presented at a basic level so a deep understanding of web design is not necessary.

Published in: Design, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
456
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • design was part of my childhood
    design my mother logo when I was 10
    - dads drafting table
    - studied architecture in high school and college
    - realized the process of designing a building was very long - wasn't patient enough 
    - turned to new media (1996)
    - design being applied to interactive mediums - didn't take nearly as long
  • after working with new media and websites; realized there’s a lot of similarities
  • planing (47 story building in Spain without elevator) 
    sketches to explore ideas of what the structure may look like
    floor plans / wireframes designs to evaluate function and spacial relation
    design concepts and revisions based on client feedback
    design and construction phases
    creating a physical space that people will use.
  • planing (47 story building in Spain without elevator) 
    sketches to explore ideas of what the structure may look like
    floor plans / wireframes designs to evaluate function and spacial relation
    design concepts and revisions based on client feedback
    design and construction phases
    creating a physical space that people will use.
  • planing (47 story building in Spain without elevator) 
    sketches to explore ideas of what the structure may look like
    floor plans / wireframes designs to evaluate function and spacial relation
    design concepts and revisions based on client feedback
    design and construction phases
    creating a physical space that people will use.
  • planing (47 story building in Spain without elevator) 
    sketches to explore ideas of what the structure may look like
    floor plans / wireframes designs to evaluate function and spacial relation
    design concepts and revisions based on client feedback
    design and construction phases
    creating a physical space that people will use.
  • If the physical structures around are are responding to our actions and the conditions, why not the web?
  • If the physical structures around are responding to our actions and the conditions, why not the web?
    - there weren’t enough consumers that his impacted, to justify the change
  • With every high school, college kid, and wanna-be-hip marketer, now carrying a smart phone, how we interactedwith the web began to change. 
  • With every high school, college kid, and wanna-be-hip marketer, now carrying a smart phone, how we interactedwith the web began to change. 
  • With every high school, college kid, and wanna-be-hip marketer, now carrying a smart phone, how we interactedwith the web began to change. 
  • Marcotte begins blogging about responsive
  • Marcotte begins blogging about responsive
  • menu control
  • reprioritizing of information
  • reprioritizing of information
  • Responsive Design: What Is It & Why Is It Important?

    1. 1. RESPONSIVE WEB DESIGN FOR A FUTURE-FRIENDLY WEB 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    2. 2. CHAD MYERS Springboard Marketing & Web Design - President EMAIL: cmyers@SpringboardMarketing.com MOBILE: 317-431-4306 @ChadJMyers TWITTER: @SuburbanHunter TWITTER: 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    3. 3. DESIGN Design is the shaping and formation of a physical space. 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    4. 4. MY CHILDHOOD DREAM I wanted to be an architect! 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    5. 5. ARCHITECTURE & WEB DESIGN There are a lot of similarities 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    6. 6. 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
    7. 7. 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
    8. 8. RESPONSIVE ARCHITECTURE Responsive 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
    9. 9. RESPONSIVE ARCHITECTURE Responsive Architecture: measurement of actual environmental conditions (via sensors) to enable buildings to adapt their form, shape, color or character responsively (via actuators). Smart Homes Motion Activated Lights 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    10. 10. 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
    11. 11. 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
    12. 12. 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
    13. 13. THE SMARTPHONE + 2007 iPhone + 2008 Android The 1st big change in how we browse We began interacting with the web on a different medium 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    14. 14. 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
    15. 15. 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    16. 16. A TIME TO CHANGE Ethan Marcotte: 2009 / 2010 + media queries + fluid grids + flexible images 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    17. 17. A TIME TO CHANGE Ethan 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
    18. 18. A NEW WAY IS BORN Marcotte 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
    19. 19. RWD BECOMES EMBRACED Responsive 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
    20. 20. WHY IS A CHANGE NEEDED User 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
    21. 21. EXAMPLES OF RWD Menu control 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    22. 22. EXAMPLES OF RWD Re-organization of content 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    23. 23. EXAMPLES OF RWD Control of font size 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
    24. 24. 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
    25. 25. CHAD MYERS Springboard Marketing & Web Design - President EMAIL: cmyers@SpringboardMarketing.com MOBILE: 317-431-4306 @ChadJMyers TWITTER: @SuburbanHunter TWITTER: 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com

    ×