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.

1. Recent work, current trends, and future capabilities
RESPONSIVE 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 they'll
– Hardware features keep being wrong!

3. Take creative and turn it into interactive websites
WHAT WE DO

5. How?
HTML
CSS Javascript
Sure, there is more, but let’s keep this simple…

6. HTML
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. <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

8. 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

9. 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

10. <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

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;
}
• 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
• 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. <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

14. 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

15. Result
HTML
Webpage
CSS Javascript
Sure, there is more, but let’s keep this simple…

16. Translating ‘buzz words’
NEW TRENDS

17. HTML5
Header Menu Video Footer
For more information, visit http://www.w3schools.com/html5

18. <header> HTML5 </header>
Header Menu Video Footer
For more information, visit http://www.w3schools.com/html5

19. HTML5
<menu> <li> Header <li></li> Menu <li></li> Video <li></li> Footer</li></menu>
For more information, visit http://www.w3schools.com/html5

20. HTML5
Header Menu Video Footer
<video> </video>
For more information, visit http://www.w3schools.com/html5

21. HTML5
Header Menu Video Footer
<footer> For more information, visit http://www.w3schools.com/html5 </footer>

22. CSS3

23. CSS3
Rounded Borders
-webkit-border-radius: 50px;
border-radius: 50px;

24. CSS3
Gradients
background: linear-gradient(top, #93cede 0%,#49a5bf 100%);
background: -moz-linear-gradient(top, #93cede 0%, #49a5bf
100%);

25. 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);

26. CSS3
@Font Face {
font-family: 'HarlowSolidItalic';
src: url(‘harlow_solid_italic.eot');

27. CSS3
Transitions
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;

28. Good web development
WEB STANDARDS

29. Why IE is the subject of developers’ nightmares
DIFFERENT BROWSERS HAVE
DIFFERENT CAPABILITIES

30. Browser wars have turned into the device wars
DIFFERENT DEVICES HAVE
DIFFERENT CAPABILITIES

32. GRACEFUL DEGRADATION VS.
PROGRESSIVE ENHANCEMENT

33. Graceful Degradation

34. New Trends in Mobile Development
RESPONSIVE DESIGN

36. We have the technology. We can make it better than it was.
SMALLER…LIGHTER…MORE
SENSITIVE

37. 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

38. Same idea…different website
MOBILE / DESKTOP
WEBSITES

39. One site to rule them all…
THE RESULT WEB
RESPONSIVE

40. OTHER COOL THINGS

41. http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html
CANVAS TAG

42. PARALLAX SCROLLING
Background scrolls slower than the foreground, creating an illusion of depth.
http://www.nikebetterworld.com/

43. Content loading as you scroll to it
INFINITE SCROLLING

44. More than just a mouse
HARDWARE SPECIFIC INTEGRATION

45. It’s old hat now, but:
TOUCH SENSITIVITY

46. I know where you live
GPS

47. Give your webpage a turn
ACCELEROMETER

48. THE END
QUESTIONS, CORRECTIONS, OR CRITICISM?
ELIZABETH.FULLER@MRMWORLDWIDE.COM