User Tools

Site Tools


ce4_creating_a_workspace

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
ce4_creating_a_workspace [2014/07/03 09:37]
matthew [Setting Up a Responsive Workspace]
ce4_creating_a_workspace [2014/07/03 09:50] (current)
matthew [Setting Up a Responsive Workspace]
Line 109: Line 109:
 ---- ----
  
 +===== Using the Responsive Workspace =====
  
 +We now have a responsive workspace! But how do we use it?
 +
 +Well, let's load a gallery and I'll walk you through it.
 +
 +Here's my standard preview:
 +
 +{{:​other:​viewport-standard.jpg|}}
 +
 +When I want to preview my design for wide-screen,​ I collapse the righthand panel:
 +
 +{{:​other:​viewport-wide.jpg|}}
 +
 +When I want to preview my design for iPad or similarly sized tablets, and reveal the righthand panel and press **SHIFT-F** to enter windowed screen mode:
 +
 +{{:​other:​viewport-ipad.jpg|}}
 +
 +The height is wrong, but its the width that's important. If this makes you unhappy, then just pull the window taller.
 +
 +When I want to preview my design for iPhone or similarly sized mobile devices, I enter windowed screen mode and reveal the lefthand panel:
 +
 +{{:​other:​viewport-iphone.jpg|}}
 +
 +To return to standard preview, I hide the lefthand panel and entire full-screen mode again.
 +
 +So that's the responsive workspace, giving you a reasonably good idea how your gallery ought to look on the wide variety of modern, Web-enabled desktops and handheld devices. You are ready to DESIGN.
ce4_creating_a_workspace.txt ยท Last modified: 2014/07/03 09:50 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.