The impact of mobile browsing and mobile apps on website design trends

July 22nd, 2014 by Vincent Lai

With one in every five people in the world now holding a smartphone and one in seventeen owning a tablet, it’s easy to understand why website design has become immersed in catering for a wide range of device screens, and in fact why current digital design trends are being heavily influenced by the prevalence of mobile browsing. The mobile revolution brought with it the concept of the mobile app: the pocket sized utility that can do so much more than a website can, with access to the GPS, camera and other phone capabilities including the iPhone’s accelerometer and touch screen interactions. We now have apps for mapping, cooking, education, and entertainment. We even have apps that can control mini quadcopters that fly through the sky at your whim.

So how has mobile technology influenced digital design?

If you use your phone to view the Facebook website, in the top left or top right corner you will now see a very familiar icon, the menu button. Not long ago 3 horizontal lines meant nothing to most people, but now it is synonymous with opening up a navigation menu. Collapsing horizontal and vertical menus up into a single icon is a intelligent way to give visitors access to many pages, but take up the least amount of screen real estate. Many of our responsive website designs utilise this familiar icon, including inner pages of the Contact Point website when viewed on a smaller screen.
menu_icon

Another interesting design trend you might notice lately is the appearance of bold iconography. Many buttons, links, images and even logos, are now being simplified down to basic geometry, and cleverly illustrated symbols. Apart from being aesthetically pleasing, the main reason for this trend is simply to make life easier for mobile device browsing. Touch screen devices require pressing, swiping and other ‘gestures’ with your fingers to interact with the website or app. Using fingers is much less accurate than using a mouse and pointer. Large and simple icons and buttons are now ruling the way we browse because they are simply easier to press with a finger. They also grab our attention on the screen, no matter what size the screen.

In addition, apps have brought with them a range of standard icons that are used to achieve the same sorts of tasks across any website or app. The ‘settings’ icon is a good example of this. The image below shows the settings icon on Android, Windows and Apple devices. The commonality of the icons is obvious.
SettingIcons

Parallax scrolling, which I have posted about before, is also intermingling with mobile behaviours such as the appearance of new content at the bottom of the screen, triggered by swiping upwards to reveal more content. The ‘more content’ is only brought down from the web server when you “ask” for it via your touch gesture, making the initial content load faster, and also making the content feel more interactive. This behaviour is now appearing more in websites, including shopping cart sites containing many products per category.

The introduction of high definition ‘retina’ displays on mobile devices is also changing the way we are creating an displaying images in websites. An image that looks perfectly good on your regular PC monitor now looks a little fuzzy on such high definition screens. We are now regularly creating two versions of buttons and icons for display – one for high definition and one for regular screens.

These 5 design trends boil down to User Experience or UX (also known as User interface design or UI). The most successful apps have a potent combination of utility and user interface design. There’s no point in having a great product if it’s hard to use. By being simple yet bold, your users are more likely to pay attention and stay around for your message.

Has your use of mobile devices changed the way you expect a website to operate?

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Will we soon be able to view iOS (Apple) apps on Android devices?

June 4th, 2014 by Hubert Yap

And another question… will Windows mobile devices soon be capable of running Android apps?

According to report by ABIresearch, Android and AOSP (Android Open Source Project, used by Amazon and Nokia) dominates the mobile market share by 44% and 13% respectively. iOS has around 10% and Windows at 3%, while the other 30% belongs to basic mobile phones that is, phones predominantly used just to make phone calls.

ABI Research Q1 2014 report

If you belong to the 57% Android and AOSP user group, you have probably found yourself wondering whether a certain iOS app will soon be available to Android. Six PhD students from Columbia University decided to do something about this issue, and have created a software solution called ‘Cider’.

