Do you use a desktop browser, or a netbook, maybe a smartphone, what about an iPad, or possibly via your TV? The web is more accessible than it has ever been via a wider range of devices than you might imagine. This is great, but at the same time how does that impact on what your website looks like to those viewing it?

Most websites are designed to a fixed width to ensure that it looks perfect and works well in a standard desktop browser (used by traditionally by far the largest audience). If done well then it will look good on most modern monitors, which are set to a resolution at least 1024 pixels wide. However, how does it look on an iPad 2, which might be 1024 pixels wide in landscape mode, but is only 768 pixels wide in portrait mode, or more importantly with the growth of the smartphone market, a mobile browser (e.g. on the iPhone) which is maybe 320 pixels wide… do your visitors have to zoom in and out and scroll around the page for the content they want?

It’s always worth checking your analytics (or statistics) to get an idea of what devices visitors are currently using to browse your site. My guess is that you’ll see a growing trend of usage of smaller screen sizes. For those of you who have been involved with websites over the last 15 years you may feel it’s a little like the old days when your website had to be less than 640 pixels wide to work on low resolution monitors. These days though it’s not the restriction of the technology that’s causing the issue, it’s the growth of new technology with smaller, more portable screens.

As a business you need to pro-actively think about all of your audience, including those using mobile (or non-desktop) devices who are viewing your website, to ensure they are able to effectively view the message you are trying to communicate to them. One approach is to focus just on mobile users and offer a mobile version of your website (ideally with the content adjusted and focused for mobile users). Another, cheaper and easier way, is to use Responsive Web Design.

Websites encompassing Responsive Web Design (a term coined in 2010 but now trending) adapt the layout of the page to the device (or more aptly the available screen size) that it is available. This means that mobile users on phones or tablets are presented with (more-or-less) the same content as desktop users but it is laid out differently so that it can all be read without having to zoom or re-size the page in their device.

If you’re on desktop browser, then to best understand what I mean you can re-size your browser window (width) now and see how this page re-organises the content. I think you’ll agree that it still looks pretty good and is much easier to read on the narrowest width (equivalent to being on a mobile phone) than if you had to zoom in-and-out all the time.

The technique in question utilises CSS Media Queries which, as the name suggests, allows you to query the media being used (e.g. looking at the available screen size) and then adjust the CSS used based on the result. And being client side CSS it means that these adjusts to the layout happen in real-time.

This website implements the technique via querying for 3 different screen sizes: 954px or wider (the standard website width), under 954px (with the result transitioning well for tablets), and under 640px (with the result working all the way down to mobile browser widths). I also hide certain content elements as the page narrows to ensure the page looks good on the smaller screen sizes, and I think this consideration is really important when considering Responsive Web Design usage for your website.

Generally I think Media Queries are a great solution, and we’ll see them increasingly being used in 2012 (including by me ) however, they aren’t the end of the road. Technically there are a number of other options that can be considered when looking at delivering websites to mobile users to further optimise their experiences, but that’s will need another post.

If you think you’d benefit from having your a responsive website then get in touch today to discuss the options.

Adobe have ceased development of the Flash plugin for mobiles and instead are focusing on Adobe AIR applicatons for mobiles.

Whilst I’ve never been a fan of excessive Flash use it definitely has had it’s purpose, but now with the move to HTML5 and mobile apps to deliver online content this move does make sense in the long run as far as Adobe are concerned. This comes as especially bad news for Android developers who have cited the lack of Flash in Apple mobile products as one of the main advantages of that platform.

It also signals that the use of Flash for desktop browsing is also on borrowed time so it’ll be exciting to see how smooth the transition is to the newer web standards.

Synthetic Egg has sponsored forward Harry Swabey for 2011-2012, and he has already netted a few times this season.

Follow the teams progress at http://www.bracknelltownfc.com/

Details: The previous ITF event websites were mis-matched and didn’t offer the brand continuity or functionality needed by the organisations. Working through Andrew Whiteman of Open Globe Marketing I evolved the logo so each organisation had a clear but connected identity, and designed and developed 2 new websites in WordPress CMS which allowed them full control over their content. They can now upload and manage their own event listings (with location map and EventBrite connectivity) which get ordered and listed automatically to keep the homepage and event list up-to-date.

