EverWeb Widgets

Mobile Redirect

The EverWeb default redirect is available in the Page inspector and redirects visitors whose device screen width is 700px or less to the mobile version of the site. This is convenient for those who are creating fixed width sites but not so much for those who are creating a semi responsive full site and a responsive mobile site.
The downside to using the EverWeb method is that, if the full site content width is greater than 800px, it will appear squeezed down in size when viewed on a tablet device in portrait mode and be difficult to read.
If the mobile site is created at the default with of 480px, it will not look too good on tablet devices or phones in landscape mode and will be hard to read when viewe on the smallest iPhone in portrait mode.

Semi Responsive Full Site

A semi responsive full site is created with Hero widgets or Hero widgets plus one responsive widget. It can be full width when viewed on computers and laptops and will remain responsive down to the width of an iPad in portrait mode.
Unlike the fixed width method, it will not squeeze the layout down to fit the smaller screen but will adapt the layout to its size.
For best results, a semi responsive full site should be combined with a fully responsive mobile site.

Responsive Mobile Site

In view of the fact that iPhones vary in screen size from 734px for the largest one in landscape mode down to 320px for the smallest in portrait mode, it can be seen that a fixed width content of 480px is, at best, a very limited compromise.
The Mobile widgets allow the maximum width to be set at any value and the default is 739px. This ensures that all visitors using mobile phones of any size see the content clearly without any reduction in size.

Redirects

Visitors are directed to one version of the site or another based on the screen width of their device. The easiest way of doing this is to use javascript inserted into the Head Code box in the page inspector.
The point at which the switch is made is the break point and is shown in blue in the code below and the URL of the mobile page is marked in red.
Full Site Redirect

<script type="text/javascript">
if (screen.width <= 739) {window.location = "http://m.website-name.com/page-name.html";}
</script>

It's also a good idea to let the search engines know that there is an alternative version of the site by inserting this into the Head Code box.

<link rel="alternate" media="only screen and (max-width:739px)"
href="http://m.website-name.com/page-name.html">

Mobile Site Redirect
Note that this has the same break point value but uses the "greater than" symbol and the link is to the full site page.

<script type="text/javascript">
if (screen.width >= 739) {window.location = "http://website-name.com/page-name.html";}
</script>

This is inserted for the benefit of the search engines …

<link rel="canonical" href="http://website-name.com/page-name.html">

There is a widget available in the Mobile Elements section which will make it quicker and easier to insert redirects.

© EverWeb Widgets -