Mobile & Responsive Websites

To display correctly on mobile devices, a website design needs to include code that defines how it displays on smaller screens. Sidebars and navigation items are often altered for a better experience on smaller devices, and the layout shrinks down to fit appropriately in a smaller area, eliminating side-scrolling and zooming.

Synergy 8 supports two approaches to mobile-friendly websites; A fully responsive website or a separate mobile specific website design. The approach chosen for your particular scenario will mostly depend on the method your website designer is comfortable using.

Option 1: A Fully Responsive Website Design

A fully responsive website design is a "one size fits all" approach. The desktop design will shrink all the way down from a large desktop display to a mobile resolution. This approach generally increases the load time of your website, as the mobile and desktop styles all need to be downloaded.

Most purchasable templates and free website designs use this approach, as it is generally less time consuming to code a responsive website than two separate designs.

Option 2: A Separate Mobile Specific Website Design

Synergy 8 can detect mobile devices and display an alternative, mobile-optimized website design which scales to fit the available screen area. To see this method in action, trying opening the Synergy 8 website on your mobile device. The mobile design is completely different to the desktop version.

Websites which use a separate mobile and desktop design are generally much faster than responsive websites on other platforms. This approach is also preferred if you are adding mobile friendliness to an existing website.

Maintaining Content On Mobile Websites

If you have a mobile compatible website there's a few things you'll need to be aware of as an admin user: 

Use Less Tables - Small mobile phone displays don't play well with large tables. Tables with more than two columns will likely spill outside of the area they are allocated, making your page look broken. When you have a mobile design enabled, try to limit using tables.

Check Your Images - Mobiles generally have a slower download rate compared to desktop, so try to limit the use of very large images on your mobile site. If an image is displaying too large for your mobile site, try removing its height and changing its width to 100% instead of a set size.

Update Both Designs - If you're using separate mobile and desktop designs your website designer will need to remember to alter both the mobile and desktop variations of your design. As an example, if you're updating the social media icons on your desktop design, don't forget to update your mobile website as well.