Web Design Sydney Melbourne | Wiliam Blog

Top considerations for YOUR mobile web design strategy:

Wed, 25 Jan 2012 00:00:00 +0000

The web has gone mobile, love it and embrace it. The time to turn back is long gone.

With more users accessing the web on the go this means if your website doesn’t have a mobile strategy you’re pretty much doomed to fail. Your strategy (or your client’s) will depend on a number of factors, from whether it’s a static website, content-driven or even an interactive web application so pursuing an approach where all bases are covered would be beneficial.

Define the need for a mobile site, each bringing its own unique set of requirements:

A brand new website needing both a desktop and mobile strategy.
A redesign of an existing website which will include a new mobile site.
An addition of a mobile site to your existing desktop one.

The business objective component:

As the designer/developer you are hired to design a mobile site for a specific business and as with any design you’ll need to prioritize these objectives. When converting your design to mobile you will need to focus on the top priority objectives for the business even further.

A good example is Hyundai’s website (both desktop and mobile). When you load Hyundai the (desktop version), the first thing you notice are the bold, big images of their latest vehicles. This hasn’t been lost when you now loadthe mobile version of their website. The same emotional connection to their cars is instigated through the use of large imagery

Taking past data into account before moving forward:

As most web design projects now are redesigns of existing websites or a mobile addition to your desktop platform, hopefully your site has been tracking your past traffic data (Google Analytics or any other metrics tracking software. Thoroughly analyze which browsers and devices are accessing the website and with your results prioritize all the way from design to launch.

Responsive Web Design:

The days of checking your site in a few web browsers before launching are over due to the frequency at which new devices get released. Optimization is key and to do so you should utilize the latest and most forward-thinking web technologies such as HTML5, CSS3 and web fonts. Making sure your site scales and adapts itself to any device it’s viewed on is what we call responsive web design.

Simplicity….how far should you go:

The norm dictates that when you convert your desktop site to a mobile format, you simplify anything and everything you can. Obviously the smaller file your site is the faster it will load as well as with the smaller screen real estate available choosing your placement of elements is wise. Less is more

Single Colum Layouts and Vertical Hierarch:

With layout, you will find that single-column structures tend to work the best. This not only helps you manage the limited space available but also assists on scaling between different device resolutions and flipping between portrait and landscape modes. Check out Basecamp mobile, they do a great job at taking multi-column desktop sites and adapting it to a single-column layout. This brings us to vertical hierarchy, if your site has a lot of information that needs to be presents on a mobile site then a good way to organize it is to set up a collapsible navigation. They allow users to tap to open the content they’re interested and hide the rest.

From “Clickable” to “Tappable”:

As interaction on mobile sites are done via finger taps rather than mouse clicks the dynamic is very different in terms of usability. Revisit clickable elements such as links, buttons, menus, etc and make them tappable as there is no hover state in mobile websites.

Interaction Feedback:

It is important that when users taps a link or button for there to be a visual change to indicate it has been tapped and that an action has been initiated. It is common to see a white-coloured link turn to blue on the iPhone when tapped. Remember you don’t want your user to tap away 5 or 6 times whilst the next page is loading. Building visual feedback into your mobile site design is very important.

Test Your Mobile Website:

As with any project, testing on as many mobile devices as possible is vital. We don’t expect you to owe all these devices so a combination of installing developer SDK platforms and using web-based emulators for viewing other platforms is a good way of achieving some comprehensive testing.

Wiliam is one of Australia's leading web site design and web development agencies. Our Melbourne web design and Sydney web design offices provide cutting-edge Web 2.0, internet marketing, business web hosting, email marketing software, search engine optimisation, SEO, Facebook Applications, Link Exchange and SEO Tool services.

Designing for e-Commerce

Tue, 24 Jan 2012 00:00:00 +0000

How often have you called customer support after having problems with your online check out process? Probably never. How many times have you changed your mind just before hitting the purchase button? Probably quite a few times. Is it because you no longer want the goods or because you’re wondering: “is this a genuine site?” “will the goods really be delivered?” or “is it a scam like the one I saw on Today Tonight!?”?

The percentage of people that pull out of their online purchase before they make it to the checkout is proximately 60%. Convincing customers to trust a site may be a web designers’ biggest challenge.

Here are some key things to think about when designing your next e-Commerce site:

Build brand loyalty: Brand loyalty will make your customers feel safe.

Design for your key demographic: If your key demographic is males aged 45 -65, your site should look and feel quite different than if your demographic is teenage girls aged 16-19.

Product detail: Users will spend the majority of their time on this page; make it as informative, user friendly and attractive as your homepage.

Checkout: Make sure you include all of the product information on the checkout page; users want to be assured they are buying the product they selected.

Security: Keep your users feeling safe. Using security symbols such as ‘Verisign’ throughout the site is good as well as offering a safe paying option such as ‘Paypal’.

Web Browser compatibility

Mon, 23 Jan 2012 00:00:00 +0000

As a front end dev, the two most important issues when delivering a client site are pixel perfect rendering of the site based on designs, and compatibility across all browsers and devices.

Not everyone uses the same browser. Similar to how everyone is running on a different operating system, you can’t expect all people to be using the same web browsing tool.

Browser compatibility is a tweaking mindfield as the majority of browsers do not render code exactly the same, and most have their very own nuances and bugs, every version of IE being the main culprit.

Tips to ensure a client’s site looks perfect in all browsers are:

Validate

First off, validate the site. Ironing out XHTML and CSS errors can often solve browser bugs. Using W3C’s validators help a lot.

CSS Reset

Another way to ensure your site is cross browser compatible is to always reset your CSS before working on a project.

Conditional Statements

Another popular method of ensuring your site is cross-browser-compatible is targeting specific browsers using conditional statements. Basically, the idea is to detect the user’s browser, and if it is one of those specified, it should perform a certain action.

Browser detection

Using PHP or Jquery to detect the users browser and sending the relevant code/css based on the browser similar to conditional statements.

Android in Q1 2012

Mon, 23 Jan 2012 00:00:00 +0000

2012 will be another big year for mobile phones. Last year ended on a high with the release of Android v4.0 Ice Cream Sandwich and the Google phone, Samsung Galaxy Nexus. With Motorola’s Razr about to drop, the start of 2012 hasn’t slowed down.

He’s my round up of what to look out for:

Browsing mobile web sites gets faster and faster
The highly optimized Browser app in Ice Cream Sandwich is setting some pretty impressive benchmarks. Each new device is narrowly outdoing the previous device. I’ve tested the Ice Cream Sandwich Browser on my old HTC Desire and the speed difference is definitely noticeable.

Samsung are developing better batteries
FINALLY someone is doing something about the unacceptable battery life on smartphones. With the screensize-multiple core processor-tech spec race beginning to ease, it’s good to see someone is starting to work on refinement.

Use your PC keyboard for your Android device
Let’s face it, no one wants another keyboard on their desk. As apps for phones and tablets increase in complexity, it’s going to be more and more important to have keyboard access when you’re back at base. This app does exactly that.
The playing fields are leveling
It’s no doubt that Apple’s iOS is quickly dating. With both Android and Microsoft making bold leaps in mobile interface design, HIS’s Wayne Lam as predicted a fall in iOS dominance by 2015. The level playing field will undoubtedly result in further advancements for the consumer.

Better website images with Pixlr on Umbraco

Mon, 23 Jan 2012 00:00:00 +0000

Working with images is a common challenge for content editors - often editors want to work remotely from places they may not have image editors. Recently I stumbled across a great backoffice package for Umbraco that simplifies editing your website’s images.

Pixlr is a popular and very impressive web based image editor. It allows, directly from your web browser, extremely advanced image manipulation including cropping, gradients, shapes, layers, airbrushes, brightness/colour/contrast adjustments and more.

With this great Umbraco package you can use the Pixlr to modify media on your website directly from Umbraco. Instead of downloading, modifying and reuploading images you can do any edits you need without leaving your web browser.

You can find more information about this at OurUmbraco and more information about Pixlr itself here.

Why use uCommerce?

Mon, 23 Jan 2012 00:00:00 +0000

Umbraco has been working hard over the past couple of years to make their CMS as robust as possible but the industry still lacked a good all-round e-commerce solution with CMS ability. With uCommerce Umbraco has provided a solution to cover most scenarios and adding its e-commerce package has just added to the reasons why you need it for your business.

uCommerce comes in 3 different packages, Starter, Professional and Enterprise. The starter package is free and will allow you to get started on a solid platform with simple e-Commerce functionality. You can at any time upgrade to either the Pro or Enterprise solutions. The full Enterprise package will set you back around £4,495 (AUD $6676) per year and allows you to manage multiple stores and brands, Leverage multi-channel retail with Enterprise Edition and Multi-server license with support for high scale. This type is functionality is far above the standard shopping cart solution and is more reserved for major international shopping chains. The intuitive administration interfaces contain a powerful marketing foundation. Advertise and give discounts or send out coupon codes. Everything you need to stimulate customers to buy.

The major benefit to using uCommerce is that if your site is currently built in Umbraco then you can let your customers sell online from the same interface that they're already using. This allows you to provide a full end-to-end solution for you customers covering everything now from e-commerce to blogs to content, job-listings and more.

For your business it now gives you no reason not to use Umbraco. uCommerce has already been rolled out on many web sites covering over 10 countries including the UK, Germany, Italy, Sweden and Australia to name a few. The great thing to add to you using uCommerce with your Umbraco application is that you don't need to know .NET to get up and running. A complete web backend allows you to get started and making money today.

The Jetson's depiction of the future is now our present.

Mon, 16 Jan 2012 00:00:00 +0000

The first black and white TV was released in 1929.

The first colour TV was released in 1953.

The first practical TV remote called the ‘Zenith Space Commander’ was introduced in 1956.

The first personal computer, the HP 9830, was released in 1972.

The first 1G mobile phone was released in 1973.

The first person-to-person SMS (2G) was sent in 1993.

A century of pretty remarkable ‘firsts’ if you ask me.

In 1999, with the ever advanced Nokia 3210 on the market and the addictive Snake game, life seemed pretty sweet. Your average consumer couldn’t ask for much more than what they knew. However, the dawn of the 21^st century has left an unquenchable thirst for all things technological. From robotic toys and gadgets for kids (that as adults we have trouble opening the complex packaging on, yet funnily enough they can snap up at the age of 3), to touch screen mobile smart-phones- of which automation and smart technology is rapidly becoming the lifestyle ‘norm’. The launch of the iPhone 3G on 9 June 2008 saw a dramatic shift in mobile technology with what seemed like not much else left for a consumer to imagine. Apple and its competitors’ innovation have made movies like ‘Minority Report’ and the Jetson’s seem not-so-farfetched as they once did. Touch and sliding screens… who would have thought? They’ve ‘siriously’ out-done themselves, what else more could they do?

Get serious. Siri- sirious.

iPhone 4S (14 October 2011)- one can actually talk to their phone and have it answer back. Gone are the days of the frustrating voice-dialler on mobiles that rarely understood the ‘call’ request, let alone any name other than ‘John’ in our phonebook. Siri makes the iPhone 4S the first device that understands humans and responds.

But wait… there’s NOW more…

Technology has gotten Siri-ous too. The 2012 Consumer Electronics Show in Las Vegas has seen revolutionary gadgets adopting the same technology as Siri. Gadgets that consumers can now interact with via voice and gesture, including TVs you can speak to and colour on! Experts at the event have predicted that in the coming year, every technological device, from mobile smart-phones, TVs, laptops, and fridges, will be able to see, hear and understand us- breaking down one of the last barriers between man and machine.

At the show- “Voice is the most natural human-computer interface – everyone knows how to use their voice,” said Jason Stirling, senior vice president at voice recognition firm Nuance Communications. Stirling said the potential of voice had been unlocked after the commercialisation of “natural language understanding”, which has enabled machines to not only hear us but to understand what we mean. “Imagine simply asking your TV to turn on and requesting your program as opposed to managing 3-4 remote controls”- It looks like the old ‘Zenith Space Commander’ remote and its descendants will become redundant in the not-so-distant future.

It seems as though Siri and Microsoft’s Kinect accessory were only the early successful innovations driving mainstream appeal, which for now, appears to have no limits. Reach for the stars these technological gurus will continue to do, while we as the consumers are running closely after. Human nature wants bigger and better, which is a comforting reality for the big guys on campus like Apple, LG and Microsoft, who can release one model in one year, and less than a year later release a slightly upgraded version and still have consumers queued around the block up to 3 days before the official release.

Visit this article to read more and view images of the smart gadgets ‘happening’ in Vegas.

How we read websites

Fri, 13 Jan 2012 00:00:00 +0000

We live in a world in which we are bombarded with information. On an average day we are hit with "the equivalent of 174 newspapers of data". This surely has an influence on our attention span and affects how we interact with information.

So with an awareness of the above, how do we use this to our advantage when designing content for websites? Studies have shown that, on average, Web Page Users (WPU’s) have time to read at most 28% of the words during a visit; but that 20% is a more realistic amount. This means people rarely read web pages word by word; instead they scan the page, picking out pertinent words and sentences. This fact should inform what content we add to a website.

Something else to keep in mind is that people most often land on websites via search engines. They have a keyword in their mind which will influence the way they read the website and consequently will scan website content for that keyword.

Below is a quick example to show how using bolded text to highlight words may help the viewer to stick around. I selected "coffee making tips" as a keyword/question and googled it and found a list on the subject. The first section (1.) is the simple bullet list with no words highlighted. The second section (2.) is the same list but keywords are highlighted to make scanning a bit easier. This little technique should have an big influence on the user when they scan for content.

(1.) Tips for brewing good coffee:

Use fresh coffee. The fresher the coffee, the better the taste!
See the storage tips above.
Use pure water. Most of your cup of coffee is made up of water, so it makes sense to ensure that your water is pure. Tap water contains impurities so ideally you should either filter your tap water with a carbon filter or use bottled water.
Do not boil the water. Coffee is best made with water that has not boiled and is slightly below boiling point.
Use coffee that is ground specifically for the brewing method you use. Different brewing methods require different grinds of different coarseness. If you use coffee ground to fine for your brewing method, you will experience over-extracted, bitter sludge. Too coarse and the coffee will be weak and watery.
Use the correct proportion of coffee and water for the number of cups you are serving. Use 7g of coffee, which is one coffee scoop or one heaped tablespoon per cup – and note that this is “per cup”, not “per mug”. Use a kitchen measure to determine how many real cups you are making in order to know how much coffee to use.

Remember the keyword / question that was search for "coffee making tips"

(2.) TIPS FOR BREWING GOOD COFFEE:

Use fresh coffee. The fresher the coffee, the better the taste!
See the storage tips above.
Use pure water. Most of your cup of coffee is made up of water, so it makes sense to ensure that your water is pure. Tap water contains impurities so ideally you should either filter your tap water with a carbon filter or use bottled water.
Do not boil the water. Coffee is best made with water that has not boiled and is slightly below boiling point.
Use coffee that is ground specifically for the brewing method you use. Different brewing methods require different grinds of different coarseness. If you use coffee ground to fine for your brewing method, you will experience over-extracted, bitter sludge. Too coarse and the coffee will be weak and watery.
Use the correct proportion of coffee and water for the number of cups you are serving. Use 7g of coffee, which is one coffee scoop or one heaped tablespoon per cup – and note that this is “per cup”, not “per mug”. Use a kitchen measure to determine how many real cups you are making in order to know how much coffee to use.

Obviously a well written website will outperform a poorly written one, the above is one of numerous simple methods to assist in improving user experience.

Good reading material:

http://www.useit.com/alertbox/9710a.html

Welcome to the information age – 174 newspapers a day

You want web with that?

Fri, 13 Jan 2012 00:00:00 +0000

Right now, somewhere in the world of physical product marketing there’s a conversation in progress that goes something like this: “how can we use the digital/web/mobile platforms to enhance our product/offer?”.

It’s a great question. It’s a tough one to answer, evidenced by the number of web and mobile sites that tell you about a product, let you watch a video and maybe buy the product – and that’s it. That’s as far as most brands go in using digital channels to enhance the experience of their real-world products.

Lego sell building blocks. They’re focussed on selling blocks: standard blocks, Harry Potter blocks, World Cup Soccer blocks and they know what they’re doing.

What Lego has done better than most brands is innovate via the inclusion of digital. Years ago Lego introduced Lego Digital Designer – software that let you create lego block based models in a 3D desktop modelling program. Once you’d completed a model you could order the blocks and once they arrived you could create a real-world version of your virtual model. A great example of the digital channel enhancing the real-world experience of a product.

And now they’ve done it again with Life Of George, Lego’s first ever bricks-and-iPhone game:

http://www.youtube.com/watch?v=1DHZwSOVKBY

Adding a physical component to a casual mobile game is really an experiment for Lego to gauge what tech-savvy adults like. The popularity of sandbox games like Minecraft is proof that plenty of people love to build any and everything, though they probably play with their iPhones more than Lego sets these days. So can the Life of George app get more grown-ups playing with Lego bricks again?

Dan Murphys

Mon, 09 Jan 2012 16:41:06 +0000

Everyone loves Dan Murphy's. Their iconic stores are an experience unto themselves, with thousands and thousands of wines, spirits and beers at the lowest possible prices. Whether stocking for Christmas or to find an obscure rum for a cocktail, Dan Murphy's is the ultimate destination. Owned by Australia's largest retailer Woolworths, when it came to planning, designing and developing the frontend of their new, catalogue and eCommerce website, they referred to Wiliam.

Client Objectives

Provide a seamless, highly intuitive interface despite a literal myriad of pricing, delivery and 'In-Store Pickup' options.
Real-time product availability lookup.
Fully transactional including 'Reserve in Store' functionality.
Continuity of brand, messaging and marketing from offline to online: Level 1 (A) Accessibility.

Wiliam Solution Working closely with the backend integration partner, Wiliam planned, designed and developed the front-end of the Dan Murphy's website; the full user experience. This was a considerable feat given the variables and permutations existing across their impressive range of products. Some products are available for pickup in store, many products are available for delivery. In some circumstances, even if a product is out of stock, it can still be delivered! Ensuring that users see the right price and stock availability without obtrusively asking for their location and details is quite a challenge. After considerable planning and analysis, Wiliam and the dedicated Dan Murphy's team designed an interface that simplified the process to the extent that a Dan Murphys' customer can always be sure that they're looking at the right information right through to checkout.

Successful outcome The project result is inarguably Australia's largest, and best online liquor website. The close collaboration of Dan Murphy's, Wiliam and the backend integration partner has delivered an online experience, as good as walking in-store. In fact, it's arguably better!

Persuasive Design

Fri, 06 Jan 2012 00:00:00 +0000

I’ve written plenty of blogs about website/web page conversion, the importance of website conversion, what to do and what not to do.

My blogs have either been high level, or have looked at a single factor around website conversion, such as shopping cart abandonment.

Trying to cover the entire topic of ‘website conversion’ would take two-ring binders and then some.

One topic I haven’t written much about is the concept of persuasive design, in itself a broad topic covering user emotions and psychology, experiential design, visual design, content and testing.

It is one of the more interesting aspects of website conversion because it is one of those areas, where despite what you think you know, there is just so much more to be learnt. Often through responding to testing and analytics.

For some time, experts have attempted – often successfully – to apply science to persuasive design. For instance, an equation I hold roughly true:

Conversion = Incentive + Motivation + Value – (Anxiety + Friction)

Understanding and analysing how this science is applied can be a little hard if it is not your everyday job.

This blog analysing booking.com is not a bad read.

I don’t necessary agree that booking.com is the greatest example of how a website should convert users at all stages and the design could certainly be more streamlined; instead, it is a reflection of how these hotel booking websites constantly add to themselves as they copy their competitors on a nearly daily basis.

This said, booking.com it does tick some big boxes and it has a good level of content; content builds trust.

If you do read the blog, have a read of the comments as well. Some interesting observations and thoughts there to.

Why HMV (and others) should stop making users register before checkout

Fri, 06 Jan 2012 00:00:00 +0000

When you make a customer register before their checkout, in many cases they abandon their sale. Unfortunately this is a lesson many retailers have yet to learn.

A good couple of examples come from Jared Spool and ASOS. Jared Spool added $300m to its annual revenues by removing their registration button while ASOS halved its abandonment rate by not mentioning the need to create an account on their registration page.

HMV have checkout registration issues:

On Econsultancy a customer describes how because he simply forgot his e-mail and password to his account it took 10 minutes to reset it and start placing the order. He goes on to mention that the only reason he didn’t switch retailers was because he had already purchased a gift voucher from a coupon website. He also highlights that Amazon offer an easier and more hassle-free way of resetting your account also allowing you to make a new one with an address you have previously used, something HMV does not.

Consumers HATE registration and here are the stats to prove this.

A quarter of consumers would literally abandon making a purchase if they had to register, surely you would imagine this would ring many bells for retailers that force consumers to do so…

We understand that retailers favour having customers follow through with the registration process because not only does it provide a good resource for marketing emails it theoretically makes subsequent purchases easier with stored address and payment emails.

Amazon being a good example where their one-click purchase options (with your stored details), making it very easy for repeat customers.

Online Retailers that make compulsory registration before purchases:

This is common practice for retailers such as HMV, Tesco, Play.com, TopShop, etc. It is arguable that these sites would greatly improve their abandonment rates by removing the need to register.

Online Retailers that make it optional to register before making a purchase:

Giving customers a choice would seem like the logical path to follow, House of Fraser’s introduced this option to their new website. Clever and the best of both words.

Online Retailers that do not require any registration at all when making a purchase:

Comet offers this process where customers concentrate on selecting their delivery options rather than registering first, meaning less time to think over their purchase which would translate into shorter abandonment rates.

So which one would be more beneficial to your website?

I believe that a good approach would be having the option to do both. A website could still collect your details (e-mails will always be needed for order confirmation/delivery to be sent out), therefore marketing e-mails could still be sent to consumers after they have placed an order.

Removing this barrier on your website can translate not only into higher sales as well as lower abandonment rates, but consumers may come back again and again simply because they will not be hassled to sign in every time they wish to place an order.

If you would like more information on shopping cart abandonment and tips to avoid this please you should read this

Umbraco – Utilising uComponents for simpler search expressions

Fri, 06 Jan 2012 00:00:00 +0000

One of the good things I have come across while developing within the Umbraco environment was the uComponents add-on. Among its many useful tools for new data types, keyboard short-cuts, drag-n-drop functionality and all the bells and whistles of developer tool add-ons is the ability to greatly increase the efficiency of your searches. Umbraco’s native searches usually take the form of creating a DocumentType object and then using that object to search for a Document within a node structure. You can then use some Linq queries to gather information of the Documents you are searching for.

The code below does a simple search of a document tree for a node that contains a property with a set value.

DocumentType dt = DocumentType.GetByAlias('myDocType');

List docs = Document.GetDocumentsOfDocumentType(dt.Id).Where(x => x.GetProperty(“myProperty”).Value == “ValueToSearchFor”).ToList());

