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

Responsive Web Design

on

  • 1,060 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,060
Slideshare-icon Views on SlideShare
1,058
Embed Views
2

Actions

Likes
4
Downloads
43
Comments
1

2 Embeds 2

https://twitter.com 1
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

11 of 1

  • 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 Responsive Web Design Presentation Transcript

    • ResponsiveWeb Design
    • What is ResponsiveWeb Design?
    • Devices
    • DevicesLarge + Medium + Small1600x1200 1200x1024 1024x768
    • DevicesLarge + Medium + Small800x600 800x480 768x1024
    • DevicesLarge + Medium + Small640x480 320x480 320x240
    • Single site for every screen
    • How it works?
    • Fixed width for Large & Medium
    • Fluid width for Small
    • Using mixed approachFixed + Fluid width
    • Flexible Images
    • andMedia Queries
    • Has anyone done itlike this?
    • 01Dropmark
    • 02Microsoft
    • How can i do it?Where do i start?
    • Preferable: Bootstraps12 Column Grid
    • UnderstandLayouts using Grid Structure
    • Example 1SkillShare
    • Example 1Skillshare
    • Example 2GitHub
    • Example 2GitHub
    • PrepareContent Prioritisation
    • Think inModules
    • Start withMobile
    • Prepare graphics forRetina Display
    • Design for Desktop using960px wide Grid
    • 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! :)