Responsive Design: What Is It & Why Is It Important?
•Télécharger en tant que PPT, PDF•
0 j'aime•519 vues
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.
Recommandé
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
Responsive Design: What Is It & Why Is It Important?
- 1. RESPONSIVE WEB DESIGN FOR A FUTURE-FRIENDLY WEB 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
- 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. DESIGN Design is the shaping and formation of a physical space. 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
- 4. MY CHILDHOOD DREAM I wanted to be an architect! 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
- 5. ARCHITECTURE & WEB DESIGN There are a lot of similarities 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
- 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. 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. 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. 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. 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. EXAMPLES OF RWD Menu control 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
- 22. EXAMPLES OF RWD Re-organization of content 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
- 23. EXAMPLES OF RWD Control of font size 245 East Eleventh Street , Indianapolis, Indiana 46202 / SpringboardMarketing.com
- 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. 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
Notes de l'éditeur
- 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