This works by returning a list of all the Documents of type myDocType that have a property myProperty that equals ValueToSearchFor. We have then cast it to a list to do whatever comes next.

The downfall of this is when you want to perform searches that are either for a date and numerical values. Umbracos native searching is limited in that you have to perform the x.GetProperty(“myProperty”).Value expression each time to gather a value. And this is done before you can determine the type of the property. Using this method will always return the value as a string which is of no help for doing date and numerical ranges. How do we get around this?

Bring on uComponents!

By adding the uComponents add-on to your site you open up a whole range of functions that allow for ease of searching as one. There is just not enough space to go over them all here so we’ll just look at the GetPropertyAsString, GetPropertyAsDateTime and GetPropertyAsInt extensions.

Once you have added uComponents to your site you can then take advantage of its libraries in development and the front-end of your site. Firstly we include the core components on our webpage for the searches.

using uComponents.Core;

using uComponents.Core.uQueryExtensions;

These open up the box for your power.

We can then utilise the searches to have some greater searching power.

GetPropertyAsString can be used to always return a value of a node as a string. We can change our query above to the following to return the same results. Note that we do not have to explicitly query the Value of the property to do any comparisons against it.

DocumentType dt = DocumentType.GetByAlias('myDocType');

List docs = Document.GetDocumentsOfDocumentType(dt.Id).Where(x => x. GetPropertyAsString(“myProperty”)== “ValueToSearchFor”).ToList());