Details: Artemis Studios is an award winning performing arts school based in Bracknell, delivering a wide range of Dancing, Singing and Acting classes in a professional studio environment for all ages (3yrs to adult). They needed a new brochure to promote all their classes and the school itself, which needed to work both as something they could send out to prospects and something that they could distribute via schools and libraries etc. As such it needed to be lightweight and visually exciting.

We agreed on an A3 crossfold to A5 format, which gives the equivilant of 8 A5 pages and is a convenient size for leaflet dispensers and posting out, and also allows for an internal poster space for displaying on the wall. I gave this brochure a fresh look and feel whilst keeping it on-brand, and packed in details for 19 courses. I also designed a new map to help visitors find the studios in the heart of Bracknell Town Centre.

“John is a creative and adaptable designer. He has produced great work for us on tight time-scales, and has come up with good design concepts to awkward briefs. We would certainly use him again.”
Stephen Harrison, Artemis Studios

Details: IDASS care about helping people get fit for life. It’s about healthy eating and targeted exercise. The main IDASS website promotes their range of health and fitness related products, but they also have a WordPress blog where industry experts chip in with tips for a healthier life. The existing blog was supposed to mirror the look and feel of the main site, but it was falling short in a number of areas. IDASS needed a quick solution and turned to me to optimise their WordPress installation for their needs and add a few extras such as image slider and social networking links. I also added plugins to help manage their site for areas such as SEO and database backups.

“John, Just to say thank you for the work you did on our Blog at www.idass.com/blog. It really helped sort out a few issues left by the company that we had ‘design’ the site. I would recommend your work.”
Paul Moore, IDASS

1. Follow industry leaders

You need to keep your finger on the pulse of what’s going on and there’s no better way than by following leaders in your field. Not only will it help you keep up-to-date but also gives you the chance to…

2. Share third-party content that is of interest to your followers

Become the person within your circle of contacts that is the one with their finger on the pulse. B2B marketing is about building trust and one step is by being a source of trustworthy knowledge to your followers. On the flip side…

3. Your B2B followers aren’t interested in what you had for lunch

Unlike your personal tweets B2B marketing is not friendship. Sure you need to build relationships, but these are business ones and the little personal comments that are part and parcel of the twitter sphere are rarely appropriate when addressing a B2B audience (unless of course it’s part of your campaign strategy!).

4. Tweet your latest news and offers with links to trackable landing pages

You need to give B2B followers what they want, and that’s special offers and information that is appropriate to them. Keep them interested with special Twitter deals and make sure that you can track your links through your landing pages. It’s okay to post multiple tweets covering the same information, as long as there’s a sensible time difference (and indeed to help gauge response, different days and time of the day are advised).

5. Get to know your followers behaviour

Analyse how your audience reacts to different tweets, the same tweet reworded and the time of day you tweet, by tracking clicks and re-tweets. Try and work out what engages your audience the most, and when, and work with that.

Details: Turnkey Concept offer a range of kitchen and bathroom solutions for both trade and public. They needed a way to communicate all their new products and suppliers to their wide audience and decided on an HTML email template. Synthetic Egg was recommended to them and I provided them with a cost effective solution which could be used both directly from their local Outlook email client as well from any email marketing software, with just a minor change to the small print to ensure the recipients could unsubscribe.

Details: Email marketing is an important part of my own digital marketing plan, being used to help me keep in touch with those interested in my services, and as a means to communicate discount offers. It was important for me to keep the template look and feel consistent with the rest of my brand collateral (most notably the website), and also for it to be flexible so I could vary the number of articles in each category without the template struggling. As such I opted for a clean and simple approach to keep the focus on the features and offers, with a clear call to action in the footer.  Subscribe to my enewsletter to take a look, and let me know what you think.

Details: The team at Compared&Reviewed needed an online expert to trial software for their increasingly popular comparison site. My task was to download the latest versions of a number of popular FTP programs and put together objective reviews of the products to fit within a supplied template. Whilst I dabble in copywriting for many of my projects, creating reviews such as these was a new venture for me but one I found enjoyable.