The document discusses the history and evolution of web browsers and standards. It notes that early browsers in the 1990s included Mosaic and Netscape Navigator. In the late 1990s, Internet Explorer and Netscape competed using both open and closed standards. HTML5 was developed in the 2000s to better support web applications and add new elements like video. The document also discusses approaches to making websites mobile-friendly, including responsive design using viewport meta tags and media queries.

8. Opera and the
Open Web platform
Photo by takomabibelot CC BY license
http://www.flickr.com/photos/takomabibelot/473812157/

9. a bit of browser history

10. In 1980s, early 1990s:
very early browsers

11. 1991:
WorldWideWeb

12. 1993:
Mosaic

13. Mosaic is the celebrated graphical
“browser” that allows users to travel
through the world of electronic
information using a point-and-click
interface.
— Wired, October 1994

14. 1994:
Netscape Navigator

15. 1995:
Internet Explorer

16. 1994:

17. 1994:
MultiTorg Opera

18. 1994:
MultiTorg Opera

19. 1994:
MultiTorg Opera

20. 1996:
Opera

22. HTML, XHTML, XML, CSS, SVG, PNG,... standards

23. What are Web Standards?
Standards are rules and methodologies
that make building things easier.
And the results better.

24. Open vs Closed Standards
Open Standards are made by the
World Wide Web Consortium (W3C) in
public, through debate & discussion,
leading to agreement.
Closed Standards are made by a single
company, in secret, according to the
business needs of that company.

25. Importance of Open Standards
The Web works everywhere
The Web is the platform

26. HTML, XHTML, XML, CSS, SVG, PNG,... standards

27. Dominant players in late 1990s:
Internet Explorer and Netscape

28. Strong competition & introduction of
new, often non-standard features
<font>, <marquee>, <blink>

29. Around the same time:
early experiments with mobile web
non-standard HDML, WML, cHTML...

30. 2000s

31. Internet Explorer wins the first browser war

32. Graph by Eric Meyer
http://meyerweb.com/eric/browsers/timeline-structured.html

33. Desktop browsers
Opera 10.5x
Internet Explorer 8
Firefox 3.6
Safari 4
& Google Chrome 4.1

34. http://gs.statcounter.com/

35. http://people.opera.com/dstorey/images/OperaMarketShareEEhover.svgz

36. Full mobile browsers
Opera Mini 5
Opera Mobile 10
Safari for iPhone
Android browser
Firefox for Mobile
Nokia browser
& others

37. http://gs.statcounter.com/

38. Opera Mini

41. Photo by lrargerich CC BY license
http://www.flickr.com/photos/lrargerich/3125605370/

42. Strong competition, lots of players:
- standards implementation race
- performance race
- convergence desktop & mobile
- user experience enhancements

43. Strong competition, lots of players:
- standards implementation race
- performance race
- convergence desktop & mobile
- user experience enhancements
Sputnik JavaScript conformance test

44. Strong competition, lots of players:
- standards implementation race
- performance race
- convergence desktop & mobile
- user experience enhancements
Peacekeeper benchmark

45. Strong competition, lots of players:
- standards implementation race
- performance race
- convergence desktop & mobile
- user experience enhancements

46. HTML5

49. “... extending the language to better support Web
applications, since that is one of the directions the Web
is going in and is one of the areas least well served by
HTML so far.
This puts HTML in direct competition with other
technologies intended for applications deployed over the
Web, in particular Flash and Silverlight.”
Ian Hickson, HTML5 editor

50. More semantics for structure

51. HTML5 forms (WebForms 2)

52. <canvas>

53. <video>

54. <object width="425" height="344">
<param name="movie" value="http://
www.example.com/v/
LtfQg4KkR88&hl=en&fs=1"></param>
<param name="allowFullScreen"
value="true"></param>
<embed src="http://www.example.com/v/
LtfQg4KkR88&hl=en&fs=1" type="application/x-
shockwave-flash"
allowfullscreen="true" width="425"
height="344"></embed>
</object>

55. <video src=”video.ogg”>

56. Web Storage

57. CSS3

58. Web Fonts (@font-face)

59. border-radius
border-image

60. background-attachment
background-size

61. text-shadow
box-shadow

62. text-shadow
box-shadow

63. text-shadow
border-shadow

64. transformations
transitions

65. Making sites
mobile-friendly
Photo by bossone CC BY-NC-SA license
http://www.flickr.com/photos/bossone/3922552664/

66. Opera Mobile Opera Mini

67. +
Safari for iPhone
Android browser
Firefox for Mobile
Nokia browser
etc.
Opera Mobile Opera Mini

68. 3 approaches

69. (1)
Do nothing and let the mobile
browser handle your site

71. (2)
Create a separate mobile site
e.g. m.mysite.com

72. (2)
Create a separate mobile site
e.g. m.mysite.com
Caveats:
- browser sniffing
- reduced functionality

73. (3)
Create a site that uses
capability detection and
flexible layout techniques,
automatically adjusting to
browsers and screen sizes

74. viewport meta
Photo by code poet, CC BY-NC-SA license
http://www.flickr.com/photos/alphageek/1273563924/

78. <meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width">

79. <meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width">

80. media queries
Photo by robpatrick, CC BY-NC-SA license
http://www.flickr.com/photos/alkalinezoo/32265389/

81. media queries
@media screen and (max-width: 320px) {
#block {float: left;}
}
@media screen and (max-width: 240px) {
#block {display: none;}
}

82. media queries to viewport width
refers
@media screen and (max-width: 320px) {
#block {float: left;}
}
@media screen and (max-width: 240px) {
#block {display: none;}
}