Now if we want to search for a date and/or numerical value we can use the GetPropertyAsDateTime and GetPropertyAsInt extensions for some easier searching. For example we can update our new query now to only return nodes that were created after a certain date and have been viewed more than 100 times.

DocumentType dt = DocumentType.GetByAlias('myDocType');

List docs = Document.GetDocumentsOfDocumentType(dt.Id).Where(x => x. GetPropertyAsString(“myProperty”)== “ValueToSearchFor” && x. GetPropertyAsDateTime(“created”) > myStartDate && x. GetPropertyAsInt(“viewCounter”)>100 ).ToList());

We now have the ability to search for nodes which much more specific criteria without the need to do post query parsing and data type checking. If necessary you can check for null values and even select specific node properties with Linq knowing they will be automatically cast into the correct type.

By building on these extensions developers are now able to create much more efficient search queries that get the information required in one sweep. And what developer does not like having to write less?

Facebook set to put Sponsored Stories in News Feed

Fri, 23 Dec 2011 00:00:00 +0000

Last Tuesday it was announced that Sponsored Stories on Facebook will be now be moved into user’s News Feeds.

Sponsored Stories are targeted ads that are based on the types of brands/businesses that a user and their friends have liked. So not only do they target specific ads based on data of what you ‘Like’ they also present you with brands/businesses that your friends have liked.

