Mac SEO Blog

The previous blog posts in this series have explained in detail how to prepare and build a responsive website in EverWeb, adding a blog to your responsive website and how to convert an existing fixed width website in to a responsive one.

When developing a responsive website, one crucial element you must bear in mind at all times is the testing of your page design. One of the most difficult development tasks is making sure that the responsive page you have created looks great on any device, from mobile to wide desktop and everything else in between.

Fortunately, EverWeb takes most of the hard work out of this process as the responsive page layout scales appropriately for all browser widths. From a design perspective you will still need to check that the page has the correct margins at any browser width, that objects on the page are always spaced appropriately, both horizontally and vertically and that images and other media display consistently at all times.

Fine Tuning Your Responsive Page Design

EverWeb includes some useful tools to help fine tune your page design:

Margins: You can set the left and right margins of a full width object in the Metrics Inspector. In EverWeb version 2.9 you can also set the maximum width of a full width object so that it does not appear too strung out on desktop or wide desktop devices. For a Responsive Row widget, look for the ‘Content Maximum Width’ setting is in its Widget Settings.

Padding Options: Many of EverWeb’s widgets include padding options that help space objects so that they display better in relation to other objects on any browser. Remember that Padding options usually add vertical and horizontal spacing to the selected object.

Hidden Objects: EverWeb 2.9 recently introduced a new feature where you can hide objects so that they only display when you want them to. The ‘Show on Device’ option is available in the Metrics Inspector. Use the View menu to Show or Hide Hidden Objects on the page and secondary click in the Editor Window to quickly select any hidden object on the page using the ‘Hidden Objects’ menu option.

Breakpoints: You can override EverWeb’s own default page breakpoints and define your own instead. The Breakpoints options can be found below Show on Device in the Metrics Inspector.

Editor Window: You can always quickly see how your page will look at any browser width by reducing the width of the right hand side of the EverWeb app itself. As you do this, the Editor Window will automatically adjust giving you an idea of how the page scales. You can also use the Window-> Presentation Mode (or Cmd+period key) menu option toggle to hide the EverWeb User Interface if you want. remember when using Presentation Mode that you are still viewing the page in the Editor Window so the page can still be edited.

Previewing Your Website

Although you can quickly see how your page will look using the above mentioned options in EverWeb, it is usually better to Preview your site before publishing so that the page can be tested in different browsers. Some browsers include responsive options so you can test how your page will look on various device types or browser widths.

Apple’s Safari browser, for example, offers a Responsive Design Mode so you can see how your page will look on an iPhone SE, iPhone 8 and 8 Plus, iPad and Mac computer. To use Safari’s Responsive mode go to the Safari-> Preferences menu. Click on the Advanced tab and check the box ‘Show Develop menu in menu bar’. The ‘Developer’ menu will appear in Safari’s navigation menu bar. To use the responsive mode, select Develop-> Enter Responsive Design Mode. You can view the device you want to view the page on in either portrait or landscape mode. Just click on the iPhone or iPad icon  at the top of the widow to toggle the view.

Apple also offers the Simulator app as part of its Xcode app. You can download Xcode if you have signed up to access Apples Developer Program but bear in mind that the download is about 4.5GB. The Xcode app is free of charge to set up. Once you have downloaded Xcode you can install Simulator on your hard disk. Simulator does exactly that, it simulates Apple hardware environments such as Apple Watch, iPhone, iPad, MacBook Pro etc. For the purposes of testing your website, Simulator is probably overkill unless you are an app developer. Using Responsive options provided natively by web browser software is usually the preferable route as it is quicker and easier than using Simulator.

Publishing Your Website

Once you have finished testing the pages of your website, hit the Publish button! When finished remember to to test that all the pages work correctly, that all menus, buttons and other links function properly and that other features such as contact forms, shopping carts are also working as they should.

If you have any questions or comments about this series, please let us know in the Comments Section, we’re happy to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter handle @ragesw