Archive for November, 2013

Flat Website Design

Flat design is one of the main trends in the web design industry currently. This site is a based on a flat design.

Basically, flat design means doing away with all the drop shadow, embossing, gradients and textures that have been part of the web design canon for so long. Instead, flat design uses block colour and inventive typography to highlight information and functionality. Minimalism and simplicity are the key words here and the absence of distracting artifacts allows designers to focus the user on the content itself, rather than the page infrastructure.

In fact, flat design as a trend has been around for a while but several things have accelerated its use. Firstly the increasing use of high-resolution tablet displays which favour clean boundaries and graphics and can make some of the traditional design tropes, such as drop shadow, look a bit old school. The use of flat design by Microsoft for its app-based Windows 8 Metro UI has also given a big boost to its acceptance. And the widespread adoption of flat layouts in responsive web design has further blurred the distinction between desktop and mobile user interfaces.


Windows 8 Metro UI

Flat design has perhaps developed as a response to over-reliance on skeuomorphism, the use in interface design of features from real-life objects (shutter noises on smartphone cameras, calendar apps that look like desk diaries etc.) Of course, flat design doesn’t work for every application or website and it doesn’t have to be a purist thing – semi-flat or flexible flat design allows for some drop shadow or texture to be used to create a bit of distinction or help the user navigate the page.

Responsive vs Mobile Websites vs Apps

One question we are often asked by clients is ‘do I need a mobile site, an app or a responsive site?’ Each has a different role to play in making sure that you communicate with clients in an accessible and functional way. This article looks at the differences and benefits of responsive vs mobile websites vs apps. Let’s start with responsive design..

Responsive Design

Responsive DesignResponsive design is the most practical solution for websites with medium complexity.

Your website adjusts automatically to the browser size. So, for instance, your site might display as 3-columns on a desktop, 2-columns on a tablet and 1 column on a smartphone.

All the layout will change automatically, including menus, headers, footers etc. If you are looking at this site on a desktop computer, try pulling the browser window in from the right and watch how the layout changes.

Apart from the fact that your clients will have a good experience regardless of what device they use to visit your site, another big advantage is that you have only one website to build and manage and everyone can access the same content, whatever device they are using.

Google also likes responsive design and recommends it as ‘best practice’ as there is only one URL and one set of content to index so it’s good for your SEO strategy.

Mobile Apps

By Wrike Inc. ( [CC-BY-SA-3.0 (], via Wikimedia CommonsApps are useful when you have well-defined and limited application to deliver e.g. a game, searching a train timetable, booking a theatre ticket, tracking a cycle or running trip etc. They can dispense with unnecessary information clutter and allow the user to focus on the specific transaction in hand.

Buttons and menus are optimised for small screen sizes and as apps are written specifically for particular platforms e.g. Android phone, iPhone etc., they can be fully device compatible.

However, creating apps can often require a serious commitment in time and money. You have to consider not only the initial design exercise, coding and testing, but also the cost of developing for multiple platforms simultaneously.

Apps also have to be updated regularly to match changes in your requirements and to keep up with new hardware and operating system releases.

So if you have a great application idea which really benefits from being accessed on the go, an App may be just the thing.

It need not be expensive or complicated to create a simple app. But, good design and usability are important. Whether you dive in and teach yourself, hire a development team or go to a developer agency, don’t underestimate the task.

Mobile Websites

BBC mobile siteA mobile site is a site designed specifically for a smaller screen.

When the user goes to a particular URL, the web server can usually detect the device being used and can serve a special mobile site optimised that particular screen size.

Where an organisation has a very large website with a lot of information to present, a mobile site can be a practical way of reducing complexity and making it more accessible from a small-screen device.

Often the mobile site will be a cut-down version of the desktop site that doesn’t offer all of the menu options of the full site. For that reason they usually provide a link to the full desktop site.

Another disadvantage is that the mobile site will have a different URL and content to the desktop site and this can cause difficulties and confusion when search engines index content.

The mobile site is developed in parallel with a desktop site, so it is a considerable additional overhead to design and maintain.

Nowadays, the majority of mobile sites are developed by organisations with very large desktop websites, where the amount of content makes it worthwhile to offer a more manageable, optimised, alternative. For smaller organisations, mobile sites have been largely superceded by a single website with responsive design.