Mobile Websites and Apps: What’s the Difference? 

Mobile apps are applications that are downloaded and installed on a mobile device, rather than being accessed through an Internet browser. Users visit device-specific portals, such as Apple’s App Store, Android Market or Blackberry App World to find and download apps for a given operating system.

A mobile website is basically a simplified version of the main website that is accessed via the Internet. To learn more about mobile websites, please read Mobile Website Development Best Practices by Malyna Senger. Below is an example of the CNN standard and mobile website pages.

In general, a mobile website should be considered your first step in creating a mobile online presence. Apps are useful for creating applications for a specific use that cannot be accomplished using a web browser.

Advantages and Disadvantages of Mobile Websites and Apps:

1. Availability and compatibility: Mobile websites are available to users across a variety of devices via Internet browser. Users must access app stores specific to their operating system in order to download and install apps prior to being able to access the content.
2. Ability to update: Changes to mobile websites are visible to all users as soon as content managers publish them. Updates for apps must be first approved by the market (app store administrators) and then downloaded by the users before changes are accessible.
3. Accessibility: Mobile websites can be accessed through search engine results or industry-specific directories. For the most part, apps are only accessible through app stores. Mobile websites require users to have Internet connection, while some apps can work in offline mode.
4. Reach: Mobile website URLs can easily be shared by users via a link. Apps cannot be shared in this way, but as they are purchased through the phone manufacturer’s app store, they are easily visible to consumers.
5. Cost: Mobile websites are cost effective, as its ‘one-site-fits-all.’ App may need to be developed to be available for a number of different operating systems, which can greatly increase costs.

What is Responsive Design?

Responsive design is a relatively new web development technique wherein the layout of a website automatically changes according to the size of screen that it is being viewed on. So whether you are viewing the website in a large desktop or a small mobile device, the width of the content frame will adapt. An example of content adapting to different screen size is included below:

 What is a Mobile Website?

A mobile website is basically a simplified version of the main website that is optimized for the smaller screen sizes, higher data costs and lower bandwidth speeds of mobile devices. Furthermore, the content may have been modified with consideration to what content mobile users want. A mobile website, for example, might only have a homepage, location page, and contact us page. To learn more about mobile websites, please read Mobile Website Development Best Practices by Malyna Senger.

Which is Better for my Business?

In order to decide whether using responsive design or creating a mobile website is better for you, three things need to be considered:

• Context: With responsive design, the same content will be available to everyone that visits your site, regardless of the device from which it is accessed. Mobile websites allow you to provide different content to mobile users.
• Content: Mobile devices are often challenged with weaker or slower signals, therefore it is important to include only necessary content on your mobile site. Although with responsive design you are able to restrict which design elements display on mobile devices, in most cases these features will still be downloaded and take up bandwidth. The more images, video and general activity that your site has, the more likely it is that you will be better off designing a separate mobile site.
• Costs and Benefits: Examine the costs of each option and compare with the value of your mobile visitors in monetary terms. Think ahead. By 2014, mobile internet should take over desktop internet usage. (source)

Source: KISSmetrics - Mobile Mania 2012

For information regarding mobile website development, please read Mobile Website Development Best Practices by Malyna Senger.

Since Facebook announced mass layout change to  Timeline for Pages on March 30th, many business and marketing professionals have come to recognize Timeline as a valuable marketing tool for businesses. Check out how Tidal updated our Facebook timeline design for some inspiration.

www.facebook.com/tidalinteractive

We believe the change with pioneer more creativity and user engagement between the pages (and their admins) and the people who support them. Below are the top 5 ways you can use Facebook Timeline to engage with your audience.

1. Large Magazine Style Cover Photo – It’s the first thing that visitors’ attention will be drawn to, so brands should focus on using an image that is memorable, representative and impactful.
2. Larger “ad space” for Posts and Highlights – This enables brands to distinguish their ‘best’ content.
3. Ability to Pin Posts to your timeline – This feature allows page owners to ‘pin’ stories at the top of their Facebook Timeline, where it will stay for 7 days. This is a great tool to promote sales, special offers or upcoming events.
4. Create More Customizable Facebook Applications – With the tabs located under the cover photo, brands now have the opportunity to give their pages some punch by choosing apps that are the strongest and most relevant for their brand. Tidal’s apps include Photos, Newsletter Sign-up, Likes, Map, Notes and Events.
5. Use Milestones to tell more compelling stories – Let visitors to your page grow with you – it will build an emotional connection and encourage repeat engagement.

