Responsive Design: What is it? How do we do it? How much will it cost?
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?
![Page 1: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/1.jpg)
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
RESPONSIVE WEB DESIGN FOR A FUTURE-FRIENDLY WEB
![Page 2: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/2.jpg)
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
![Page 3: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/3.jpg)
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
DESIGNDesign is the shaping and formation of a physical space.
![Page 4: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/4.jpg)
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
MY CHILDHOOD DREAMI wanted to be an architect!
![Page 5: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/5.jpg)
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
ARCHITECTURE & WEB DESIGNThere are a lot of similarities
![Page 6: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/6.jpg)
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
![Page 7: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/7.jpg)
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
![Page 8: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/8.jpg)
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).
![Page 9: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/9.jpg)
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
![Page 10: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/10.jpg)
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?
![Page 11: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/11.jpg)
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!
![Page 12: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/12.jpg)
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
![Page 13: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/13.jpg)
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
![Page 14: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/14.jpg)
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
![Page 15: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/15.jpg)
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
![Page 16: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/16.jpg)
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
A TIME TO CHANGEEthan Marcotte: 2009 / 2010+ media queries+ fluid grids+ flexible images
![Page 17: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/17.jpg)
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.
![Page 18: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/18.jpg)
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.
![Page 19: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/19.jpg)
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.”
![Page 20: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/20.jpg)
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
![Page 21: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/21.jpg)
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
EXAMPLES OF RWDMenu control
![Page 22: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/22.jpg)
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
EXAMPLES OF RWDRe-organization of content
![Page 23: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/23.jpg)
245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
EXAMPLES OF RWDControl of font size
![Page 24: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/24.jpg)
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
![Page 25: Responsive Design: What Is It & Why Is It Important?](https://reader036.fdocuments.us/reader036/viewer/2022081603/55813f7ed8b42a9b098b4cdf/html5/thumbnails/25.jpg)
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