Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Web Design

on

  • 1,123 views

A quick start guide to responsive User interface design for cross platform compatibility.

A quick start guide to responsive User interface design for cross platform compatibility.

Statistics

Views

Total Views
1,123
Views on SlideShare
1,120
Embed Views
3

Actions

Likes
4
Downloads
44
Comments
1

2 Embeds 3

https://twitter.com 2
http://www.docshut.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 Web Design Presentation Transcript

  • 1. ResponsiveWeb Design
  • 2. What is ResponsiveWeb Design?
  • 3. Devices
  • 4. DevicesLarge + Medium + Small1600x1200 1200x1024 1024x768
  • 5. DevicesLarge + Medium + Small800x600 800x480 768x1024
  • 6. DevicesLarge + Medium + Small640x480 320x480 320x240
  • 7. Single site for every screen
  • 8. How it works?
  • 9. Fixed width for Large & Medium
  • 10. Fluid width for Small
  • 11. Using mixed approachFixed + Fluid width
  • 12. Flexible Images
  • 13. andMedia Queries
  • 14. Has anyone done itlike this?
  • 15. 01Dropmark
  • 16. 02Microsoft
  • 17. How can i do it?Where do i start?
  • 18. Preferable: Bootstraps12 Column Grid
  • 19. UnderstandLayouts using Grid Structure
  • 20. Example 1SkillShare
  • 21. Example 1Skillshare
  • 22. Example 2GitHub
  • 23. Example 2GitHub
  • 24. PrepareContent Prioritisation
  • 25. Think inModules
  • 26. Start withMobile
  • 27. Prepare graphics forRetina Display
  • 28. Design for Desktop using960px wide Grid
  • 29. In a nutshellSynopsis● Top preference to a 12 Column Grid● Understand Layouts using Grid Structure● Get your Content Prioritisation right● Think in Modules● Start first with Mobile● Prepare graphics for Retina display● Use 960px wide grid as a default.... Hope this helps! Happy Designing! :)