Blog

Testing your website on Android

2011-11-10T11:30:08+01:00

The number of handheld devices running on Android OS are greater than those running on iOS, which is why it is important that you test your website to make sure it works optimally on this platform.

Like the iOS simulator for iPad and iPhone, it is also possible to test your latest work on your computer using the Android emulator. This article explains how.

Testing using the Android emulator

The Android emulator is part of the Android SDK which can be downloaded for free. It allows you to emulate a mobile device from your computer, which means you do not have to actually own a mobile device running on Android to test.

How to install the Android SDK

Once you have your copy of the Android SDK, installing and configuring the Android emulator is fairly straightforward. Unzip the contents of the zip file and move the folder that contains the Android SDK files to a directory of your choice. Next follow the Android SDK installation instructions skipping step 3 if you only want to test your website in the emulator.

Setting up Virtual Devices

Once installed Mac and Linux users can launch the emulator by navigating to the tools directory and executing the following command in your Terminal.

android

Windows users should double-click the SDK Manager.exe file at the root of the Android SDK directory. Before you can run the emulator you need to download and install the required SDK packages. Navigate to "Available Packages" and toggle open the Android Repository. At the time of writing Android 2.2 and 2.3 are the most popular platforms so you should start by downloading and installing the SDK platforms for these platforms. Once installed can setup a virtual device for each version of Android in the "Virtual Devices" section. Click the "New" button, give the device a name, select the "target" (version of Android that the device will use) and click "Create AVD".

Now you have configured your devices you can begin your testing. Start a device and wait for the emulator to load. Open up the browser and navigate to your website and begin testing.

Website testing on iPhone and iPad

2011-11-09T11:30:00+01:00

With an increasing number of people using their mobile or tablet to surf the Internet, it is important that you test your website or web application on these handheld devices. In this article we turn our attention to iPhones and iPads. Using the iOS simulator we can emulate these devices from a desktop.

It is unrealistic to have access to a complete range of mobile devices for testing, which is why simulators or emulators can be a useful alternative. Of course they will not beat testing on the real thing, but they can be a cheap means of ensuring everything is working as it should.

iOS simulator for iPad and iPhone

The iOS simulator lets you test your website or web application on your computer, and can simulate an iPad or iPhone. iOS simulator is part of the Xcode developers package which can be downloaded for free:

As a registered Apple iOS Developer
Get Xcode from the Apple App store (OS Lion only)

Once you have downloaded and installed Xcode you can launch iOS simulator from the following directory on your mac:

/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/

It is an easy to use application, you can switch between devices by navigating to "Hardware > Device" where you have the choice of iPad, iPhone and iPhone (retina). You can fire up Safari and perform your tests including navigation using native gestures. If you don't have the latest Apple handheld device this is the next best thing.

And there you have it, you can now test your websites on mobile devices for free, without the cost of purchasing all that hardware. Of course these simulators and emulators will always come in second place when compared to the real thing, but they will get you a long way when it comes to testing.

Website redesign

2011-11-07T07:16:53+01:00

Sound the fanfare - James Wakefield's redesigned website is now live!!

I am very proud to show off my new website to the world! Please tell me what you think, by writing a comment at the bottom of this post!

Research for a redesign

When it comes to any redesign, it is good to evaluate the strengths and weaknesses of the website that is being replaced. My old portfolio was built with WordPress and was focused on showcasing examples of my work. Although I was happy with the general structure of the site, there were a number of areas that I wanted to improve. I focused on the following points:

User friendly site architecture
Content oriented responsive design
Clean and clear showcase
An eye to the future

By addressing each of these points my goal was to improve the user experience for my visitors, whilst keeping the site maintainable. The biggest change was the introduction of a blog section. I will be regularly writing articles focused on the field of web design, development and strategy.

User friendly site architecture

When reviewing the site architecture I decided to change the CMS (content management system). I have gone from WordPress to ExpressionEngine (EE) which has given a greate level of control over this website's content.

By sticking to a flat website architecture, I have tried to minimise the number of clicks it takes to get to the content. This is great for visitors and also search engines. A breadcrumb has been introduced to the sub pages and acts as a secondary navigation aid, helping visitors identify where they have landed in relation to the rest of the site. Finally I have reviewed the sidebar, optimizing the links to supporting content.

Content oriented reponsive design

This website was designed from the content out. By structuring the layout in this way, as opposed to a grid based web design, it has been possible to create a richer and more responsive canvas. As this website evolves over time to cater for new technologies, different screen sizes and browsers, it is important that it is able to adapt quickly.

Clean and clear showcase

As a web designer and developer it is important to be able to show my work clearly. I have consolidated my portfolio of work onto one page. This gives a clean snap-shot of my abilities.

An eye to the future

My intention is to use this website as a platform where I can share ideas and my experiences. It will also act as a testing ground helping me stay up-to-date with the latest developments in online media. Enjoy!