SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014.
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.
A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014.
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.
1.
Photo: Jakub Solovský https://flic.kr/p/i1RRZm
Designing Responsive Websites
Clarissa Peterson ✦ @clarissa
A hands-on workshop at EuroIA ✦ 27 Sept. 2014
2.
How to download files or view example pages
The white slides with purple text at the top are
where we did hands-on coding examples in the
workshop.
If you want to follow along and edit the files in
your text editor, go to this URL and click on
“download all files.” Otherwise, you can view each
example file from the same URL.
www.clarissapeterson.com/files/euroia/
115.
Being a Web designer & not considering
speed/performance is like being a print
designer & not considering how your
colors will print.
- Luke Wroblewski
@lukew
196.
Mobile use case: I just transferred money
at my desk using my phone because
logging into my banking app requires
fewer steps.
- Stephanie Rieger
@stephanierieger
197.
Change branding
with media queries
http://www.dorigati.it/en/
303.
p { line-height: 1.3 }
@media only screen and (min-width: 30em) {
p { line-height: 1.4 }
}
@media only screen and (min-width: 60em) {
p { line-height: 1.5 }
}
304.
View: Rabbit #3
p { line-height: 1; }
@media only screen and (min-width: 30em) {
p { line-height: 1.5; }
}
@media only screen and (min-width: 60em) {
p { line-height: 2; }
}
305.
Vertical Margins
Photo: Nick Ares https://flic.kr/p/4qc5EB
306.
p {
line-height: 1.5;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
307.
View: Rabbit #4
p { line-height: 1; margin: 1em 0; }
@media only screen and (min-width: 30em) {
p { line-height: 1.5; margin: 1.5em 0; }
}
@media only screen and (min-width: 60em) {
p { line-height: 2; margin: 2em 0; }
}
312.
<p>These stories are true. Although I have
left <span class=”testing”>the strict line
of historical</span> truth in many places,
the animals in this book were all real
characters.</p>
313.
<p>These stories are true. Although I have
left <span class=”testing”>the strict line
of historical</span> truth in many places,
the animals in this book were all real
characters.</p>
.testing { color: #f00; }
314.
<p>These stories are true. Although I have
left <span class=”testing”>the strict line
of historical</span> truth in many places,
the animals in this book were all real
characters.</p>
.testing { color: #f00; }
316.
View: Rabbit #5
<p>Once upon a time there were four little
Rabbi<span style="color: red;">ts, and
their names were Flops</span>y, Mopsy,
Cotton-tail, and Peter.</p>