The Mathieu Salem Fashion & Wedding Couture Blog has been especially designed to work on a range of devices meaning you can read the blog whilst on the go on your phone, whilst on your iPad or at your computer.

Visit Mathieu Salem Fashion & Wedding Couture Blog

HTML5 has introduced a new properties for the type attribute for input elements. The new values are for contact details and include:

• an email address (type=’email’)
• a website addres (type=’url’)
• telephone number (type=’tel’)

You won’t see any difference when viewing on your desktop HTML5 compatible browsers however if you view the forms with Mobile Safari it will automatically use the appropriate keyboard for the job.

The Code

By default text fields are given the type=”text” attribute. Simple change the type value from text to the relevant type of contact detail such as email for an email address field.

<label for="email">Name:</label><input name="name" id="name" type="text" />
<label for="email">Email:</label><input name="email" id="email" type="email" />
<label for="email">Phone:</label><input name="phone" id="phone" type="tel" />
<label for="email">Website:</label><input name="web" id="web" type="url" />

The iOS keyboards

The image below shows the different types of keyboards you will see for each of the HTML5 type attributed fields.

A very simple enhancement that is sure to pleasantly enhance your users web experience!

WordPress (3+) vs Drupal (7+) Glossary

Street Address

There a few different options available here and after testing on various devices I have found that using a Google Maps link to be the best option as both iPhone and Android will intercept this link and prompt the user to choose to view on Google Maps or the internet (or other Map App). The other options I trialled included Embedding a Google Map and using the geo prefix in link. The issue with embedding the Google Map is your not giving the user the freedom to use the map App of their choice and it also takes up screen real estate which you may not want to use. The issue with the geo prefix is that is currently not very supported. It worked on Android but not iPhone, making it fairly useless for mobile.

Linking to the address to Google Maps
Simple go to maps.google.com, find the address, press the link icon in the top right and copy the google maps link. Add this link to your address or a view on map link like so:

<a href="http://maps.google.com.au/maps?q=melbourne+gpo&ll=-37.813547,144.963613&spn=0.0099,0.026157&oe=utf-8&client=firefox-a&fb=1&gl=au&hq=gpo&hnear=0x6ad642af0f11fd81:0x5045675218ce7e0,Melbourne+VIC&cid=0,0,16491477996227855296&t=m&z=16&vpsrc=0&iwloc=A">Melbourne GPO</a>

Embedding a Google Map
To embed a Google Map you need to go to maps.google.com, find the address and then press the link icon in the top right. This time select the iframe code and paste this into your website.

Use the geo prefix in your link
Simple add the ‘geo:’ prefix follow by the longitude and latitude like so:

<a href="geo:-37,45">location</a>

Phone Number

To make a phone number or text call simply include the ‘tel:’ prefix in your link, making sure you remove any spaces, + signs or special characters.

<a href="tel:0395075301">Call us</a>

Note: Using this style link will not work on non-mobile browsers.

Email Tag

We’ve all been doing this on for a long time and is common practice but here it is again to remind us all.

<a href="mailto:info@yourdomain.com.au">Email us</a>

Why not help the user out a little and add the subject line in for them too, like so:

<a href="mailto:info@yourdomain.com.au?subject=Enquiry">Email us</a>

Google: Mobile use in Australia

A study by Google has shown that by the end of 2011 50% of Australians will own a SmartPhone (be it an iPhone, Android or Windows 7 Phone). One of the most common uses for SmartPhone is researching businesses on the internet in order to call the business, get information or make online purchases.  People are on their phones, anywhere and any time which means they could be looking for your website on their SmartPhone after seeing an advertisement, whilst in a store looking at your products or perhaps when discussing your product when out with friends.

How does your website look on a SmartPhone?

If your website has not been optimised for mobile viewing then it will probably need a whole lot of pinching and zooming to get in close enough to read. Without optimising the entire website will shrink to fit, making the text and images tiny and buttons hard to press. Users can zoom in but this can become cumbersome.

Another issue is the use of Flash in a website. Good news is it will work on your Android phone, bad news is Flash does not work on iPhones or iPads.

How can I get my website to work on a mobile phone?

You have two main options here – a responsive layout or a separate mobile only site (commonly know as an m-site). Each have their own set of advantages. Lets explain the two options:

M-sites

An m-site is a separate version of your website, often a cut down version of with specific information that targets mobile users. It uses a simplified design and is often stored in its own directory or sub domain – for example www.mydomain.com/m or m.mydomain.com. When users access any page in your website they get redirected to the mobile version. Users can choose to then exit the mobile site if they wish to get more information from the full site.

Gardenvale TCM: PC & Mobile Site

Example m-site
The Gardenvale TCM uses an m-site to provide visitors with quick and easy access the address, contact details, and hours of operation. Mobile phones are automatically redirected to the mobile site but can choose to exit to the full site if they need more information. Check out www.gardenvaletcm.com.au on your mobile phone or go directly to the mobile site.

Responsive Layouts

Instead of making a separate mobile site, this solutions takes your existing website and modifies the design to allow it to dynamically respond to the size of the user’s device (e.g. desktop computer, iPad, SmartPhone etc).  No matter what device someone visits the website on or which page they visit, everyone will get the same content, the difference is the information is rearranged and resized for optimal viewing on their device. There is one website for all users.

Squigloo: Responsive Layout

Example Responsive Site
The new Squigloo site uses a responsive layout. Resize your browser or view on a mobile device and watch how the content dynamically resizes. You can also check out the Profiler Recruitment Blog for another example of responsive design.

M-sites vs Responsive Layouts

The advantage of an m-site is you are tailoring the m-site content to the specific needs of mobile viewers. If your website design is quite complicated then an m-site also allows you to have a simplified and quick to load layout. The disadvantage of an m-site can be that you either have to double up on information or not provide all the content from your site to the user. Whereas with a responsive layout you are only dealing with one website for all users, with all the information accessible.

Which should I use?

M-sites are great for businesses who need to quickly provide there contact details and perhaps a couple of other pages for mobile users. Whereas a responsive design is great for website which people do a lot reading or research, for example blogs, or in site where users can do online shopping.

Talk to Squigloo today about making your website mobile friendly!

The mobile friendly site works for iPhone, Android, Blackberry, Windows 7 and a range of other SmartPhones in both portrait and landscape modes.

Talk to Squigloo today about getting your website converted to mobile friendly!

Visit gardenvaletcm.com.au on your mobile

We have see this done at the top of the page for a while now, and its starting to become more common in left hand side of a page. However an advancement on this which I have seen, which has the extra ‘wow’ factor, is to have the navigation not at the top initially but as you scroll down it catches on the top of the browser and sticks there.

Trend Samples

Here are some sample sites with a great use of sticky navs:

Facebook.com- Top sticking
A simple but effective with blue panel sticking to the top of the page as you scroll.

Teean + Lax Blog – Left side sticking & collapsible
The nav sticks to the left of the page as you scroll with the added benefit of being able to collapse the nav if its in your way.

The Lounge – Top stick & single page

This takes to stick to top menu but is a single paged design. As you scroll the current section is highlighted in the nav – a great feature.

Tabspresso - Top Stick with fade in
A nice touch here, the top nav isn’t shown initially but as soon as you start scrolling it fades in.

LESS CSS  – Catch & Stick Style
Here the nav bar appears below the main logo and then as you scroll down it catches on the top of the page applies some transparency.

Visit www.profilerecruitment.com/blog