Responsive Web Design Artboards

Use these Adobe Illustrator files when creating different layouts for Responsive Web Design

Files

• Desktop Responsive Design Artboards.ai

  • Contains four (4) artboards for "desktop" browsing:

    • Desktop 800x600 -> 778x400
    • Desktop 1024x768 -> 1002x658
    • Desktop 1280x800 -> 1258x760
    • Desktop 1680x1050 -> 1418x700

  • Note that the heights are based on default window sizing, i.e. stuff that's "above the fold".

• iPhone iPad Web Design Artboards.ai

  • Contains eighteen (18) artboards for iPhone and iPad:

    • iPad Landscape -> 1024×768
    • iPad Portrait -> 768x1024
    • iPad (Retina) Landscape -> 2048x1536
    • iPad (Retina) Portrait -> 1536x2048
    • iPhone (Retina) Landscape -> 640x960
    • iPhone (Retina) Portrait -> 960x640
    • iPhone Landscape -> 320x480
    • iPhone Portrait -> 480x320
    • iPhone 5/5s Landscape -> 1136x640
    • iPhone 5/5s Portrait -> 640x1136
    • iPhone 6 (display zoom) Landscape -> 1136x640
    • iPhone 6 (display zoom) Portrait -> 640x1136
    • iPhone 6 Landscape -> 1334x750
    • iPhone 6 Portrait -> 750x1334
    • iPhone 6+ (display zoom) Landscape -> 2001x1125
    • iPhone 6+ (display zoom) Portrait -> 1125x2001
    • iPhone 6+ Landscape -> 2208x1242
    • iPhone 6+ Portrait -> 1242x2208

Plays Well with Others

• The Responsive Web Design Artboards were designed for use with Adapt.js. Take a look at Adapt.js when you are ready to take the designs into web production.

• For help with designing native iOS apps, check out iPhone and iPad stencils.

Contributing

Feel free to download, submit your own artboards for inclusion into the set.