Mobile Website Showcase

Click the wireless icon at the top left to view the mobile version of this website.

JQuery Mobile

JQuery mobile is based on the latest HTML5 and is compliant with all the latest mobile device platforms. It allows complex functions with a minimum amount of code. This results in faster loading sites on cell phone networks with advanced features that allow a lot of information to be displayed in very compact layouts.

Using accordian style panels that open and close to the finger touch, the one page website is now possible since each panel can display a list of items which can each be opened in a new sub page or popup window.

Although the touch interface is specifically for mobile devices, the website design in the demo has been modified from the original so that it will display well on personal computers too.

The demo shows some of the many features available for displaying products, services and information. Custom buttons are used to quickly return visitors to the top of the page, or send them on to the next, without having to scroll. The media page touches on the possibilities for showcasing images, movies and music.

The theme colors can be customized and its possible to mix and match styles to quickly create multi colored designs.

Liquid Mobile

This design uses a liquid layout that flows to fit any mobile device width. Most designs of this type waste valuable space by allowing the navigation to flow across the page on wider devices. This one locks it to the width of a smart phone screen so that, when viewed on tablets or personal computers, the content can flow to the top of the page.

Unlike most liquid layouts, this one is also locked to a maximum width suitable for viewing on computers. This means that one size can fit all and saves the cost of having two versions of the website - mobile and conventional

Apart from facilitating access to the various pages, the navigation also contains special input buttons for mobile devices to make it easy for users to phone, email and fill out a contact form.

The demo includes many of the features available with this kind of design...

Photos that expand and contract with device width

Elastic and fixed size movies

Single track and playlist style audio players

A finger swipe slideshow

Responsive Google map

Contact form which launches the mobile device keypad

Swipe

Swipe is an excellent system for creating a compact, one page mobile website.

The page consists of header, footer, contact information etc which remain on the screen throughout.

The “pages” consist of slides which can be finger swiped or navigated using the “previous” and “next” buttons.

The slides act like pages of equal height and a width that adapts to the device width.

Smart phone users can quickly finger swipe through the pages with a minimum of scrolling.

The demo features a restaurant business with sliding menus, location map and contact form. Contact buttons for Phone and Email remain static on the screen for easy access at any time.

This design is ideal for almost any type of retail or service business. It is very compact, easy to navigate and can accomodate as many slides as desired. The content is automatically centered so the website can replace a conventional one as it can be viewed on home computers as well as mobiles.

Folding Columns

When viewed on a personal computer or laptop, this design appears as a conventional three column layout. As the browser width decreases the columns collapse to show two on tablets like the iPad and one on smart phones.

The content is self balancing by flowing from one column to the next just like in a newspaper or magazine. The demo will illustrate this a lot better than a thousand words!

When trying out the demo, notice how the column width is also flexible and the images are self adjusting. The maximum width is set so that the content width stops expanding at a certain point when viewed on personal computers.

The demo uses the example of a real estate page showing featured properties. Using this type of layout, adding new content and deleting outdated material is easy since the page doesn't have to be reformatted. This design is a good choice for displaying sale items, limited promotions and blowouts.

Real estate sites can be enhanced by providing mobile apps for potential customers to search the MLS listings. Contact EzMac Web Design for more info about this service.

Accordian Sliding Panels

Using this method its possible to build a compact, one page mobile website.

Each page of this mini site is contained in a panel that slides open when its header is touched or clicked. As one panel opens, the previously opened one closes.

As can be seen from the demo, the content of the individual panels can be anything reqquired. It will accommodate text, images, slideshow, movie, audio player, contact form and interactive map.

Its small footprint belies its capability for displaying a large amount of information. By using a few panels with slideshows, dozens of products can be displayed and all the individual photos can be reached from the main navigation with a finger tap and a few swipes.

Just like the others shown here, this design has been made to expand and contract to suit the screen size of various types of mobile devices and is suitable for viewing on desktop and laptops as well.

Musicians & Performing Arts Website

This demo shows how a musician, film maker or other type of performing arts website can be put together.

The movies demonstrate the use of HTML5, Vimeo and YouTube players. These video players are flexible and adapt in size to the width of the device.

Music players with the tracks arranged in Stax behave like a playlist jukebox style player on portable devices such as iPhone/iPad since one player turns off as another is selected.

Separate panels are used for each album or single release and these include a demo track and buttons linking to the appropriate buy pages on CDBaby and iTunes.

For those who would like to learn how to release their own songs and get them onto the internet via iTunes, the Vimeo movie features an ebook which goes through the steps required to sell songs on the world wide web.

Click HERE for more info...

Back to the top of the page...