Knowledge Base

Answers to Common liveSite Questions

Back to Knowledge Base

 
Site Design

liveSite v8 Mobile Site Design Features

We are please to introduce mobile website design capabilities built into liveSite v8. Now you can create a completely new mobile version of your existing liveSite website without compromising ease of use, creativity, or flexibility.

Background

There are a myriad of solutions for mobile design, so we wanted to explain our view of it to help you understand what to expect as you build your mobile version of your website. We spent a great deal of time deciding what a mobile website should be and not be, and how to make it as seamless and easy to use as possible. After all, you shouldn't have to be a mobile app developer to create a spectacular mobile version of your existing website. There are a few predominate approaches to mobile design that are important as a backdrop:

  • One is to just take an existing website and run a software "converter" program to generate mobile versions of the pages. While this approach is very easy to do, it doesn't work with web application builders like liveSite that include e-commerce functionality, etc. It also lacks any real design control over the mobile site that is generated, and each time a web page is updated, the converter must be run again.
     
  • The second approach that is popular, but expensive, is to create a completely different website (pages, order processes, etc.), for each mobile device type. So for example, mobile phones (like iPhones, Android, Blackberry, Windows Mobile) might share one website due to the small screen size. Tablets (like iPads) would have a completely different website created due to a larger amount of screen space with with possibly support for gestures instead of mouse clicks. Desktop (computers) would have yet another website to support larger screens still, as well as mouse clicks and full size keyboards. Unfortunately, the benefits of finely tuned sites are overshadowed by the need to make updates across 3 completely different websites. This approach requires custom programming expertise for each device type, coordination, and time.

Our Approach

Our approach is to simplify the process of making updates to only one website for both desktop and mobile devices, reducing the number of different pages that must be created and maintained, and provide an environment where web designers could still create variations in their designs quickly to improve usability for their site visitors.

There are only two logical web page formats that are truly necessary for mobile design:

  • Desktop formatted web pages to support computer screens and tablets (which are considered smaller desktop screens), and 
  • Mobile formatted web pages (any web browser screen small enough to fit in your pocket, e.g. mobile phones). By simplifying web design into two distinct logical screen formats, we could focus on building a solution in liveSite that mirrors this simplicity. 

v8-page-request-diagram.png

 

Desktop Design vs. Mobile Design

So if you are familiar with liveSite, you'll know that the basic building blocks of any liveSite web page is it's:

  • Theme (for typography, graphical styling, spacing, etc), and it's 
  • Page Style (for layout and content assortment).

In liveSite v8, we now consider these existing terms to mean "Desktop" Themes and "Desktop" Page Styles. So in order to provide the same flexibility for mobile web pages, we have created Mobile Themes and Mobile Page Styles. Now each liveSite can have an active Desktop Theme and an active Mobile Theme, and each Page can have a Desktop Page Style and a Mobile Page Style.

Mobile Themes

Now in liveSite v8, you could share the same Desktop Theme to display your pages, but due to the smaller screen size of mobile devices, you will want to make some changes to the Theme. For example, the default site template for v8 contains a mobile theme where the layout of the content is allowed to fill the screen width. This is the only change that is really a necessity, although larger buttons, fonts, and other enhancements can be made to improve the experience for your mobile visitor's thumbs.

Mobile Page Styles

In v8, we also introduce Mobile Page Styles. It is important that your Page's can change their layouts and content when displayed on a mobile phone screen. For example, if you have a page with sidebar content on it (which is perfectly acceptable for desktop viewing), you will find that there is no room for the sidebar on a mobile phone screen, so you may want to hide the Page's sidebar for mobile viewing. Another example is the website's main menu. Typically, the desktop version of your pages will have a drop-down menu at the top, with perhaps many menu options. This is a great idea when you have a computer screen to fill, but on a mobile device, there is not enough width to hold the menu, nor thumbs small enough to click into them, nor patience enough for your site visitors to scroll down beyond the menu as they browse your site from their small screens. So with liveSite v8, you can create your own Page Styles, different for every page if you want, so you can replace the drop-down menu with a thumb-friendly accordion menu, perhaps with limited options, and placed on the footer of each mobile page. The point is, if you want to create a great mobile experience for your mobile visitors, you can.

 

Mobile Switch Region

If you are a liveSite Software Subscriber (VIP), your site will automatically detect the device visiting your site and change to the mobile version of your pages automatically.  However, others that want to take advantage of the mobile design capabilities of liveSite, or for certain phones that might be incorrectly detected, we have included a new region for your Page Styles, called the "Mobile Switch" Region. You can drop this region into your Desktop and Mobile Page Styles and your site visitors can toggle between mobile viewing and desktop viewing. liveSite will even remember their last visit from the same device and set the mode automatically for them when they return!

Mobile Preview Mode

So now that you are familiar with the elements of liveSite's mobile design capabilities. You may want to know how to build and preview your mobile site from the comfort of your desktop computer. Well, your liveSite control panel can now be toggled into either "Mobile Preview Mode" or "Desktop Preview Mode". Desktop Preview Mode is the mode you would be familiar with in liveSite already, viewing and building your site with your Desktop Themes and Desktop Page Styles. Mobile Preview Mode is new, and with the click of a button, you can preview your pages through your Mobile Themes and Mobile Page Styles. This makes building and testing your mobile site quick and easy, without even the need for a mobile phone!

Try It!

Not only will liveSite use your Mobile Theme and Mobile Page Style, it will also output variations on the software-driven content for each Page Type. For example, the login/register page would typically display two input panels for login and registering, side by side on the desktop, but for mobile devices, these are stacked one on top of the other. liveSite will also increase the size of radio buttons, checkboxes, and even fill in fields (thumbs are important digits too!).

Now you may be wondering what mobile devices do we detect and how well do we support them. Well. for starters, there are over 6,500 different mobile phones that are still connected. It is simply not practical to detect and support them all because most don't have web browsers on them that are sufficient enough to display your web page correctly, no matter what we attempt to do. And since mobile devices have a much shorter shelf life than computer monitors, going too far back to support "dumber" phones makes little sense. The good news is that over the last several generations of mobile phones, mobile browser standards have emerged (just like what has happened to desktop browsers), so we can confidently support most of the newer smart phones that have hit the market since the first iPhone. So if the visitor is a newer mobile (phone) device such as an iPhone, Android, Blackberry, Windows Mobile, etc., liveSite will use the active Mobile Theme along with the Page's Mobile Page Style to display the Page.

Just browse, shop, and checkout on our sandbox site at http://sandbox.livesitehost.com/ using your mobile phone, click on the "Mobile Site" button and to see the pages reformat themselves for your mobile device!

Automatic Device Detection & Retention
In you upgrade to a liveSite Hosting Plan or a liveSite Software Subscription, we have added an additional layer of goodness so your liveSite will detect the visitor's device type and display the appropriate page layout and content automatically, even upon their return visit to your site!

UPDATE: With liveSite v9, you can also implement fully responsive designs using a single Page Style and Theme for all devices!

 


 
Add Feedback:
Was this page helpful? Please let us know how we can improve it.
Please login or register to add your feedback.