Cider allows your Android device to run both iOS and Android apps natively. It is still a prototype and doesn’t yet support device features such as camera or Bluetooth. Therefore if your iOS app specifically required those features, Cider will not be able to run it in your Android device at the moment. The six PhD students: Jeremy Andrus, Alexander Van’t Hof, Naser AlDuaij, Christoffer Dall, Nicolas Viennot, and Jason Nieh, are continuing their R&D efforts and I look forward to Cider being made publicly available, and providing a lot more features, hopefully in the near future!

From an app development point of view, Cider has the potential to reduce app development cost. By allowing Android devices to run iOS apps natively, app developers may no longer need to build separate applications for iOS and Android.

It is already possible to reduce app development cost by utilizing a component called “web view” that exists in iOS, Android, and the Windows platform to run virtually the same web application across multiple platforms (see the most recently released Contact Point Client Area app). However, using the web view method means that your app is running a website within it, and therefore if you don’t have internet connectivity, your app will not function, nor will it have native components (buttons, sliders) that you usually see in each platform. Using the web view method also reduces the app performance.

Once Cider is able to perfectly run iOS apps natively on Android devices, Android users will have the option to choose between 1,157,769* apps in iOS App Store in addition to 1,469,630* apps available in Google Playstore. With rumours that Microsoft are considering bringing Android apps to the Windows platform, one day the mobile app development world might be heading towards a future where a single app will be able to run natively on the 3 different platforms.

* Data as at 16th May, 2014

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

SEO for Beginners: Inbound Links and Online Directories

April 29th, 2014 by Trevor Robinson

Beginner’s guide to inbound links

Not so long ago SEOs (Search Engine Optimisers) were able to exploit Google’s PageRank-based algorithm. The PageRank based algorithm would count the number and quality of backlinks to a webpage which would indicate a webpage’s authority and determine search engine rankings based on backlink anchor text.

SEOs began to manipulate Google’s algorithm by submitting a client website to as many online directories as possible and acquiring backlinks, through mass produced and largely useless or uninformative, but keyword rich, articles and press releases. In addition, website owners were being enticed into participating in Link Farms in response to guaranteed page 1 ranks. An example of a link farm is a scheme involving including code in the home page of your website which dynamically selects another website to link to from a pool of participants.

Amid growing frustration about exploitative SEO techniques, evident flaws in the algorithm and ‘spammy’ websites appearing in the search engine results pages, Google introduced updates to their ranking algorithm in a bid to stamp out black hat SEO tactics. The first update was nicknamed ‘Panda’ in 2011. Panda reportedly affected around 12% of searches and was aimed at preventing websites with poor quality content from holding high positions in the search engine results pages.

In 2012 ‘Penguin’ was introduced.  Penguin targeted websites engaging in black hat link building tactics such as paid links, link networks or ‘link farms’ and ‘spammy’ directories. As a result, a large number of black hat associated websites’ rankings plummeted in the Google SERPs.

To ensure you don’t incur Penguin related penalties from Google, stay away from paid links, dubious article directory links, low quality press releases, low quality online directories and link exchange networks.

Gaining backlinks in 2014

As it has always been, the best and safest strategy with respect to gaining backlinks to your website is to produce unique, quality content. Focus on creating valuable, captivating content that people want to link to and share through their social media channels, email marketing and website content. We find that links to your website from related, high authority sites (e.g. those with a high Google PageRank) are the most useful for your search engine ranks.

Effective content marketing techniques may include the creation of video and infographic content, regular blogging and hosting webinars and/or online events.

Implementing a social media strategy is a very important component of every content marketing strategy, especially if you are just starting out and/or don’t have a large following. Sharing your content frequently through social media can enhance the opportunity to gain inbound links, build the image and reputation of your brand and increase traffic to your website.

Should I still submit my website to online directories?

Submitting your website to reputable, authoritative online directories (Hotfrog  and True Local are two examples) is still great for search engine ranks. Overall, directories are not as important today as they once were in terms of link value, however submitting your website to a reputable online directory will still benefit your website by increasing website traffic and boosting exposure for your brand. It has also been speculated that listings in trusted directories can enhance your website’s performance in local search results.

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Parallax Scrolling Websites: What are they and why are they useful?

