Website trends 2012 presentation
-
Upload
freshegg -
Category
Technology
-
view
2.330 -
download
2
description
Transcript of 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.
• CSS3 offers a huge variety of new ways to create an impact with web designs
• CSS3 is split into ‘modules:’
• 2D/3D Transformations• Animations• Multiple Column Layout• User Interface
• Selectors• Box Model• Backgrounds and Borders• Text Effects
CSS3.
The @font-face Rule
• CSS3, web designers had to use fonts that were already installed on the user's computer or using a JS library like SIFR or Cufonor 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
div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}
Box shadow
div{box-shadow: 10px 10px 5px #888888;}
Border image
div{border-image: url(border.png) 27 27 27 27 round round; }
Any questions
If you have any questions, please either post a comment on the blog, or contact us via Twitter!