They are positioned on the right of the News Feed, not part of your main content, asking for you to Like a page as several of your friends have already done so. It doesn’t interrupt the flow of the News Feed and looks more like a recommendation as it shows your friends interests as well.

Currently the News Feed allows you to see the latest updates from your friends. Facebook also allows you to customise your feed by choosing which friends you want to appear in your News Feed. However when Sponsored Stories are introduced you won’t be able to change a setting to make them go away or choose what brands you want to appear. The only way to get rid of them is by clicking the X remove button. But you will need to do this every time…

This announcement has come when Facebook intends to exceed their revenue of $100 billion next year. Although there has been uproar from users from the recent announcement, the outcome of this situation will probably be what always happens…people will get used to it.

They always do.

I remember when Facebook changed their layout a couple of years ago and how annoyed everyone was including me. I didn’t like the change. But did we stop using it even though many threatened to?

No.

Facebook now has a strong 800 million users. I can’t even remember how Facebook looked before the change as I’m so used to the new layout. I obviously can’t compare a layout re-design to targeted ads appearing in user’s content, but I think it will still follow the same pattern.

Users gets pissed off
Then get used to it
Then forget how it was before

It’s the same as when YouTube introduced ads in videos. At the time it really annoyed me, but now I’ve become so used to it that I wait for it to appear and close it straightaway without thinking.