January 29th, 2014 by Vincent Lai

Parallax Design is set to be one of the biggest trends in web development in 2014. But what is it exactly? And why should we bother? Long story short, its all about impact.

You may not know exactly what “parallax scrolling” means, but if you have been surfing around the web lately, chances are you have experienced it, and it has probably made an impression on you whether positive or negative. The term “parallax scrolling” refers to the technique used in websites where elements on the page move and shift at different rates, giving a sense of depth and interactivity to the page itself. It can be used in many different ways, and can bring a different approach to presenting your website.

Product Innovation and Communication Websites are the most likely candidates for using the Parallax Design technique.

Let’s say you are putting together a product, something that is new in the industry, or revolutionises an existing product.  You will want to show this product off, give the customers and clients something that they can visualise and drool over a little. Until recently, a detailed image gallery or annoyingly expensive short video were your only options.  A couple of images supplied too little information, and an extensive video sometimes felt too arduous. Organisations have recently used the new Parallax technique in very creative ways, to bring their products to life.

In the Saucony website (http://community.saucony.com/kinvara3/) they use parallax design to show the construction and science of how their shoes are crafted and constructed. As you scroll down the page, the shoe moves and rotates, adding parts and informing the user of the science behind each piece of the product. Added to this is the dynamically shifting background which subtlety follows the movement of the mouse. All in all, this design is very creative and an effective way to showcase their product.

In the Bagigia website (http://www.bagigia.com/), the creators of the leather bag have used the parallax technique to give viewers a 360 degree view of their unique design. This method allows them to show off their special product, and explain the thought process behind the design. It leaves nothing hidden, so that the customer has a better grasp of what it truly looks like, instead of a couple of still photographs against a stagnant white backdrop.

The other use, as mentioned above, is for communication websites. In my previous blog post, I discussed the use of full bleed images for higher visual impact. This technique coupled with Parallax design can take the impact of your website to new levels, and help you outshine your competitors. The best application of this is for websites that exist purely to impart your company information, where you don’t need more complex functionality or design elements.

A communication website that has used Parallax to very well is http://unfold.no/.  They have cleverly used the layering effect combined with a looping scroll to create what feels like an endless website.

For Contact Point we have created a Parallax micro-website for our design portfolio (http://www.contactpoint.com.au/CreativeDesignPortfolio/) which showcases some of our work. We have incorporated the dynamic page scrolling links and a layered approach to our imagery whilst using horizontal image scrollers to present our work.

Next time you are contemplating refreshing your website, consider the Parallax technique and whether it can enhance your website visitor’s experience.  I’d love to help create the design!

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Social is now Normal Media

January 21st, 2014 by Heather Maloney

An article written by Brian Solis just over a year ago described social media being the new normal. I’ve been banging on about social media for a few years now, but in the last 6 months or so, I’ve noticed a change in Australia… people (media and the general public, young and old) now include social media in their conversations as a matter of fact, rather than as if it’s the latest cool thing, or as if to say “we’re on it too, but we don’t know how to use it”.

There are definitely areas, and segments, where social media proliferates more than others. We’re seeing it feature heavily in:

commerce – research for products and services, reviews, recommendations, complaints
promoting causes – both in the not for profit sector, and grass roots causes such as in response to tragedies
news - both personal updates about life, as well as discussion about historical events as they happen
events - promotion of events and then during events the audience / attendees engage in deeper involvement in live events, TV and radio programs using social media tools
education and innovation – information sharing and collaboration / discussion around specific topics
leisure / games – my mother who is 30+ years older than me recently relented and signed up for Facebook in order to participate in the online game, Candy Crush, with her sisters and she now shares more on Facebook than I do.

An interesting example has occurred recently in the estate where I live. The estate has a body corporate with a moderated online forum. The moderation takes days sometimes to allow posts on the forum to appear after submission… and if there’s any concern about the content of the posts (i.e. they don’t say the “right” types of things) then the posts may not make it, or be delayed for weeks. So residents have taken matters into their own hands, and setup a group on Facebook where they discuss issues. It’s of course not moderated, and therefore posts are instant and engagement is arguably deeper.

I know some of you are still sceptical about social media. No matter what your business is, you need to be thinking about where and how you can get engaged in the [not so] new place where the relevant conversation is happening. It has the added potential benefit of boosting your search engine optimisation.

We’ve recently added a relatively new Facebook feature to the Note Couture ecommerce website, which allows comments to be added by visitors alongside a product (in this case an illustration which you can add to personalise stationery) within the website. These comments will also simultaneously appear in their Facebook timeline, and are therefore not anonymous, giving them greater credibility. Of course, we’ve configured the Facebook Comments integration to include a thumbnail of the product into the Facebook timeline, which will encourage the commenter’s friends to click through and visit the website. To close the loop, Note Couture can moderate the comments that are added using this mechanism, to deal quickly with inappropriate content. You can see an example here: I love this illustration!

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Your Business on the Big Screen!

November 20th, 2013 by Vincent Lai

Computer technology has come a long way over the years, and with each generation of increasing screen sizes, web designers everywhere have taken up the challenge to best take advantage and utilise this new screen real estate.
With some screen dimensions now topping out at 2560 pixels wide, it’s no wonder that the old 1024 pixel websites now look dated and unprofessional. An easy and aesthetically pleasing way to combat this issue without compromising on content is to introduce full screen or full bleed imagery.

Full bleed imagery has been used in the past by print designers, in magazines, brochures and newspapers. However, with the rising popularity of responsive websites, full bleed imagery is now being used on screens, and with great effect. Two great ways to use full bleed imagery include a full bleed background, or using a full screen width rotating banner.

The full bleed image background is useful for websites that wish to have an overarching image that sums up the feel of their whole website. With this concept, content would usually scroll back and forth over the background, leaving the image static and unmoving. To best use this style, the image must be uncluttered and have a definite theme, whether that be a panoramic photo, or a person modelling the latest product. Secondly, the image must allow for content. In some cases, if an inappropriate image is used, it will disturb the readability of the content, and you will subsequently lose users on the website. Make sure you have a defined contrast between the background and the foreground. This can be achieved in many ways; by changing the image to black and white, blurring the image, adding or decreasing the brightness of the image or even using box between the content and the background. Here’s an example of a website that uses the background element as the full bleed image: www.enudge.com.au

enudge

The second option of using full width imagery for rotating banners is more suited to corporate websites that want impact without being too flashy. The use of a full width rotating banner allows the website to showcase a variety of things as opposed to one singular theme. Whether it be your company values, or special deals that are available, a full width rotating banner never fails to grab the attention of your audience. The other advantage of using this method is that it allows the rest of your website to sit within the 1024 space without it looking old fashioned. Using a straight 1024 pixel layout will make your website look blocky, and less engaging. A wide spread image at the top draws the eye and attention of your audience, breaking the rigid structure, which then follows through, making the rest of the content easier to absorb. A good use of this style should give impact and simplicity to your website’s main message. A good idea for image selection for this purpose are images that have a wider angle, and preferably a space for a short message. Using portrait photos limits the amount of what is visible, and using something too cluttered will compete with the impact of the text you choose to place on top. Here’s an example of a website that uses the scroller as the full bleed image: toll transitions Defence Website

toll

Either way, applying large scale, full screen imagery now has a place on the internet, as screens get larger and wider. Using up that screen real estate has never been more important in sending your message to your consumers and clients.

Vincent Lai

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Google testing in US, large banner ads at the top of search results

October 26th, 2013 by Heather Maloney

Recently Google has been seen testing the display large banner ads (images) across the top of search results in the US for just particular big brands including South West Airlines.

You can read about this further, and see an example of the banner ad in this article in The Age newspaper.

It will be interesting to see if this change is made widely accessible in the near future, and of course, whether it comes to Australia – this is the usual path of tests of new Google functionality. I expect these banner ads to have strict requirements regarding their look and feel, and to be very expensive, given that Google is being accused of going back on a promise to keep the search engine free of large, flashing ads, ever.

Would you welcome banner ads like the one shown in the top of your search results?

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Making your Holiday Images worthy of your website

July 8th, 2013 by Vincent Lai

Holidays are great.  They’re a fantastic way to relax, explore new places, spend time with the people you love and we all want to immortalise those great moments in our holiday snaps.  However, as great as those photos are to us as individuals, how often have you looked at another person’s holiday photos and found them genuinely interesting?  More often than not it’s taken with a quick fire digital camera (or worse, your smart phone) with a cheesy generic pose in front of a cliché tourist attraction.  The colour in the photo is never great, and a surprising amount of times, you will find a non-descript passer-by doing something unseemly in the background to ruin what should have been a great memory.

An easy way to spruce up photos and give them a bit more life is to simply switch up the way you see photos.  Instead of a mundane slide show of photos that your facebook friends are most likely NOT going to scroll through one by one, take a couple of varying shots of the same moment, and put them into a collage, each moment being defined by a few different photos of the people you are with, the place you have come to visit and maybe even some candid shots of the scenery or the locals.  Play with the layout, maybe make it into a simple grid, or layer the photos on top of each other to give yourself that artsy appeal.  You don’t need fancy programs and photography skills to turn a couple of boring photos, into an art board that truly tells a story.  One of the best online tools to edit your photos is pixlr (www.pixlr.com).  It’s free to use, easy to master and can help you get the most out of your photos.  Another good tool is the all too famous Instagram.  With its myriad of image filters and effects, it’s not hard to give a boring flat image, a bit of life that it sorely needs.

So the next time you go on holiday, change the way you think about taking those happy snaps and instead of a mundane collection of photos, you can come away with something spectacular.

Here’s a couple of examples of banners created using our client’s holiday pics:

And here’s an example inside the website: www.travelinsure.net.au

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Have you noticed how easy Google makes it to search?

July 7th, 2013 by Heather Maloney

If you have you ever tried searches in Google like this:

  • ‘definition of altruism’
  • ‘convert 7 feet to metres’
  • or typed in an address you’re looking for

you’ll know that Google has been doing a lot of work to make search so much faster and easier for everyone. This is particularly important for people who are using smart phones to carry out their searches.

One of the more recently added features in the smart phone Google Search app is a set of “search cards” – or standard searches – that Google executes when you open the app. You can choose which ones you want, and they range from “time it will take me to get home” through to flight information (shown for a flight you have searched on before).

The only thing that I worry about with all this ease, and answers to readily at your fingertips, is that we’ll start (or maybe that started a long time before) using Google as the full and only source of truth. Your thoughts?

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Online Stores – should you be sending an automated request for a review?

April 12th, 2013 by Heather Maloney

I recently received an email from an online store from which I purchased some clothing (I’ve been their customer for many years), providing me with a set of thumbnails for the items I had purchased a couple of weeks ago, and asking me to provide a review. The email was interesting because:

  • it came from an actual person at the company from whom I’d purchased (rather than the usual generic email address of sales type emails).
  • it encouraged me to provide customer reviews to help other customers make the right choices – appealing to altruism.
  • it displayed in stars, the average usual rating that the particular products I had purchased received.
  • it gave me links through for each particular product, to make it quick for me to rate particular items.
  • it provided me with instructions and a link to login and change my preferences so that I no longer receive product review emails.

The email also provided at the bottom some links and images for new arrivals, and top rated styles.

This email has a great feel about it – more like a value-add than a sales tool. Of course, if I click through and provide my review, I’m going to be bang in the middle of the store, and highly likely to start browsing through items again, and possibly make another purchase. Overall, it’s a great way to continue the engagement with your customers, and it’s all automated based on a previous purchase.

How would you feel about receiving the email I’ve described? Please share your thoughts by adding your comment below.

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather