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

Responsive design

on

  • 816 views

Presentatie gegeven op 2 november door Alard Weisscher over Responsive Design

Presentatie gegeven op 2 november door Alard Weisscher over Responsive Design

Statistics

Views

Total Views
816
Views on SlideShare
815
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

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 design Responsive design Presentation Transcript

    • Responsive Design By Alard Weisscher
    • Boston Globe
    • Alard Weisscher By Alard Weisscher
    • In the beginning … .page { width: 960px }
    • Ingredients 1.  Flexible grid based layout 2.  Flexible images and media 3.  Media queries
    • Using percentages instead of fixed values. Sizing related to its context. Strange nrs …
    • Scaling images.Meet max-width: 100%, overflow and the IE nightmares
    • Media queries@media  screen  and  (min-­‐width:  1024px)  {  …  },   <meta  name=‘viewport’  …  />    
    • The DARK SIDE of responsive design
    • Browser resizing of imagesBIG files for mobile, processor intensive, media queries support flaky in mobile
    • On the fly generation of right sizeExperiment: use javascript and PHP to generate a image on the fly.
    • Heavy footprint of files on mobile Javascript, CSS files, imagese.g. NY times mobile (54K) vs NY times desktop (637.4K)
    • Mobile FirstDefault is light weight, progressively build upwards.
    • But hey! … mobile is a different context People have different needs in different contexts. Touch proof? Poor connectivity?Can you even ‘detect’ if a person is in a mobile context?
    • RD ResourcesGoogle:  responsive  design  tools  
    • Responsive design beyond the Web Interactive Video / TV world