Here’s is a handy infographic on the new layout dimensions:

source: jonloomer.com

Enjoy the new three-dimensional layout and use Facebook as a more engaging communication channel for your business. Please contact us if your have any questions on social media marketing at info@tidal.ca.

Best Practices for Creating Websites that Deliver Long-term Measureable Value addresses the need for strategic thinking behind websites in order to be competitive in today’s online market. It’s no longer enough simply to post information – companies that understand the online user experience and are able to translate that knowledge into web strategy achieve a competitive advantage that allows them to realize higher rates of return on investment. This session will inform participants how to create an effective website strategy and evaluate a website on a monthly basis.

The IABC World Conference is an annual event hosted in Chicago that brings together new ideas, winning case studies and best practices in communication. Over 1,400 communications professionals attend this conference to interact with new and returning speakers in dynamic and thought-provoking presentations, indulge in discussion-based sessions and expand their knowlege with the state-of-the-art research that the World Conference provides. In addition to serving as a great learning opportunity, this conference is also great networking opportunity, giving attendees a chance to expand their professional networks and build long-lasting business relationships.

This year, the theme of the conference is ‘Avant garde: innovative; experimental; pushing the boundaries for a 20/15 vision of communication.” The objective is for attendees to learn how to approach and adapt to the global business environment during the next three years and beyond.

Innovative… experimental… pushing boundaries… sounds like something Jason Lindstrom would know a thing or two about! Managing partner of Tidal, Jason was named one of the top three entrepreneurs in Canada in the CIBC Student Entrepreneur of the year awards during his academic career after founding Tidal. Since then, he has had over 10 years of experience in the web development industry and has been involved as a guest speaker for Simon Fraser University and the University of British Columbia, where he has presented on a variety topics, including web development practices and entrepreneurship. Sounds a lot like the key values behind Tidal’s Painted Picture as well…

Please take a look at Jason’s posts regarding the Painted Picture Parts 1, 2 and 3, and for more information regarding the IABC 2012 World Conference, please visit http://wc.iabc.com/

Do you know of an upcoming speaking opportunity? Contact or book Jason for a speaking engagement at speakers@tidal.ca.

When you click on an ad online, you are likely to be redirected to a page that looks like an ad. This is known as a landing page and usually features a  simple message and call to action. Landing pages are usually designed as part of a Pay-per-click campaign, but visitors may also stumble upon them from searching online or from social media links. Not to be confused with the homepage of a website, landing pages serve a different purpose as they are designed with a specific target in mind, commonly it’s to sell a product or service or encourage a user to find out more about it.

Capital One Landing Page. A clear message that a signing up for a credit card will get you what you need.

Capital One Homepage

Landing pages offer a background and message specific to the ad the visitor clicked on and an immediate way for the visitor to react, such as by signing up or subscribing, or even printing out a coupon. Homepages, on the other hand, usually contain very general information and different points of focus. When it comes to designing a landing page, the challenge is to earn visitors’ trust and convert them into fans with without showing a lot of content.

What does a landing page look like?

A landing page needs a great title or message to grab a visitor’s attention. With a great headline, you could address the visitor’s need or frustration or sell a product or service. The visitors have to be curious enough about what they’re looking at to seek more information and have their questions answered. It’s common for landing pages to have overview, images and a list of features about the message.

Sales Force offers a free trial of their product on the landing page

Some of the common interactions you can find on a landing page include:

• getting a discount,
• signing up for a newsletter,
• getting a quote,
• downloading a trial,
• locating the business,
• entering a contest,
• reading more about a specific product or service.

These actions are risk-free for visitors and do not require a lot of time or personal information. The average online visitor has a good sense of scams, so it is important to consider gaining their trust by not requesting a lot of personal information or making exaggerated claims about your product.  Some common ways to gain visitors’ trust is by providing testimonials from customers, showing official certification, and avoiding generic content and images. Keeping your landing page personal and consistent with your brand will make visitors feel comfortable and more likely to become customers.

