website trends 2012 presentation

15
Web Design Trends for 2012 Ollie Battams, Head of Design

Upload: freshegg

Post on 10-Dec-2014

2.331 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Website trends 2012 presentation

Web Design Trends for 2012Ollie Battams, Head of Design

Page 2: Website trends 2012 presentation

Responsive web design.

Page 3: Website trends 2012 presentation

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

Page 4: Website trends 2012 presentation

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

Page 5: Website trends 2012 presentation

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;}

}

Page 6: Website trends 2012 presentation

Responsive web design.

Website content automatically resizes to fit any resolution

ü

Page 7: Website trends 2012 presentation

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 = £££

Page 8: Website trends 2012 presentation

CSS3.

Page 9: Website trends 2012 presentation

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

Page 10: Website trends 2012 presentation

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

Page 11: Website trends 2012 presentation

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

Page 12: Website trends 2012 presentation

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

Page 13: Website trends 2012 presentation

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.

Page 14: Website trends 2012 presentation

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; }

Page 15: Website trends 2012 presentation

Any questions

If you have any questions, please either post a comment on the blog, or contact us via Twitter!