-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (139 loc) · 7.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>History of Responsive Web Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />
</head>
<body>
<div class="timeline">
<ul>
<li>
<div class="content">
<h3> Let's go Digital </h3>
<p>
It was in the nineties when the web started to conquer the world. It was around this time that
designers started to make the transition from paper to pixels. This was in part made possible
by David Siegel who wrote a book called: Creating Killer Websites. The book contained Table and
Gif techniques which enabled designers to replicate pages which they previously made on print.
</p>
<img class="images" src="Images/Create.jpeg" alt="Picture of a HTMl book used in website creation" />
</div>
<div class="time">
<h4>1990</h4>
</div>
</li>
<li>
<div class="content">
<h3>How to lay it out? </h3>
<p>
Around the end of the millennium designers where convinced by a number of assumptions <br>
- Everyone used a device capable of displaying a grid of 960 pixels.<br>
- Everyone used a (modern) web browser<br>
- Uses where in possession of an internet which made making file sizes smaller redundant. <br>
<br>
This created a spilt amongst designers there where primarily two groups: <br> One group which
held to believe that only using HTML and CSS was enough to design websites. Then there was
another group which pleaded for the use of Photoshop (or some other tool) to be able to design
websites. This group was somewhat ignored.
</p>
<img class="images" src="Images/LayOut.jpeg" alt="Picture of a layout" />
</div>
<div class="time">
<h4>~2005</h4>
</div>
</li>
<li>
<div class="content">
<h3>Then there was the iPhone </h3>
<p>
This discussion ended when a man named Steve Jobs revealed the iPhone. This device had the
capability to show HTML web pages.
This in contrast to other devices who could only show WML (Wireless Markup Language)
</p>
<img class="images" src="Images/Iphone.jpeg" alt="Picture of different iPhone trough out the years" />
</div>
<div class="time">
<h4>2007</h4>
</div>
</li>
<li>
<div class="content">
<h3>There is only one (web) </h3>
<p>
The idea that the web had only size was slowly fading around this time. Designers had to
accepted that this was an ideal situation, but one which didn’t work out.
Designers where now forced to design layouts for multiple viewing formats (from small to big).
This meant having to put more effort into the design process and more testing of layouts.
</p>
<img class="images" src="Images/Web.jpeg" alt="Picture of cable going into a modem (which is needed for Internet)" />
</div>
<div class="time">
<h4>~2007-2010</h4>
</div>
</li>
<li>
<div class="content">
<h3>Web Design made Responsive </h3>
<p>
It was in April of 2010 that Ethan Marcotte wrote about the concept of Responsive design.
Specifically, how responsive design was used in Architectural designs.
</p>
<img class="images" src="Images/Responsive.jpeg" alt="Picture of a responve web app" />
</div>
<div class="time">
<h4>April 2010</h4>
</div>
</li>
<li>
<div class="content">
<h3>Mobile First! </h3>
<p>
Luke Wrobleswksi was responsible for coining the phrase ‘Mobile First’. He came up with the
phrase after seeing a rise in use mobile devices. The term means that design is prioritised for
mobile devices and then come computers and laptops.
</p>
<img class="images" src="Images/MB_First.jpeg" alt="Picture of someone browsing a website using their phone" />
</div>
<div class="time">
<h4>October 2011</h4>
</div>
</li>
<li>
<div class="content">
<h3>I see your mobile first I raise you mobile first improved. </h3>
<p>
It was Stephanie and Bryan Rieger who expanded the mobile first approach. They said that the
lack of media query was in fact the first media query.
The mobile first approach steps back from the devices. It focuses more on the content (which
include amongst others: text, images and tasks). More specifically how this is displayed at
different resolutions.
</p>
<img class="images" src="Images/Improve.jpeg" alt="Picture of sketches insinuating improvement " />
</div>
<div class="time">
<h4>2011</h4>
</div>
</li>
<li>
<div class="content">
<h3>Nowadays </h3>
<p>
Back in the day web design was done solely by the designers. The users weren’t consolidated on
any decision relating to design of a website. Today this has changed the user is often called
in to sit down with the designer to discuss how the website should work, look and feel. User
first on could say.
</p>
<img class="images" src="Images/Present.jpeg" alt="Picture of present day code" />
</div>
<div class="time">
<h4>Present Day</h4>
</div>
</li>
<div style="clear: both;"></div>
</ul>
</div>
</body>
</html>