Mint.com uses testimonials from well-known sources and security certification to communicate the reliability of their finance services.

What is a mobile website and why is it different from a normal one?

Basically, a mobile website is a simplified version of the main website. It’s not practical to expect your 1024 wide pixel website to look great and be usable on a three inch mobile screen. Also, due to data costs, bandwidth speed, and plug-in issues, flash elements and image/content heavy pages need to be stripped down to achieve a better user experience. Another techical consideration is that many mobile devices “speak” a different language – WML, instead of HTML for example. Lastly, normal browsing behaviour, such as mouse hoovering doesn’t apply, so mobile websites require unique user interfaces.

Why design a mobile website for mobile users?

The numbers speak for themselves:

In 2011, over 85 percent of new handsets will be able to access the mobile Web. Today in US and W. Europe, 90 percent of mobile subscribers have an Internet-ready phone.

Many mobile Web users are mobile-only, i.e. they do not, or very rarely use a desktop, laptop or tablet to access the Web. Mobile-only in Egypt is 70 percent, India 59 percent, even in the US this is 25 percent of subscribers (source). Still think you don’t need a mobile site?

“There are more than 200 million active users [40 percent] currently accessing Facebook through their mobile devices. People that use Facebook on their mobile devices are twice as active on Facebook as non-mobile users.” – Facebook official statistics (January, 2011).

Then, once mobile users visits your website, what do they see?

You may already have a beautiful, user-friendly website but ensuring that it looks the way you want it to on the numerous mobile web browsers is the challenge (the scrunch effect). In web design we try to optimize for the latest versions of IE, Firefox, Chrome, Safari – the list grows when you add in Android, iphone, blackberry, Motorola, Palm and Nokia devices. Simply put, a robust cross-device web design is hard to make.

Best practices for mobile web design & development

1. Redirect mobile users to the mobile version of the site.
Set-up a device detector to automatically redirect your mobile users so that if a mobile device user visits your site.com (ex. yvr.ca), then they will automatically be redirected to say, mobile.yoursitename.com or m.yoursitesname.com (Ex. yvr.ca/en/mobile).

2.  Let your visitors know that you have both a full and mobile version of the site available
For mobile users with advanced devices, reduce frustrations and give them a choice between the mobile or normal version by providing a link that will go to either version of the site. The footer is a good place for this.

3. Keep the layout simple
With such limited space to design in, plan on using a single column layout. Multi-column layouts often break because the content cannot span across the physical space of the viewport.

4. Avoid Scrolling 
Not all devices have the ability to adjust a web page’s zoom, and even on the iPad scroll bars don’t show up until you attempt to scroll. If you need to scroll, remember that primary real estate “Above the fold” applies here too – place the most important information at the top.

5. Incorporate large and easy-to-press buttons or links
If you have large fingers, you understand how exceptionally hard it is to type or click on a small link on the screen without having to zoom. Ensure you call to actions and clickable regions are accessible. Validate this through testing, testing, testing.

6. Reduce the amount of clicks required to acheive a task
This is a general usability rule that is even more important in mobile website information architecture. Keep in mind that mobile users are on-the-go or more time crunched than a desktop user, so try to keep imporatant information within 2 clicks.

7. Condense your text copy
With the screen size, memory, bandwidth, and scrolling constraints, it’s also neccessary to revise your website text to improve readbility on mobile devices. Remember, most visitors only ready about 20% of words on a normal website – so purge your website of excessive (fluffy) copy for the mobile version.

8. Scale back on large images/video/audio files
First, avoid formats, such as Flash, that aren’t compatible on many mobile devices. Don’t auto-play media – it may annoy the user and eat up their bandwidth. Also, be sure to optimally compress your files to speed up downloads.

Mobile website examples

Here are of some great mobile websites by Staples, Old Navy, Gymboree, and Aviva.

We hope you found this article helpful, if you would like to submit a story or story idea write us at guests@tidal.ca.

Canada’s official languages are English and French but in reality many people also communicate and engage in other languages such as Chinese, Arabic, Persian, Spanish and Punjabi, among others. For a business, this can provide a great opportunity to be more inclusive of specific target groups by catering to their language and culture. However, making information available in more than language can also be a challenge – you have to work with more content and figure out the best way to integrate it. Don’t forget the responsibility of expertly translating content into the other languages!

The “default” language used in Canada is English, but there are many websites such as new sources, government resources and sales listings that benefit from offering information in more than one language. With the progress of online tools, such as content management systems like Drupal, it is becoming less daunting to integrate several languages into a site. If you are considering adding multilingual functionality to your website, here are some things to consider.

Asia Pacific Foundation of Canada, developed by Tidal, is offered in English and French

Is the site multilingual or multi-regional?
Most companies that operate on a global or national level have multi-regional websites which direct customers to local information. Often, a customer has to select a region before even accessing the site. In such sites, the language changes depending on the region, but a person would have the option to change their language within the site. On the other hand, a multilingual site would only have several choices allowing you to change the language of a site regardless of the region.

Ask yourself: what are the languages?
The languages used may affect design and the framework used to build the website. The nature of the language plays a part as well; for example, are you dealing with a language that is written from right to left, in contrast with English? This may affect the navigation and layout of the website.

What is being translated?
If the whole site is being translated, you have to consider translating the interface and the content as different processes. Will the other languages offered have the exact same content or will it be edited? It is also good to think about how big the site is and how it will be updated. In the example below, the English site for Work Safe BC has a different layout than the options for the seven other langauges.

How are you building the site?
With the increased ease and accessibility of CMS frameworks like Drupal and WordPress, it is becoming the norm to create dynamic websites.  When it comes to multilingual functionality, this means that it takes less time to create and maintain a site because the content can be pulled dynamically instead of being edited manually from static files. Additionally, it is good to consider how dynamic features will change in a different language:  do you change the input language for forms? Do you translate ads?

Website for The Refinery developed by Tidal incorporates English and Spanish versions of the website easily managed in Drupal

There are many good reasons to have your website available in different languages, but it is important to consider how necessary it is and what support is available for multi-language features.

When we think of ecommerce websites, large-scale shopping sites like Amazon or Ebay probably come to mind as examples. Although these sites have a custom-built sales framework, adding ecommerce functionality is now easier than ever if your site runs on a content management system (CMS) like WordPress or Drupal. Over the past few years, ecommerce has become even more feasible for smaller businesses that require a basic, straight-forward service for their products or services.  For WordPress sites, we recommend using Cart66, an ecommerce plugin available in a free or premium package. Ubercart is a Drupal system that also offers great functionality and is also free.

Common features of ecommerce :

The shopping cart:

Online shoppers are mostly familiar with the interface of the shopping cart to manage orders and track purchases. Both plugins support the shopping cart feature and allow a certain level of customization for managing orders.

Promotions:

Shoppers often go online to get a better deal. The right ecommerce plugin can help you set discounts, promotions, and special offers, enticing customers to make a purchase.

Security:

Paypal has become the standard online payment system and integration of Paypal and other security features are important to consider when looking for an ecommerce addition to your website.

Conversion and Shipping:

Beyond placing orders and making payments, it is important to have shipping options available that can be customized to meet a shopper’s needs. For example, shipping to multiple locations, setting local currency and figuring out the tax by province or postal code are features that will simplify and enhance a shoppers experience.

Shopping online has become as easy as clicking a button, so how can we all benefit from the online market? E-commerce gives customers the option of shopping at their own convenience and gives businesses the opportunity to connect a wider target audience and integrate sales into their online strategy creating a win-win situation.

Who is shopping online and what are they buying?

According to Statistics Canada, about 39% of Canadians placed more than 95 million orders online in 2009, up by 7% from 2007. Even more shoppers go online to browse through and compare products on websites resulting in more in-store shopping. Age plays a role as well;  about two-thirds of these  “window-shoppers” are below 35 years old. In fact, about half of Canadians below 35 years old made an online purchase in 2009.

These days you can buy almost anything online, from clothing, electronics and other consumer products, to downloads and digital files (video, music, books). However, online sales are highest for services – especially travel and accommodations.

What do all these numbers mean?

Obviously, online shopping is a growing trend, especially among a younger customer base. Knowing how these different age groups interact online can inform a business’s approach to their e-commerce services, for example with the integration of social media or games.  But overall, the experience of shopping online has to be easy, secure and feel personal.