Responsive Design

4,075 views

Published on

Here at MRM, we are delivering new and exciting work with
HTML5, CSS3, responsive web and cross platform solutions, but what does that really entail?

Hear the tech team explain recent work, current trends and future capabilities.

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

  • Be the first to like this

No Downloads
Views
Total views
4,075
On SlideShare
0
From Embeds
0
Number of Embeds
2,089
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Design

  1. 1. Recent work, current trends, and future capabilitiesRESPONSIVE DESIGN
  2. 2. Overview• Fundamentals of web development – HTML – CSS – Javascript• Cross Browser / Platform – Graceful Degradation – Progressive Enhancement• What’s New – HTML5 – CSS3 – Responsive Web What do you want me to do? LEAVE? Then theyll – Hardware features keep being wrong!
  3. 3. Take creative and turn it into interactive websitesWHAT WE DO
  4. 4. How? HTML CSS JavascriptSure, there is more, but let’s keep this simple…
  5. 5. HTMLHTML is a language for describing web pages.• HTML stands for Hyper Text Markup Language• HTML is not a programming language, it is a markup language• A markup language is a set of markup tags• The purpose of the tags are to describe page content Referenced from weschools.com
  6. 6. <h1> HTML </h1> HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • The purpose of the tags are to describe page content Referenced from weschools.com
  7. 7. HTML HTML is a language for describing<p> </p> web pages. • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • The purpose of the tags are to describe page content Referenced from weschools.com
  8. 8. HTML HTML is a language for describing web pages.<ul> <li> • HTML stands for Hyper Text Markup Language </li> <li> • HTML is not a programming language, it is </li> a markup language <li> • A markup language is a set of markup tags </li> <li> • The purpose of the tags are to describe page </li> content </ul> Referenced from weschools.com
  9. 9. <h1> HTML </h1> CSS (Cascading Style Sheets) HTML is a language for describing define how to display HTML elements web pages. • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • The purpose of the tags are to describe page content Referenced from weschools.com
  10. 10. <h1> HTML </h1> CSS (Cascading Style Sheets) HTML is a language for describing define how to display HTML elements web pages. h1 { font-family: Times, serif; } • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • The purpose of the tags are to describe page content Referenced from weschools.com
  11. 11. <h1> HTML </h1> CSS (Cascading Style Sheets) HTML is a language for describing define how to display HTML elements web pages. h1 { font-family: Times, serif; font-weight: bold; • HTML stands for Hyper Text Markup} Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • The purpose of the tags are to describe page content Referenced from weschools.com
  12. 12. <h1> HTML </h1> CSS (Cascading Style Sheets) HTML is a language for describing define how to display HTML elements web pages. h1 { font-family: Times, serif; font-weight: bold; • HTML stands for Hyper Text Markup Language color: blue; • HTML is not a programming language, it is } a markup language • A markup language is a set of markup tags • The purpose of the tags are to describe page content Referenced from weschools.com
  13. 13. Javascript• JavaScript is THE scripting language of the Web.• JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more.• …we’ll leave it at that. Referenced from weschools.com
  14. 14. Result HTML Webpage CSS JavascriptSure, there is more, but let’s keep this simple…
  15. 15. Translating ‘buzz words’NEW TRENDS
  16. 16. HTML5Header Menu Video FooterFor more information, visit http://www.w3schools.com/html5
  17. 17. <header> HTML5 </header> Header Menu Video Footer For more information, visit http://www.w3schools.com/html5
  18. 18. HTML5<menu> <li> Header <li></li> Menu <li></li> Video <li></li> Footer</li></menu> For more information, visit http://www.w3schools.com/html5
  19. 19. HTML5 Header Menu Video Footer<video> </video> For more information, visit http://www.w3schools.com/html5
  20. 20. HTML5 Header Menu Video Footer<footer> For more information, visit http://www.w3schools.com/html5 </footer>
  21. 21. CSS3
  22. 22. CSS3 Rounded Borders -webkit-border-radius: 50px; border-radius: 50px;
  23. 23. CSS3 Gradientsbackground: linear-gradient(top, #93cede 0%,#49a5bf 100%); background: -moz-linear-gradient(top, #93cede 0%, #49a5bf 100%);
  24. 24. CSS3 Dropshadows-webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, .3); box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, .3);
  25. 25. CSS3 @Font Face { font-family: HarlowSolidItalic; src: url(‘harlow_solid_italic.eot);
  26. 26. CSS3 Transitions-webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
  27. 27. Good web developmentWEB STANDARDS
  28. 28. Why IE is the subject of developers’ nightmaresDIFFERENT BROWSERS HAVEDIFFERENT CAPABILITIES
  29. 29. Browser wars have turned into the device warsDIFFERENT DEVICES HAVEDIFFERENT CAPABILITIES
  30. 30. GRACEFUL DEGRADATION VS. PROGRESSIVE ENHANCEMENT
  31. 31. Graceful Degradation
  32. 32. New Trends in Mobile DevelopmentRESPONSIVE DESIGN
  33. 33. We have the technology. We can make it better than it was.SMALLER…LIGHTER…MORESENSITIVE
  34. 34. Mobile Only vs. Responsive• Build multiple • Build one site with sites, each dedicated to special techniques for one platform (mobile / handling content per desktop / tablet) platform. m.ashton.nikonusa.com www.csc.com
  35. 35. Same idea…different websiteMOBILE / DESKTOPWEBSITES
  36. 36. One site to rule them all…THE RESULT WEB RESPONSIVE
  37. 37. OTHER COOL THINGS
  38. 38. http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.htmlCANVAS TAG
  39. 39. PARALLAX SCROLLINGBackground scrolls slower than the foreground, creating an illusion of depth. http://www.nikebetterworld.com/
  40. 40. Content loading as you scroll to itINFINITE SCROLLING
  41. 41. More than just a mouseHARDWARE SPECIFIC INTEGRATION
  42. 42. It’s old hat now, but:TOUCH SENSITIVITY
  43. 43. I know where you liveGPS
  44. 44. Give your webpage a turnACCELEROMETER
  45. 45. THE ENDQUESTIONS, CORRECTIONS, OR CRITICISM?ELIZABETH.FULLER@MRMWORLDWIDE.COM

×