Ohlthaver & List: Mobi Site Audit & Responsive Design
Author: Shelley Mason
CONTENTS MOBI SITE FEATURES TO DATE .............................................................................................................................................................. 3 1.
THE AGE GATEWAY .............................................................................................................................................................. 3
TAFEL LAGER CONSIDERATION DRIVE AGE GATEWAY................................................................................................................... 3 2.
AGE DISCLAIMER .................................................................................................................................................................. 4
WINDHOEK LIVE 100% AGE DISCLAIMER ....................................................................................................................................... 4 3.
CELL PHONE REGISTRATION AND EMAIL ADDRESS AQUISITION ......................................................................................... 5
TAFEL LAGER REGISTRATION ......................................................................................................................................................... 5 OMAERE COMPETITION ENTRY ..................................................................................................................................................... 6 4.
LOGIN OR REGISTRATION THROUGH FACEBOOK ................................................................................................................. 7
SMIRNOFF TONIGHT LIFE LOGIN VIA FACEBOOK........................................................................................................................... 7 5.
QUERY FORM........................................................................................................................................................................ 8
SMIRNOFF TONIGHT LIFE HELP/CONTACT FORM .......................................................................................................................... 8 6.
FACEBOOK LINK ON A QUERY FORM.................................................................................................................................... 9
TAFEL LAGER HELP/CONTACT ........................................................................................................................................................ 9 7.
MENU ................................................................................................................................................................................. 10
SMIRNOFF TONIGHT LIFE MENU ................................................................................................................................................. 10 8. REFER A FRIEND ....................................................................................................................................................................... 15 VIGO REFER A FRIEND .................................................................................................................................................................. 15 9. TERMS AND CONDITIONS ........................................................................................................................................................ 16 OSHIKANDELA MANGO TERMS AND CONDITIONS ...................................................................................................................... 16 10. PERSONALISED USER EXPERIENCE USING ADVANCED BRANDTRIBE INTERGRATION ........................................................... 17 TAFEL LAGER PERSONALISED WELCOME ..................................................................................................................................... 17 FUTURE MOBI SITE FEATURES ............................................................................................................................................................. 18 1. BROWSER AND DEVICE DETECTION ......................................................................................................................................... 18 2. GEO LOCATION......................................................................................................................................................................... 18
1
Ohlthaver & List: Mobi Site Audit & Responsive Design
3. ACCOUNT LOGIN THROUGH TWITTER ..................................................................................................................................... 18 MOBI SITES OF INTERNATIONAL BRANDS – VISUAL DESIGN ............................................................................................................... 19 MARLBORO ...................................................................................................................................................................................... 19 SUN MAID ........................................................................................................................................................................................ 20 ABU DHABI OCEAN RACING ............................................................................................................................................................. 21 SOUTH AFRICAN MOBI SITES ............................................................................................................................................................... 22 SOCCER LADUMA ............................................................................................................................................................................. 22 DSTV ................................................................................................................................................................................................. 23 RESPONSIVE DESIGN FOR MOBILE ....................................................................................................................................................... 24 WHAT IS RESPONSIVE DESIGN? ....................................................................................................................................................... 24 DESIGN ELEMENTS ........................................................................................................................................................................... 24 1. OPTIMIZE THE LAYOUT OF YOUR CONTENT ............................................................................................................................ 24 2. ADAPT THE CONTENT TO SUIT THE SITUATION ....................................................................................................................... 24 3. THE NAVIGATION MENU .......................................................................................................................................................... 24 4. SIDEBARS .................................................................................................................................................................................. 25 5. IMAGE SIZE ............................................................................................................................................................................... 25 FUNCTIONALITY ............................................................................................................................................................................... 25 1. MEDIA QUERY .......................................................................................................................................................................... 25 2. APPLYING MORE SPECIFIC CONDITIONS TO THE TARGET DEVICE ........................................................................................... 25 3. TARGETING SPECIFIC DEVICES ................................................................................................................................................. 25
2
Ohlthaver & List: Mobi Site Audit & Responsive Design
MOBI SITE FEATURES TO DATE 1. THE AGE GATEWAY The age gateway is a legal requirement on all alcohol websites.
TAFEL LAGER CONSIDERATION DRIVE AGE GATEWAY Viewers are asked to enter their date of birth to gain access to the mobi site.
3
Ohlthaver & List: Mobi Site Audit & Responsive Design
2. AGE DISCLAIMER An age disclaimer is placed at the bottom of each page on the mobi site.
WINDHOEK LIVE 100% AGE DISCLAIMER There is an age disclaimer at the bottom of every page on the website.
4
Ohlthaver & List: Mobi Site Audit & Responsive Design
3. CELL PHONE REGISTRATION AND EMAIL ADDRESS AQUISITION Cell phone number and email address acquisition as been requested in two instances, the first is to register the user to the website so that they can access to it and the second has been for competition entry purposes.
TAFEL LAGER REGISTRATION People whom are not yet registered on the Tafel Mobi site are required to provide their name and surname, date of birth, cell phone number and the town they live in. In addition to proving account registration details, they are requested to ‘agree to the terms and conditions’ and to indicate if they would like to receive marketing communication from Tafel Lager.
5
Ohlthaver & List: Mobi Site Audit & Responsive Design
OMAERE COMPETITION ENTRY Competition participants are presented with a form which they have to fill in to enter the completion.
6
Ohlthaver & List: Mobi Site Audit & Responsive Design
4. LOGIN OR REGISTRATION THROUGH FACEBOOK When this function is used, people who want to enter the site can bypass filling in information form (see above), and can gain access to the site by login through their personal Facebook account.
SMIRNOFF TONIGHT LIFE LOGIN VIA FACEBOOK Users have the option of logging in with Facebook, or their mobile number.
7
Ohlthaver & List: Mobi Site Audit & Responsive Design
5. QUERY FORM Competition entrants or viewers of a website may submit their questions on an online form. Information requirements vary from brand to brand. If Advanced Brandtribe Integration is used, then the amount of information required form the user is minimized, as the integration function pulls the relevant information into the form. Users are also requested to agree that they agree to the terms and conditions and can be asked if they would like to receive marketing communication.
SMIRNOFF TONIGHT LIFE HELP/CONTACT FORM This feature allowed people to lodge queries about the competition. The mobi site was programmed to pull relevant data into the form via two platforms; Facebook login or user account login (email and mobile number verification).
8
Ohlthaver & List: Mobi Site Audit & Responsive Design
6. FACEBOOK LINK ON A QUERY FORM Users wanting to submit queries are given the option of submitting their query on the mobi site by filling in the form, or they can click on the brand’s Facebook link, and post their query there.
TAFEL LAGER HELP/CONTACT Users can log queries using this form, or post their questions on Facebook. Users name is pulled into the form using Brandtribe Advanced Integration.
9
Ohlthaver & List: Mobi Site Audit & Responsive Design
7. MENU Items on the menu are content dependant. Below is a list of common menu tabs: 1. 2. 3. 4. 5. 6. 7.
Home About (information about the brand) Competition (Information about the competition and how it works) Terms and Conditions Gallery Games/Fun Social Media
SMIRNOFF TONIGHT LIFE MENU Once logged in, users are presented with a menu, listing the different content available on the mobi site - Home page, The Party, Snapshots, The Crowd, Competition, Help/Contact, Terms & Conditions, Log Out.
10
Ohlthaver & List: Mobi Site Audit & Responsive Design
7.1 GAMES/FUN Branded wall papers and mobi games, this feature would be content dependant.
TAFEL LAGER GAME Registered users can play the Tafel Lager Mobi Soccer Game on the mobi site.
11
Ohlthaver & List: Mobi Site Audit & Responsive Design
TAFEL LAGER WALLPAPER Registered users can download branded wallpaper for their mobile handsets.
12
Ohlthaver & List: Mobi Site Audit & Responsive Design
7.2. GALLERY The gallery would contain photos of competition winners or events.
WINDHOEK AMBASSAOR GALLERY The gallery contains photographs taken at the 2012 Ambassador Launch Event.
13
Ohlthaver & List: Mobi Site Audit & Responsive Design
7.3 SOCIAL MEDIA Links to all social media accounts i.e Facebook, Twitter, Pinterest, YouTube.
TAFEL LAGER SOCIAL MEDIA ‘Social’ tab – Links to Tafel Lager’s social media accounts.
14
Ohlthaver & List: Mobi Site Audit & Responsive Design
8. REFER A FRIEND This feature requests that a competition entrant refers a friend, and supplies their contact details; name, surname, mobile number, email address.
VIGO REFER A FRIEND Participants are encouraged to refer a friend to enter the competition.
15
Ohlthaver & List: Mobi Site Audit & Responsive Design
9. TERMS AND CONDITIONS If the terms and conditions is not listed as a tab on the menu, another option is to place a link at the bottom of every page on the mobi site.
OSHIKANDELA MANGO TERMS AND CONDITIONS
16
Ohlthaver & List: Mobi Site Audit & Responsive Design
10. PERSONALISED USER EXPERIENCE USING ADVANCED BRANDTRIBE INTERGRATION Personalised user experience can be implemented when a registered user logs into the account, and they are ‘welcomed’ to the mobi site via their name. Submitting queries online can also be personalized, whereby name contact details are automatically filled in on the form.
TAFEL LAGER PERSONALISED WELCOME Once logged in, a personalized welcome is placed as a header at the top of the page. This personalization is done using advanced Brandtribe integration technology.
17
Ohlthaver & List: Mobi Site Audit & Responsive Design
FUTURE MOBI SITE FEATURES 1. BROWSER AND DEVICE DETECTION A mobi site is designed and developed so that when users log on to the mobi site, their screen adjusts to display correctly on the device they are viewing it from.
2. GEO LOCATION The mobi site is coded so that geographical location of the user accessing the website can be detected.
3. ACCOUNT LOGIN THROUGH TWITTER Users will be able to login to the site using their Twitter accounts, as is the case with Facebook.
18
Ohlthaver & List: Mobi Site Audit & Responsive Design
MOBI SITES OF INTERNATIONAL BRANDS – VISUAL DESIGN MARLBORO The design of this mobi site is at a very clean and effective, steering clear of clutter. The look and feel of the Marlboro brand is experienced immediately as the brand character has been carried through to its entirety.
https://www.marlboro.com/gconnect/login_input.action
19
Ohlthaver & List: Mobi Site Audit & Responsive Design
SUN MAID This Sun Maid mobi site design is simple, and the product offering can be determined immediately. Also the link to their Facebook page is on the landing page of the mobi site, making it easy to find. There is a high possibility that this would increase traffic to their Facebook page.
http://m.sunmaid.com/
20
Ohlthaver & List: Mobi Site Audit & Responsive Design
ABU DHABI OCEAN RACING The tab based menu design for this mobi site does not immediately show case unique brand content that may be available on this site, yet the lifestyle image used is engaging and immediately tells you what the brand is about. Links to their social media accounts are immediately distinguishable from the rest of the content on the mobi site.
http://www.volvooceanraceabudhabi.com/mobile/
21
Ohlthaver & List: Mobi Site Audit & Responsive Design
SOUTH AFRICAN MOBI SITES SOCCER LADUMA No Screen shot was available for their mobi site, but they are rated as one of the top ten South African mobi sites by the DMMA.
http://www.soccerladuma.co.za/
22
Ohlthaver & List: Mobi Site Audit & Responsive Design
DSTV This mobi site has been rated as one of the top ten South African mobi sites by the DMMA.
http://mobi.dstv.com/home
23
Ohlthaver & List: Mobi Site Audit & Responsive Design
RESPONSIVE DESIGN FOR MOBILE WHAT IS RESPONSIVE DESIGN? When a website is responsive, the layout and/or content responds (or, adapts) based on the size of the screen it’s presented on. A responsive website automatically changes to fit the device you’re reading it on. Typically, there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop (or laptop), the tablet, and the mobile phone. Important questions to ask when considering responsive design for mobile devices: 1. How will people use their mobile device on the site? 2. Has emphasis been placed on content rather than graphics or navigation? 3. Have relevant options been provided for exploring and pivoting? 4. Has the design and content maintained clarity and focus?
DESIGN ELEMENTS 1. OPTIMIZE THE LAYOUT OF YOUR CONTENT If one is browsing a site from a mobile phone, there is generally not a lot of screen size to work with. Phones today will typically zoom out automatically, so that the entire website can be seen onscreen. This can be good, as it gives the reader access to the entire sight, but it can also be frustrating when trying to find information that is located in a tiny part of the upper right of the screen. To counter this, one needs to play around with the location of things like images on the site. 2. ADAPT THE CONTENT TO SUIT THE SITUATION There are benefits of having differing content presented to people in different screen viewing circumstances. This is because as a rule, people tend to use the easiest and quickest route available to gain access to information. For example, a person at his office desk would view a restaurant’s website from his/her desktop. Asthetics of the website are important here because chances are that they want to get an idea of the restaurants ambiance, look and feel and general quality. Someone browsing from their mobile phone is possibly o the go and not near a desktop, so the information they’d want would differ slightly. Therefore the information that they want would be things like; location, open and close times, contact details and a menu list. This information should be clear and easy to find, when viewing the website from their mobile device. These are deliberate generalizations, but are worth taking into account when looking at responsive design, and the content that is available on the mobile device. 3. THE NAVIGATION MENU The navigation menu is quite important on a mobile device as it can get in the way of a fluid reading experience. Most responsive sites have chosen one of two routes: they either hide the menu altogether with javascript and then allow it to appear on press, or they move it to the bottom of the content and have an anchor attached to it at the top.
24
Ohlthaver & List: Mobi Site Audit & Responsive Design
A third option would be to design a navigation menu that takes into account both the device and the situation the reader is in. For instance in wide screen mode, the menu bar could have a helpful description about what each link on the menu is about. But should the pixels get smaller, i.e. the screen estate become smaller, the navigation remains the same but splits in two instead. This is to maintain the same clarity you would get on a desktop view. 4. SIDEBARS Sidebars should be able to relocate around site content, and even disappear, based on pixel size. 5. IMAGE SIZE The maximum screen size would be used on which to place the image; this is so that it can be resized to accommodate a smaller screen. Pixel size is based solely on the type of device it is being viewed on. Therefore the site should be design to accommodate most devices to make the user experience easy and pleasant.
FUNCTIONALITY 1. MEDIA QUERY When designing responsively the first goal is to identify the device the page is loading into. Once the device is known, the media query can be auctioned. A media query consists — essentially — of a media type and an expression to check for certain conditions of a particular media feature. The most commonly used media feature is width. By restricting CSS rules to the particular width of the device displaying a web page, the page’s representation can be tailored to devices (i.e. smartphones, tablets, netbooks, and desktops) with varying screen resolution. Certain conditions have to be met for tailoring to be successful.
2. APPLYING MORE SPECIFIC CONDITIONS TO THE TARGET DEVICE Depending on the identity of your target device, you can vary the conditions and results. A particular mobile device can be targeted and different styles can be set to render within in it depending on whether the device is being held in landscape or portrait mode.
3. TARGETING SPECIFIC DEVICES Media queries can also be used to target certain devices. If the exact identity of the target device is known and certain deliverables are required when the website loads within it. For example, using a media query, a specific mobile device that could be targeted is the iPhone 4. It has a specific pixel ratio and uses a specific browser. With those specs in mind, specific conditions to match that particular phone.
25