Web Design Trends for 2012Ollie Battams, Head of Design
Responsive web design.
Responsive web design.• Screen resolution ranges from 320px (iPhone) to 2560px (large  monitor) or even higher• Fresh Egg ...
Responsive web design.• Since the days of CSS2, style sheets have enjoyed some measure of  device awareness through media ...
Responsive web design.• W3C created media queries as part of the CSS3 specification• Media queries allow you to target spe...
Responsive web design.                         Website content                         automatically                      ...
Responsive web design.What are the benefits?• Users find it easier to navigate and read websites• Websites become future p...
CSS3.
CSS3.• CSS3 offers a huge variety of new ways to create an impact with  web designs• CSS3 is split into ‘modules:’     •  ...
CSS3.The @font-face Rule• CSS3, web designers had to use fonts that were already installed  on the users computer or using...
CSS3.Example@font-face {font-family: myFirstFont;src: url(Sansation_Light.ttf),     url(Sansation_Light.eot) format("opent...
CSS3.Other techniques• Google offers a service that hosts open source fonts on a CDN  (content delivery network)• Typekit ...
CSS3.Text Shadow• Reduces the need to use images for typography• Works really well with web fonts                         ...
CSS3.CSS3 BordersThere are 3 border properties:Rounded corners               Box shadow                  Border imagediv{ ...
Any questions  If you have any questions, please either post a comment on the      blog, or contact us via Twitter!
Upcoming SlideShare
Loading in...5
×

Website trends 2012 presentation

1,649

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,649
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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 www.fontsquirrell.com
  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.

×