Your SlideShare is downloading. ×
0
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Website trends 2012 presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Website trends 2012 presentation

1,619

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,619
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web Design Trends for 2012Ollie 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 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. 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 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. Any questions If you have any questions, please either post a comment on the blog, or contact us via Twitter!

×