I’m definitely not saying that when a social media site changes something that affects the usability with in your face advertising, that people should just get over it. But I have a strong feeling that whilst people will get annoyed about the change now, in a year’s time most of us will be used to it.

It’s Facebook. It’s what always happens.

How The Web Will Look In 2012

Fri, 23 Dec 2011 00:00:00 +0000

As we come to the end of another year of amazing internet advancements we cast our eyes forward to what the web of 2012 might look like.

Mobile Websites Become Essential

I’ve said it before (in Why Your Business Must Be On The Mobile Web) and I will say it again, mobile web development will be huge in 2012. In the last year mobile browsing has doubled and that exponential growth will continue. By 2013 more people will be accessing your website from a mobile than a PC. Will your business be ready?

Websites Become Landing Pages

With fears of an economic slowdown carrying through into 2012 the overwhelming advice to businesses is to carry on marketing. For your business to survive in a slowdown you need new leads and if your website is not generating leads then it is a wasted opportunity.

In 2012 websites will trim the fat. Homepages will become more like landing pages, attempting to convert more visitors into customers than ever before. Current conversion rates sit as low as 2% (CMS Wire) so sharpening your online sales funnel has the potential to offer a great return on investment.

Tablets Become Commonplace

The introduction of the iPad less than 2 years ago saw a new era of technology reach the general public. Tablet market share will continue to grow in 2012 and is expected to surpass the desktop computer by 2013.

