Advanced Responsive Preview in Advanced Topics

Start Learning Today

Subscribe for just $10 a month and gain instant access to our entire library of RapidWeaver tutorials. New videos are added every week, meaning there's always something new to watch.

There's no long term contract, you can cancel anytime, no questions asked. Find out more.

Published on Feb 14, 2016

RapidWeaver has a very nice built-in way of previewing how you sites look at different widths (you just drag the side of the preview area to adjust the width), but it's not a 100% accurate representation of how your site will look an an iPhone, an iPad mini, or the new iPad Pro. So in this lesson we'll take a quick look at how you can use Safari's new “Responsive Design Mode” to get a better preview of how your site works across multiple devices.

Advanced Topics Series Continue your RapidWeaver learning by watching all the videos in this series!


Excellent! Another great video... keep them coming!!! :)

Extra Notes: Opera is almost exactly the same as Chrome, enable dev toolbar and the results are similar

Firefox has similar as well although nowhere near as fancy as Safari or Chrome.

  • Option click -> Inspect Element
  • Responsive Design mode (3rd button from left on right side) -> Choose layout from dropdown.

Written by Turtle 8 months ago

Yeah FireFox and Opera have some dev tools, but I find Safari's are the best for testing your site on Apple devices, and Chrome dev tools are the best for pretty much everything else.

Written by bencounsell 8 months ago

Our basic account is completely free. You'll be able to like & review addons and watch our free tutorials.