This post is also available in: Français (French)
Now that you’ve built your first responsive website, it’s almost time to publish. The last step is testing your site’s pages to make sure that they all work properly before publishing to go live.
Review Your Website
There are some easy ways to get a quick idea if your site’s going to look great on any device it’s viewed upon. Just move the right hand edge of the EverWeb app window to the left to reduce the width of the app and the Editor Window. The page will automatically adjust so you can get a rough idea as to how it will look on a tablet and mobile devices. To see more of the Editor Window and less of the EverWeb UI, either hide the UI altogether using the Window-> Presentation Mode menu option, or just hide the Inspector Window, using the Window-> Hide Inspector menu option.
Good To Know Tips
Here are a few tips to help you with some of the most common issues that crop up when reviewing a site before publishing…
- Objects don’t appear responsive. For example, you may have added a FlexBox widget to the page but when you view it on a mobile device it doesn’t scale at all to suit the device it’s being viewed upon. If this happens, select the widget and check that ‘Full Width’ has been selected. Most often this is the problem. Although objects may appear to be full width, sometimes it is necessary to check that they actually are full width!
- The edges of the page are right up against the edges of the browser. EverWeb includes a ‘Margins’ option in the Metrics Inspector so just set left and right margins and your page will be away from the browser’s edge.
- Content is too near the edges of the page. Make sure that the width of your content is suitable for all devices e.g. on mobile devices, you probably want content to be about 300-350px wide. Also bear in mind that adding margins to the left and right hand side of the page will reduce the width for the content itself, so you may need to adjust widgets and/or content accordingly.
- Do you need to use a Responsive Row widget? Often the Responsive Row widget is used when it is actually not needed. Most widgets, for example, work as full Width objects in their own right so a Responsive Row object is not needed.
- Consider Maximum Content Widths. EverWeb 2.9 allows you to set a maximum content width for objects using the Metrics Inspector and you can also set the maximum content width for objects contained in a Responsive Row widget via its Widget Settings.
- Navigation Menu does not stick to the top of the page. If you have the Navigation Menu widget inside a Responsive Row widget, make sure that the Responsive Row widget is set to ‘Fixed Position’ in the Metrics Inspector. If you have set this on the Navigation Menu widget, it will not work as the widget sits above the Responsive Row widget, so it’s the Responsive Row widget that needs fixing in place.
- Content slides over the Navigation Menu widget. Make sure that you have checked ‘Always on Top’ checked in the Metrics Inspector, again for the Responsive Row that the the Navigation Menu widget is a part of.
Testing Your Pages
As per usual in EverWeb, use its Preview function and select the browser that you want to test your website with. Most browsers come with a Responsive Design Mode that allows you to test your pages against all device sizes:
- Safari: To access Responsive Design Mode, first go to the Safari-> Preferences menu. Click on the Advanced button and then tick the box next to ‘Show Develop menu in menu bar’. Close the Preferences. You will see the Develop menu on the menu bar. Use the Develop-> Enter Responsive Design Mode option when testing your website. Responsive Design Mode will show you different Apple devices that you can test your site against.
- Firefox: Select the Tools-> Web Developer-> Responsive Design Mode option. You can then select the height and width of the page as desired.
- Google Chrome and Opera: With Chrome go to the View-> Developer-> Developer Tools menu option. The browser window will change the page displayed on the left of the screen and the developer tools on the right. The second icon from the left of the right hand window is the ‘Toggle Device Toolbar’ which toggles the view of the window on the left side between mobile and desktop views.
- Opera: This web browser’s Responsive mode works in the same way as Google Chrome. However you start by accessing the Developer-> Developer Tools menu instead of the View-> Developer ->Developer Tools menu.
Once you have previewed and tested your website, you’ll be ready to publish your responsive website once you’ve completed any changes that your testing has revealed!
If you have any comments, suggestions or questions about this post or any of the others in the series, please do let us know below in the Comments Section.
This post is also available in: Français (French)
Wow! Super helpful and timely! I just published 2 days ago and having the exact problems with the Nav Burger. Going to try these fixes out! Woot!
Carlos