Preview and Inspect Websites on Actual Devices
Designing responsive sites for today’s multiple screens is just part of the workaday challenge. Viewing and testing the web content on actual devices is another often time-consuming, repetitive—yet totally necessary—struggle. The new Device Preview feature in Dreamweaver CC 2015 eliminates the struggle by providing direct, real-time mirroring to available devices.
How much of a change is this? Here’s my old workflow for previewing my Dreamweaver pages on my iPhone:
- Set up a testing server.
- Put page and all dependent files and assets on the server.
- Open Safari on my phone.
- Browse to the testing server web address.
- Review page and note biggest problem.
- In Dreamweaver, make a change to the CSS to address the issue.
- Save the page.
- Re-put the files.
- Refresh the mobile browser.
- Review page again.
- If problem not fixed, go to step 6; if it is, move on to next issue and return to step 6.
Here’s my current Dreamweaver CC 2015 workflow:
- Open Device Preview.
- Connect to phone.
- Review page for problems.
- Make necessary changes in Dreamweaver.
- View updated page on phone
- Go to step 4 to make any additional modifications.
With the Device Preview feature (and other enhancements I’ll note in this post), my testing process is literally half as many steps and easily 3 to 4 times as fast as before. What will I do with all this free time? Let me show you how it all works so you can add “too much free time” to your list of complaints.
Connecting to Device Preview
First, you want to make sure that any device you want to work with is on the same network as your main system. Since I routinely set my phone and tablet to use my in-house Wi-Fi, I’m good to go. Next, click the Device Preview icon , located on the right side of the Dreamweaver status bar to pop-up the interface.
The Device Preview UI is small but packs a lot of power by displaying the two methods for connecting any network-shared screen: QR code or URL.
- To use the QR code, scan the code with any QR code reader app on your device.
- To use the URL, enter the web address in your mobile browser or copy and paste it via a synced app such as iOS Notes. Click the file icon to the right of the Device Preview URL to copy the string to the clipboard.
Device Preview relies on an Adobe Creative Cloud service for pairing, so the first time you enable a device you’ll need to log in to your account if you’re not already. Once you’re in, your Dreamweaver page will appear on your device and the Device Preview pop-up displays a list of any connections. Hover over the device name and an informational screen is rendered on the device, showing the user agent (a.k.a. the browser or app) and other info including the extremely useful viewport size, exactly the width and height you’re dealing with.
Initially, you’ll want to simply review the web content on your device screen to ensure that all of your responsive changes are as expected. Inevitably, you’ll encounter things that aren’t as they should be. The usual strategy is to hone in on the problem areas as the first step toward identifying which page element needs to be adjusted, either in the source code or CSS. Device Preview makes this process slickly straight-forward by fully mirroring Dreamweaver’s Inspect mode:
- In Dreamweaver, click the Inspect Mode icon or choose View > Inspect.
When you then hover over a page element, the box model parameters (width, border, margin and padding) are outlined in the Document Window.
- The same outlines are rendered on the device screen.
Because you can easily see the margin (in orange) and padding (blue), you can quickly assess whether adjusting those values in the CSS will have the desired effect.
Inspect mode is reflected on all connected devices, so you can review the screens concurrently. When you’re ready to focus on one screen, click the Inspect icon adjacent to the specific device listing in the Device Preview UI. This will also have the effect of snapping Dreamweaver’s document window to the same width as the device screen; I’ve found this particularly useful when switching between portrait and landscape orientations.
To my mind, actually making changes is where the connectivity now afforded by Device Preview really shines. Any modifications you make on the Dreamweaver side take effect immediately on the connected screen. Let’s look at a couple of examples.
- In Dreamweaver, make sure you have saved your source and dependent CSS files and then double-click a text element in Live View to enter into Edit mode.
- Make any desired changes, like switching h2 content from “Adventures in repair” to “Adventures in repairing”.
- Click outside of the editable area to commit your update.
- The modified text is displayed on the connected device.
- Select an element in Live View to modify.
- In the CSS Designer panel, switch to Current mode, if necessary.
- With the desired selector chosen, update the CSS properties, such as changing the color of an h3 heading.
- Press Enter/Return or click anywhere outside of the property value to confirm the change.
- Both Dreamweaver and the device screen render the modified page.
It’s just as easy to work with Device Preview and multiple pages as it is a single page. Simply use the Follow Links choice under Live View Options to either Ctrl/Cmd-click or continuously click any link in your document; once the page is displayed in the document window, it will appear on the screen of any connected devices.
With the robust Device Preview feature in Dreamweaver CC 2015, your responsive pages will be ready for any design challenge, on any size screen.