Website trends 2012 presentation


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website trends 2012 presentation

  1. 1. Web Design Trends for 2012Ollie Battams, Head of Design
  2. 2. Responsive web design.
  3. 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. 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. 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. 6. Responsive web design. Website content automatically resizes to fit any resolution 
  7. 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. 8. CSS3.
  9. 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. 10. CSS3.The @font-face Rule• CSS3, web designers had to use fonts that were already installed on the users 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. 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
  12. 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. 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. 14. CSS3.CSS3 BordersThere are 3 border properties:Rounded corners Box shadow Border imagediv{ 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. 15. Any questions If you have any questions, please either post a comment on the blog, or contact us via Twitter!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.