Embed Size (px)
DESCRIPTION
Slides to accompany a talk I gave at Conestoga College as part of their User Experience Guest Lecture Series. The description of the talk was: In 2012 .net magazine named Responsive Web Design (RWD) as the number two Web design trend. Mashable called 2013 the year of RWD. Varying screen resolutions, window widths, preferences, and fonts have shaped how one is able to design on the Web. RWD aims to answer the question of how to best respond to the user’s view to provide an optimal user experience. Join us for a talk into this trendy topic, where we will cover the ins and outs and best practices of RWD by creating a responsive site for a small company. Code from the talk is available at: https://github.com/BeardedCoder/ResponsiveWebDesign
Citation preview
DesignResponsive
Matthew Campbell@BeardedCoder
What Is It?
Approaches
Graceful Degradation
Progressive Enhancement
Mobile First
Tip #1
let the device width rule
<head>…<meta
name="viewport" content="width=device-width" /></head>
HTML
Tip #2
use relative fonts (em, %)
Tip #3
use relative widths (%)
Tip #4
favour max- and min-width
Tip #5
make your images flexible
HTML
<imgsrc="panda.png"alt="A panda eating
bamboo" />CSS
img {width: 100%;height: auto;
}
Media Queries
Tip #6
use media queries to adapt your layout to devices
@media screen and ( min-width: 780px ) {
.sidebar {display: block;
}
.main {max-width: 800px;margin-left: 240px;padding-left: 50px;border-left: 1px solid #999;
}}
CSS
@media screen and ( min-width: 780px )and ( max-width: 1080px ) {
}
CSS
@media all and ( max-width: 699px )and ( min-width: 520px ),( min-width: 1151px ) {{
}
CSS
BeardedCoder
@BeardedCoder
http://matthew-campbell.ca
Contact
Me:
Twitter:
Website:
GitHub:
