Community Membership

This video is available with a RapidWeaver Community subscription. Signup and get instant access to all our videos, priority support, discounts and more.

Monthly $25 Yearly $240 Lifetime $399

Subscribing is quick and easy — you'll have access in less than two minutes. Cancel anytime, no questions asked. More information.

Advanced Responsive Preview

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.

Comments

Turtle

1 year ago

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.

bencounsell

1 year 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.

Video Details