This document discusses responsive web design trends for 2012, including responsive design which allows websites to automatically resize content to fit any screen resolution from mobile to desktop. It highlights that 15% of users now browse on mobile and responsive design improves the user experience and conversion rates. CSS3 features like media queries, fonts, borders, shadows and images are also covered to create impactful designs.

1. Web Design Trends for 2012
Ollie Battams, Head of Design

2. Responsive web design.

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;
}
}

6. Responsive web design.
Website content
automatically
resizes to fit any
resolution


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 = £££ 

8. CSS3.

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.

14. CSS3.
CSS3 Borders
There are 3 border properties:
Rounded corners Box shadow Border image
div{ div{ div{
border:2px solid; box-shadow: 10px 10px 5px border-image:
border-radius:25px; #888888; url(border.png) 27 27 27 27
-moz-border-radius:25px; /* } round round;
Firefox 3.6 and earlier */ }
}

15. Any questions
If you have any questions, please either post a comment on the
blog, or contact us via Twitter!