With mobile and tablet browsing set to rise, responsive web design will see increased popularity. Opinion is still divided as to whether having one adaptable website for all platforms is feasible. The optimal solution is yet unknown but developing a responsive website for desktop and tablet browsing while maintaining a separate portal for mobile users will account for the vastly different goals of a mobile web user (Mobile UX Guidelines).

Have a happy and prosperous 2012. Here’s hoping the Web Bot’s predictions are wrong!

MVC and its tight integration with JQuery

Thu, 22 Dec 2011 00:00:00 +0000

We develop a lot in Microsoft MVC 3 and thought I would share one of the “wow, that’s cool” parts of it.

The tight integration with JQuery is one such “how did I ever do this before?” kind of deals. I needed to construct a basic, sortable list of items and I wanted to use JQuery sortable() to for the UI. That part was easy enough; but how do we send this changed order server-side? Painlessly, that’s how.

Here is part of the view that loops through Images in my model. The model contains Name (string), ID (int) and SortOrder (int). The SortOrder loads in steps of 1 from the model on load (0, 1, 2, etc.)

The JQuery component is extremely simple. The sortable() method has an event called ‘stop’ that fires when you have re-ordered an item in the list. The first part of the function is to re-assign the SortOrder values to the re-ordered list.

The second part of the function is the magic: using JQuery Ajax, and by serialising the form, the model can be sent directly to your controller and then on to the database.

