3. Responsive web design.
• Screen resolution ranges from 320px (iPhone) to 2560px (large
monitor) or even higher
• Fresh Egg has seen up to 15% of website users browsing the web
via a mobile device
4. Responsive web design.
• Since the days of CSS2, style sheets have enjoyed some measure of
device awareness through media types
Example
<link rel="stylesheet" type="text/css"
href="core.css“ media="screen">
<link rel="stylesheet" type="text/css"
href="print.css“ media="print">
5. Responsive web design.
• W3C created media queries as part of the CSS3 specification
• Media queries allow you to target specific screen sizes and
resolutions
Example
<link rel="stylesheet" type="text/css" media="screen and
(max-device-width: 480px)" href=“styles.css">
or
@media screen and (max-device-width: 480px) {
.column { float: none;
}
}
7. Responsive web design.
What are the benefits?
• Users find it easier to navigate and read websites
• Websites become future proof
• Users stay on websites for longer and are more likely to come back
• Higher conversion rates = £££
9. CSS3.
• CSS3 offers a huge variety of new ways to create an impact with
web designs
• CSS3 is split into ‘modules:’
• Selectors • 2D/3D Transformations
• Box Model • Animations
• Backgrounds and Borders • Multiple Column Layout
• Text Effects • User Interface
10. CSS3.
The @font-face Rule
• CSS3, web designers had to use fonts that were already installed
on the user's computer or using a JS library like SIFR or Cufon
or just as an image
• @font-face allows you to use any font you like (as long as you’re
allowed to)
• The font is hosted on the website and is downloaded
automatically when needed
11. CSS3.
Example
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot') format("opentype"); /* IE */
}
----------------------------
div{
font-family:myFirstFont;
}
To create @font-face kits, go to www.fontsquirrell.com
12. CSS3.
Other techniques
• Google offers a service that hosts open source fonts on a CDN
(content delivery network)
• Typekit is a paid service that also hosts open source fonts. It has a
much wider selection of fonts
13. CSS3.
Text Shadow
• Reduces the need to use images for typography
• Works really well with web fonts
h1{
text-shadow: 2px 2px 2px #CCCCCC;
}
You specify the horizontal shadow, the vertical
shadow, the blur distance, and the colour of
the shadow.
