Adaptive Web-Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Adaptive Web-Design

  • 3,147 views
Uploaded on

The slides from my front-end day talk, Adaptive Web Design.

The slides from my front-end day talk, Adaptive Web Design.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,147
On Slideshare
3,136
From Embeds
11
Number of Embeds
2

Actions

Shares
Downloads
58
Comments
0
Likes
3

Embeds 11

http://lanyrd.com 10
http://thinkery.me 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Adaptive Web Design
    Alex Gyoshev
    Telerik Fronteer
  • 2. Responsive
    Adaptive Web Design
    Alex Gyoshev
    Telerik Fronteer
  • 3. State of the Mobile Web
  • 4. Are iPhone & iPadenough?
  • 5. The many faces
    of Android
  • 6. and… more?
  • 7. Explosionofscreen resolutions
    source: Rethinking the Mobile Web
  • 8. reach
    user experience
    Balancing solutions
  • 9. Responsive Web Design
  • 10. Inspired by Responsive Architecture
  • 11.
  • 12.
  • 13. Flexible grid
    Flexible media
    @media queries
    1
    3
    1
    2
    2
    Three key techniques
  • 14. Flexible Grid
    • Adapts to all screen resolutions
    • 15. Preserves proportions
    • 16. Percentages instead of fixed units
    • 17. Easily tested by resizing your browser window
  • 18.
  • 19. Flexible Grid: Problems
    • Unpleasantly wide on large monitors
    Can be fixed through
    max-width:100em; /* 1600px, elastic */
    • Fixed-size elements, either break it or get cropped
  • Flexible Media
    Media is good at breaking the grid
    Behaves, if asked politely
    img, object {max-width: 100%;
    }
  • 20. @media Queries
    • Act when the flexible grid gets overwhelmed or inefficient
    • 21. Linear content for phones
    • 22. Usage:
    @media all and (min-width: 600px) {
    /* desktop-specific styles */
    }
  • 23. Nice
    Example
  • 24. Pictures scale proportionally
    Nice
    Example
  • 25. Image is cropped
    Nice
    Example
  • 26. Linear display
    Nice
    Example
    No more scalling
  • 27. Nice
    Example
  • 28. Smaller menu
    Nice
    Example
  • 29. Nice
    Example
    Smaller text size
  • 30. Compact logo and menu
    Nice
    Example
    Linear display
  • 31. Even to this size
    Nice
    Example
  • 32. @media Queries: Do they work?
    • Work (almost) everywhere
    source: http://caniuse.com/
    • In desperate situations, use JavaScript
    • 33. CSS3-mediaqueries-js– full media query support
    • 34. Respond.js– much faster, limited queries
    • 35. Custom scripts
  • Further things to consider
    • Connection speed
    • 36. Pointing devices
    • 37. Different user context
  • Connection Speed
    • Minimizing HTTP requests
    • 38. CSS sprites
    • 39. CSS3 instead of images
    • 40. Custom fonts only on desktop
    • 41. Responsive images
    <imgsrc="small.r.jpg" data-fullsrc="large.jpg“ />
  • 42. Pointing devices
    • Remember Fitts’ Law
    • 43. Make touchable content bigger
    • 44. Grow content when users use it
    • 45. Majority of users are right-handed
  • User context
    • Prioritize content
    • 46. Delegate responsibilities to other pages
    • 47. Test!
  • Two Sides
    • Responsive web design
    • 48. Pure mobile web
  • Purrrist
    Responsive developer
    Two Sides
  • 49. Qwestuns?
    @alex_gyoshev
    alex@gyoshev.net
  • 50. References
    • Responsive Web Design by Ethan Marcotte
    • 51. Rethinking the Mobile Web by Bryan Rieger
    • 52. Real-world Responsive Design by Stephen Hay
    • 53. Responsive Web Design Resources at Smashing Magazine
    • 54. Flexible Web Design book
    • 55. Media queries under IE8 and below
    • 56. CSS3-mediaqueries-js – full media query support
    • 57. Respond.js – much faster, limited queries