• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive presentation
 

Responsive presentation

on

  • 246 views

A presentation given by me, Gertjan Vermeir and Tim Vermaercke at 22 April 2013 for Arteveldehogeschool.

A presentation given by me, Gertjan Vermeir and Tim Vermaercke at 22 April 2013 for Arteveldehogeschool.

Statistics

Views

Total Views
246
Views on SlideShare
244
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 2

https://abs.twimg.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Responsive presentation Responsive presentation Presentation Transcript

    • RESPONSIVEDESIGNby Tim Vermaercke, Gertjan Vermeir & Nico Verbruggen
    • Contents● Introduction● History of mobile browsing & design● Why implement a responsive design?● Implementation (how-to)● Short demonstration
    • IntroductionA brief explanation of responsive design
    • What is responsive design?● creating a website design that supports:○ multiple screen sizesusing a grid-based system
    • What is responsive design?● creating a website design that supports:○ multiple screen sizes○ multiple input methodsmouse/trackpad, finger(s)
    • History of the mobile webHow we got to this point
    • 2007Year of the new smartphones
    • No real browsing, nomobile site(mostly used for email)
    • 2008-2010Introduction of 3G and faster phones +networks
    • 3G > EDGEno fast internet, but used forsome browsing(!) some request for mobilewebsites
    • 2010Introduction of the first tablets
    • 2011-2012More and more tablets, more and moresmartphones (more Android!)
    • Adaptive design(a dynamic site where adaptation occursserver-side)
    • Responsive design(a dynamic site where adaptation occursclient-side)
    • Today4G, many tablets, many smartphonesmore mobile browsing
    • 4G: faster than WiFi(limited availability in Belgium)
    • Adobe Digital Marketing Analysis (March 2013, data from February 13)(http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/)
    • Adobe Digital Marketing Analysis (March 2013, data from February 13)(http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/)
    • Why we chose responsivedesign
    • Web developer● World Wide Web applications● Up to date● New methods● Technical● Design
    • The rising demand
    • Why implement aresponsive design?
    • Twice the workLyricsDesignsCoding
    • By 2020, mobile internet should takeover desktop internet usage
    • Techniques
    • Device awareness since CSS 2.1<link rel="stylesheet" type="text/css"href="screen.css" media="screen" /><link rel="stylesheet" type="text/css"href="print.css" media="print" />
    • Acceptable Media Types
    • iPhone 3G320 by 480 pixelsiPhone 5640 by 1,136 pixels
    • <link rel="stylesheet" type="text/css"href="style.css" media="handheld" /><link rel="stylesheet" type="text/css"href="style.css" media="handheld and (max-device-width: 320px)” />
    • <link rel="stylesheet" type="text/css"href="style.css" media="handheld and(max-device-width: 320px)” />Media typeMedia query
    • <link rel="stylesheet" type="text/css"href="style.css" media="handheld and(max-device-width: 1136px) and(resolution: 326ppi)” />Keyword to chainpropertiestogether
    • @media screen and (max-device-width:1136px) {body {background: #000;color: #FFF;}}
    • @import url(‘style.css’) screen and (max-device-width: 1136px);
    • media queries=conditional
    • Questions?
    • Some extra timeHeres some examples
    • a list apart
    • designed to move
    • and many more...
    • Thank you for yourattention!