Your SlideShare is downloading. ×
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Web Design

998
views

Published on

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.

Published in: Design

1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
998
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
45
Comments
1
Likes
4
Embeds 0
No embeds

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. 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! :)