Website trends 2012 presentation

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 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!

Website trends 2012 presentation

by Fresh_Egg on Jan 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 95

Statistics

Website trends 2012 presentation — Presentation Transcript