Responsive Design

  • 3,472 views
Uploaded on

Here at MRM, we are delivering new and exciting work with …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,472
On Slideshare
0
From Embeds
0
Number of Embeds
223

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Recent work, current trends, and future capabilitiesRESPONSIVE DESIGN
  • 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. Take creative and turn it into interactive websitesWHAT WE DO
  • 4. How? HTML CSS JavascriptSure, there is more, but let’s keep this simple…
  • 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. <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. 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. 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. <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. <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. <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. <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. 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. Result HTML Webpage CSS JavascriptSure, there is more, but let’s keep this simple…
  • 15. Translating ‘buzz words’NEW TRENDS
  • 16. HTML5Header Menu Video FooterFor more information, visit http://www.w3schools.com/html5
  • 17. <header> HTML5 </header> Header Menu Video Footer For more information, visit http://www.w3schools.com/html5
  • 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. HTML5 Header Menu Video Footer<video> </video> For more information, visit http://www.w3schools.com/html5
  • 20. HTML5 Header Menu Video Footer<footer> For more information, visit http://www.w3schools.com/html5 </footer>
  • 21. CSS3
  • 22. CSS3 Rounded Borders -webkit-border-radius: 50px; border-radius: 50px;
  • 23. CSS3 Gradientsbackground: linear-gradient(top, #93cede 0%,#49a5bf 100%); background: -moz-linear-gradient(top, #93cede 0%, #49a5bf 100%);
  • 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. CSS3 @Font Face { font-family: HarlowSolidItalic; src: url(‘harlow_solid_italic.eot);
  • 26. CSS3 Transitions-webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
  • 27. Good web developmentWEB STANDARDS
  • 28. Why IE is the subject of developers’ nightmaresDIFFERENT BROWSERS HAVEDIFFERENT CAPABILITIES
  • 29. Browser wars have turned into the device warsDIFFERENT DEVICES HAVEDIFFERENT CAPABILITIES
  • 30. GRACEFUL DEGRADATION VS. PROGRESSIVE ENHANCEMENT
  • 31. Graceful Degradation
  • 32. New Trends in Mobile DevelopmentRESPONSIVE DESIGN
  • 33. We have the technology. We can make it better than it was.SMALLER…LIGHTER…MORESENSITIVE
  • 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. Same idea…different websiteMOBILE / DESKTOPWEBSITES
  • 36. One site to rule them all…THE RESULT WEB RESPONSIVE
  • 37. OTHER COOL THINGS
  • 38. http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.htmlCANVAS TAG
  • 39. PARALLAX SCROLLINGBackground scrolls slower than the foreground, creating an illusion of depth. http://www.nikebetterworld.com/
  • 40. Content loading as you scroll to itINFINITE SCROLLING
  • 41. More than just a mouseHARDWARE SPECIFIC INTEGRATION
  • 42. It’s old hat now, but:TOUCH SENSITIVITY
  • 43. I know where you liveGPS
  • 44. Give your webpage a turnACCELEROMETER
  • 45. THE ENDQUESTIONS, CORRECTIONS, OR CRITICISM?ELIZABETH.FULLER@MRMWORLDWIDE.COM