Simple! The model is available to the controller and can be passed onto a private database function to commit the SortOrder values back to the database.

Internet Explorer Developer Tools

Thu, 22 Dec 2011 00:00:00 +0000

Finally with the introduction of IE9 also came the developer toolbar already built in!

What is it?

Put simply, it is a tool used to validate and debug your HTML and CSS and JavaScript.

How can it help me?

The developer toolbar can assist you in getting your webpages looking just right in Internet Explorer from version 7 and upwards. If you've been developing websites that have to be cross browser compatible then you'll appreciate just how painful it is to get things to work in different versions of IE. This is where the developer toolbar can help. You can toggle it's engine to behave as though it is a different version of the browser. Even JavaScript idiosyncrasies are simulated!

What features does it have?

Here are a few of the most used ones…

Validate HTML / CSS / javascript
Preview page layouts at different resolutions, it also offers a ruler to help adjust element positions accurately (well… IE accurate anyway)
View the page source
Navigate the DOM and view the DOM source.
View and edit the CSS selectors and rules that are applied to each element (including rules that have been overridden by more important rules)
Clear the browser cache
View/clear/disable cookies.

Where can I find out more about it?

http://msdn.microsoft.com/library/gg589507%28VS.85%29.aspx

Mozilla Firefox optimises for Android tablets

