User Interface @ Conduct

The mobile web made easier with the viewport meta tag!

Nick

8th August

In a nutshell

Paste the following meta tag into your header and marvel at the wonders of this simple piece of code.

Smartphones

What is the viewport meta tag?

It’s no secret that the days of the mobile web are well and truley upon us. Only accessing the Internet via your desktop or laptop is a thing of the past. According to the Australian Interactive Media Industry Association, the use of mobile phone services has continued to grow in the past year as more Australians buy internet-enabled smartphones and other mobile devices like the Apple iPad. On a larger scale, it’s forecast that by 2013 there will be more than 1.7 billion mobile Internet users worldwide, by far outweighing the number of desktop and laptop users accessing the Internet.

With those kinds of numbers in mind, understanding optimal development and design practices for mobile devices has now become a staple for people designing and developing for the web. There are many ways to tackle the challenges of designing for mobiles but this is just one simple step you can implement to ensure some cross platform and browser stability in your designs.

Most mobile platforms assume different browser settings if none are specified, which can lower the quality and user experience of your designs on these platforms. Placing the viewport meta tag in the head section of your pages can override these default values and ensure your users receive a consistent and optimised experience instead of arbitrary results. The viewport meta tag is fast becoming popular for cross-device compatibility and we recommend exploring its possibilities. It is supported on many smartphones and tablets, from iPhone to Android to webOS (Palm) to even Internet Explorer Mobile, Opera Mini and Opera Mobile. Mobile Safari first introduced the “viewport meta tag” to let web developers control the viewport’s size and scale and now many other mobile browsers support this tag, and although it is not part of any web standard it continues to grow.

So how’s it work?

The first piece of this code, content=”width=device-width, controls the size of the viewport. What we’re doing here is setting the viewport width equal to the actual width of the device so that we deliver a width in CSS pixels at a scale of 100%, instead of the default 980px. A majority of new smartphones will have a width of 320px but this can change depending on the device. The viewport width can be set to a specific number of pixels like width=400px but in most cases it’s better to use width=device-width to deliver more consistent results that are device independent.

The initial-scale property controls the zoom level when the page initially loads. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out. Setting an initial or maximum scale means the width property actually translates into a minimum viewport width.

But wait, there’s more!

The viewport tag has more options to play with other than the width, so get experimenting:

Property	Description
width	Width of the viewport in pixels (or device-width). If width isn’t set, it defaults to a desktop size (980px on mobile Safari).
height	Height of the viewport in pixels (or device-height). Generally you don’t need to worry about setting this property.
initial-scale	(0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out
minimum-scale	(0 to 10.0) The minimum multiplier the user can “zoom out” to. Defaults to 0.25 on mobile Safari.
maximum-scale	(0 to 10.0) The minimum multiplier the user can “zoom in” to. Defaults to 1.6 on mobile Safari.
user-scalable	(yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to “yes” on mobile Safari.

Why use jQuery plugins to create tabs when coding them is so simple

Simon

9th June

Here is a quick little tutorial on coding a set of tabs

First lets start with the HTML

<div id="tabs">
<ul id="tab_links">
	<li id="tab1" class="active">Tab2 Title</li>
	<li id="tab2">Tab1 Title</li>
...</ul>
<div id="tab_contents">
<div id="tab1_content">

Some Content

</div>
<div id="tab2_content" style="display: none;">

Some Other Content

</div>
...

</div>
</div>

As you can see the list elements will create the actual tabs with the tab content below. By default we want to have the first tab active (class=”active”) and hide all other tabs (style=”display:none;”).

Now for some css

ul#tab_links {
list-style:none;
color:#000;
margin:0;
padding:0;
z-index:1;
position:relative;
top:1px;
}
ul#tab_links li {
cursor:pointer;
float:left;
background:#ddd;
border:1px solid #bbb;
padding:5px 10px 3px 10px;
margin:2px 4px 0 0;
font-size:14px;
}
ul#tab_links li:hover {
color:#333;
}
ul#tab_links li.active {
border-bottom:1px solid #fff;
background:#fff;
color:#333;
}
div#tab_contents { z-index:0;
clear:both;
border:1px solid #bbb;
background:#fff;
padding:10px;
}

Finally the javascript

jQuery(document).ready(function() {
//Add a click function to all list elements within ul#tab_links
$('ul#tab_links li').click(function() {
//Remove the active class from all the list elements and hide all the tab contents
$('ul#tab_links li').removeClass('active');
$('div#tab_contents').children().hide();

//Add the active class to the clicked element and show its contents
$(this).addClass('active');
$('div#' + jQuery(this).attr('id') + '_content').show();
});
});

I have used jQuery (of course) for this example and below is a demo of it working.

Tab2 Title
Tab1 Title

Some Content

Tags: javascript, jQuery, web development, web development Melbourne

Does your website need a coat of paint?

Nick

12th April

Paint Bucket Ok so you or your business already has a website you say. You realised the enormous advantages the Internet offers long ago and have dedicated time, money and effort into having a website. The big question is though, is your website up to date? The Internet is an extremely fast moving environment with trends, technologies, capabilities, standards and user expectations continuously changing. Without ongoing management it doesn’t take very long and a website can fall out of date. In fact, some designers say that a website design has a shelf-life of no more than 24 months before elements can become outdated and this can actually be significantly shorter. An out of date website can do more harm than good. Potential customers and business partners can have a frustrating, poor or disappointing experience using an out of date website which can leave a negative perception of your overall business. Website redesign is an important aspect of website maintenance and is imperative to keeping your website up to date and maximising its performance.

At the end of the day, I believe that we can all agree that a website’s content is king. Having said that however, a websites design makes up many fundamental aspects, all of which boil down to user experience and it can therefore not be ignored. Some issues to consider when asking yourself if your website is up to date may include:

How does it compare to your competitors online efforts
Is your website compatible across all browsers and platforms, this includes mobile devices
Does your website utilise current social media, analytics and online marketing practices
Is your design aesthetically appealing, with a “fresh look” that meets current trends
Does your website meet current web standards and accessibility standards
Does your site use the latest web technologies
Can your site be easily self managed
Is your site designed to achieve maximum search engine optimisation (SEO)
Lastly, is your user-interface functional, easy to use and deliver a great user experience

Of course not every website and web application is the same and many factors, such as your business goals, play a part in how you manage your online efforts. In general however, if you found yourself unsure about one or more of the above issues then maybe a redesign is something you should consider for your website.

Tags: web design, web design melbourne, web development, web development Melbourne

How would your visitors describe their experience?

Simon

15th March

Ah yes… an interesting question – one that we often ask our clients when evaluating the ‘true’ effectiveness of their online presence. The moral of the story is to ensure there is a reason and rhyme for having a site with the business goals very clearly presented to the user. The design element of a website must support the business goals and aid in guiding the user through to conversion.

Usability is not just about making sure everything on your website works, but also how quickly and easily visitors are able to understand your message, and ensuring the site is achieving its intended purpose. While a website might look brilliant and have fantastic graphics, it could be losing potential sales due to its hidden or confusing navigation.

A website’s usability should be a major concern for site owners and marketers because of the impact on its marketing metrics and conversion rates, which in turn impacts the business’ profitability and the ROI.

In short your website should be driven by a well thought out strategy which addresses your business goals. These goals can be very simple… Sell more products, drive more traffic, receive more quotation requests, attract more newsletter members and etc.