-
Notifications
You must be signed in to change notification settings - Fork 0
Device preview
This page provides proposals for how to add mobile device silhouettes to Maqetta's "preview-in-browser" feature.
Today, if you preview-in-browser, the user will see a raw/naked preview of his HTML page where the page runs in the browser directly. (Versus when in authoring mode the page is rendered via the Maqetta page editor, which does various minor manipulations on the user's page that are necessary to for Maqetta's various authoring features.)
This approach is mostly OK for desktop UIs, but problematic for mobile UIs. If your browser window is 800x800, then the mobile UI will be rendered in the 800x800 browser window, usually stretching to the full width of the page. This isn't a useful preview of mobile UIs. Instead, we really should be previewing inside of a device silhouette, and go beyond that to offer multiple simultaneous preview (e.g., show iPhone and Android cell phone previews side-by-side).
But even for desktop UIs, our preview-in-browser has a major shortcoming in that often a user will want to preview in a variety of predefined browser windows sizes (e.g., 1024x780, 800x600, etc) and be able to conveniently switch at preview-time among those various sizes. Also, is a common that authors are creating the UIs for web components such as a portlet or a gadget, in which case they will want a fixed size container (e.g., 200x300) within which the preview should appear.
Right now, the URL bar in the browser during preview-in-browser shows the URL of the user's HTML page within his cloud-based workspace. For example: http://maqetta.org:55555/maqetta/user/[email protected]/ws/workspace/file1.html. To preview inside of silhouette, we will need to point the browser to an outer HTML file that shows the device silhouette and then renders the user's HTML file into a strategically placed IFRAME that superimposes the silhouette.
Therefore, the URL bar will probably need to look something like this:
http://maqetta.org:55555/maqetta/preview?url=user/[email protected]/ws/workspace/file1.html&devices=ipad,iphone
where:
- the first part of the URL (http://maqetta.org:55555/maqetta/preview) tells Maqetta to open up a special outer HTML file that shows one or more device silhouettes
- the second part indicates the file to load (user/[email protected]/ws/workspace/file1.html)
- the third part lists the device silhouettes to use at initial viewing time (devices=ipad,iphone)
If we use the above approach for URLs, then we could have /maqetta/preview redirect to a preview.html file that provides whatever UI we want to deliver for device previews. This preview.html file could provide multiple simultaneous previews and could also offer some of the desktop-related preview options (e.g., emulate 800x600 browser window).