Website trends 2012 presentation
Upcoming SlideShare
Loading in...5
×
 

Website trends 2012 presentation

on

  • 2,246 views

 

Statistics

Views

Total Views
2,246
Views on SlideShare
2,137
Embed Views
109

Actions

Likes
0
Downloads
14
Comments
0

2 Embeds 109

http://www.freshegg.com 107
http://www.freshegg.co.uk 2

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Website trends 2012 presentation Website trends 2012 presentation Presentation Transcript

  • 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 has seen up to 15% of website users browsing the web via a mobile device
  • 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">
  • 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; } }
  • Responsive web design. Website content automatically resizes to fit any resolution 
  • 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 = £££ 
  • CSS3.
  • 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
  • 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
  • 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
  • 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
  • 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.
  • 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 */ }}
  • Any questions If you have any questions, please either post a comment on the blog, or contact us via Twitter!