Wed, 21 Dec 2011 00:00:00 +0000

Mozilla has broken through the mold again with the release of the tablet-optimised version Firefox, for Android of course.

Here’s a link to a great video that explains their objectives and the applications features:

It’s great to see 3^rd party developers adopt new device-based interactions. Mozilla has been on Android for over a year now, but previous versions have always felt unfinished and uninspiring. This new release however, sees them release two exciting enhancements.

1. The application is now share between tablet and phone, but optimised for either.

2. The application adopts both tablet and modern web browsing features.

As always, the app is free of the Android Market place:

Their ratings a little low, especially when compared to Opera or Dolphin, however I think this will start to rise with this version.

Typographic Contrast

Tue, 20 Dec 2011 00:00:00 +0000

As you may know the majority of online readers scan content for relevant information rather than reading line by line. This is why typographic contrast and flow are essential in web design.

You can create typographic contrast by emphasising certain text by size, value, position etc. By creating this difference you divert a readers attention to areas of importance.

Here are 6 factors worth considering when placing your text in your next design:

Font choices: Web safe fonts are limited and so are classified in two main categories: serif and sans-serif. To create contrast it's not hard to see why designers will often use a sans-serif font for their headings and a serif font for body copy or vice versa
Size: A common method to indicate higher importance is choosing a larger font size for headings.
Colour: You can use colour in many different ways to create contrast, two common methods are to determine a hyerlink or emphasise a problem somewhere in the site eg. warning message.
Case: If you are using the same font for your header and body copy, a way to create contrast is by CAPITALIZING. Capitalizing headers is more common than body copy, body copy is easier read in lower case.
Weight: making text a heaver wight is a good way to attract attention and emphasize an important area.
Space: This is arguably one of the most important feature of your design. Space in your design will let the reader know when to start, where to pause, what to read, what to click on and where to stop.

Google and Me

Tue, 20 Dec 2011 00:00:00 +0000

It's been a long year and I've been lucky enough to work on some great website design projects. These designs have ranged from large group buying websites to policy and advocacy sites.

While creating these designs I have spent a lot of time on google doing research. This has meant lots of data logged with google. As we all know, google collects search queries. So I was thinking if google was to create a profile of me, who would I be in query format in 2011. Below is a graphical representation some of the words that I have searched for throughout the year, this creates a picture of a very unique individual. I'm hoping that I have confused google a bit.