Tagged with web-dev …

Jan 18 2012
Leave a comment
User Engagement, Web Development

The importance of microcopy to your website or app

First off, what is microcopy?

Microcopy refers to the small bits of text on a website such as form labels, form buttons, instructions, error messages, popup tips and action confirmations.

Put another way, these are the parts of your website that visitors pay closest attention to. 

Clearly then, it’s pretty important. Yet for some reason, this is often left in the hands of the developer. Perhaps it is seen as part of the technical build, as it will interface with a database. Perhaps it is not as interesting to a copy writer as the marketing messages on the homepage.

So why is microcopy so important?

I state above that visitors pay closest attention to items such as form labels, buttons, instructions etc, but why?

It is because this is where the user is directly interacting with you. This is where the dialogue is.

Do you point telephone enquiries from a printed brochure to the designer that created it? No. You point them to a specialist within your company who knows all the appropriate information. You point them to someone who not only understands the user/client/customer but can also represent the company in the appropriate manner with the correct language and tone of voice.

So please, don’t leave microcopy to the developers. It is not secondary, it is vitally important to the message you are sending out to your users. It is the first conversation you are having with your users.

Tagged , , ,
Dec 29 2011
Leave a comment
Knowing Node, Web Development

Abandoning the good ship Microsoft

Over the past 10+ years I’ve been building websites on a variety of Microsoft stacks. This is all very good for corporates and businesses with a Microsoft infrastructure in place, but when it comes to building and launching personal projects with no funding you start to notice the costs. So I’ve decided to look for alternatives.

LAMP?

The LAMP stack (Linux, Apache, MySQL, PHP) is the obvious place to start. It is well established, stable, and has a huge history and active online community. But, it doesn’t really satisfy my desire to learn something new. Sure, it would be new to me but it has been around since the late 1990′s. That’s not new!

Node.js

Over the past few months I’ve been hearing more about Node.js, a webserver using JavaScript as the server-side language. It is supposedly very scalable, and very light on resources. Okay, I’m interested.

I also know JavaScript pretty well; I’ve been using it client-side for over a decade. Okay, I’m very interested.

This doesn’t mean to say that there’s no learning curve. I’ve got a hell of a lot to learn.

Node.js can now install and deploy on Windows, but that goes against the point of saving deployment costs. I don’t want totally different development and production environments, so I’ll be starting from the ground up.

Much to learn

As a minimum I need to learn:

  1. Operating system – Linux (probably Ubuntu)
  2. Webserver – Node.js
  3. Database – MongoDB (or perhaps CouchDB)

And then moving forward to increase stability / usability I’ll need to look at additional pieces such as:

  1. HTTP / Proxy server like NGINX
  2. Frameworks like Express
  3. System monitors
  4. Server cache e.g. Varnish

The journey through 2012

I aim to have my first site/app up and running within a year from now. I know this doesn’t sound very ambitious, but I do have a full time job and a young baby also competing for my time so I need to remain realistic!

I’ll be charting my journey here under the category Knowing Node.

So … lot’s to do in 2012. And first things first, I’ll be looking at the operating system. Linux, I’m heading your way…

Tagged ,
Dec 10 2011
Leave a comment
User Engagement, Web Development

Why you should design for iPads (and other tablets)

There are two main reason why you should make your websites and apps compatible with iPads and other tablets.

1: Future compatibility – the market share is growing

If you look at the usage stats of most sites you’ll see the number of people visiting from tablet devices is slowly but steadily increasing.

The percentage is still quite low in relative terms, and you might not normally focus on such a small subset of users. As it is growing however, with no signs of slow-down, you can be sure that at some point in the future you will be asked why your site doesn’t work well on tablets.

2: Acceptance from influential early adopters and opinion leaders

Although the percentage of users is low in terms of browser stats, the people browsing on iPads and other new generation tablets are  likely to be the early adopters & opinion leaders.

These are the people who’s opinions are respected and requested by others. These are the people you want on your side.

If your site / app works well on the new devices you are more likely to be remembered favourably and recommended to others. If your site goes so far as to surprise & delight then even better.

If your site fails, you will instantly be forgotten and dismissed. Even worse, you may be publicly derided.

Supporting iPads is arguably more important than supporting old versions of IE, even though the latter may have a higher percentage of use on your site.

* Disclaimer: iPad ownership does not directly make one a thought leading, cash rich, decision maker.

Tagged , , ,
Oct 11 2011
Leave a comment
Web Development

SEO meta data quick reference

I keep having to dig this info out, so I’m putting it here for posterity. This is to help us web devs, and web designers, content creators and editors generate great SEO-centric meta data for websites.

Title

Less than 70 characters. This is the limit Google displays in search results. This should be relevant to the content and generally not start with the name of the company or website (there are some exceptions to this rule of course).

Description

Less than 160 characters. They can be any length but search engines generally truncate snippets when descriptions are longer than this. The focus of this should be a compelling reason to click on the link, rather than keyword stuffing.

Keywords

Largely unused now. They are not used for searching or ranking, but competitors can use them to see what keywords you are targetting!

Content

The other items are very focused on getting clicks from a search engine result, but it’s good content that will get you high up the rankings. Make it relevant, short, snappy, and make good use of headings. We won’t go into semantic markup here, this is a quick reference!

Further reading?

Want some further reading? A good place to start is SEOmoz
(of no affiliation to me, it’s just a good resource)
Tagged , , ,
May 25 2010
2 Comments
Productivity

Lipservice – a lorem ipsum generator for Windows

A fantastic little app for saving time when developing or designing websites – or indeed anything that requires dummy text flowing in to complete a layout – Lipservice is a lorem ipsum generator for Windows.

It’s often useful to quickly insert some random text to fill a space, so you get a feel for how something looks or works. You could always randomly hit the keyboard in a “yuwggdsadf” kind of way but that looks a little messy. Or you could head to a site like www.lipsum.com and grab some text to copy and paste in. Typically:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The problem with the latter is that you tend to get the same sentence repeating throughout your design, so you don’t get the variation of layout that you will eventually see from the final copy.

This is where Lipservice comes into its own. Once installed, press Ctrl+Alt+V and it will paste a random latin sentence into your document. Here’s a few for example:

Proin gravida dui qui enim variu eleifend. Integer accuman feli it amet odio loborti at adipicing metu rutrum. Pellenteque habitant morbi tritique enectu et netu et maleuada fame ac turpi egeta. Sed commodo tellu ut mi tritique pharetra.

This is quicker than going to another website to copy & paste, and looks better in a document than:

asdfsadfj;l jsdkl;j asdoifaspuqweru klsjdfj lweupo dsfj ;weoruasdflk; sad;fsdjl.

As I have just discovered, as well as being messy, this takes longer than a couple of Ctrl+Alt+V’s.

So it saves time and produces better layouts. That’s what I call a win-win!

Lipservice was created by the guys at The Simpler Solution, is free, and is available from www.lipserviceapp.com.

Tagged , , ,
May 14 2010
Leave a comment
Social Networking

Social graphing, privacy & security on the web

I’ve had a half-written draft version of this post for about 6 weeks, in which time the landscape has shifted massively. For instance Facebook have changed their privacy policies (again) and completely changed their “Connect” system. Also Jason Calacanis has written his Zuckerpunch piece slating Facebook and the reasons & ethics behind what they are doing.

Just to set things straight from the outset here, I’m a web-developer currently – amongst many other things – building a couple of sites that will interact with social networks.I love the social and integrated direction that the web is currently heading in, and am intrigued by the possibilities of social graphing.

But I also have a thing about privacy – I like to choose what I share and with whom, and what I keep private.  As well as having Twitter / LinkedIn / FourSquare / blogging accounts I do have a Facebook profile to which I upload the occasional photo, change my status & interact with friends. But personally, I never “connect” with Facebook from external sites, or “like” other sites or pages. If I like something and want to share it I’ll tell people directly.

However, the sites I’m involved with building at the moment will have the ability to “Connect with Facebook”, and not because I like the system, but because other people do and find it convenient to have a shared login for numerous sites.  I’m also not blind to the fact that if people talk about my sites on Facebook it will improve visibility and traction.

In a way, Facebook is showing us a glimpse of the future, and I have no doubt that being able to have your online “social” identity and network seamlessly integrate into a whole variety of different web-apps is A Good Thing. Personally though, I’d rather that the hub of my online identity was not tied irreversibly to one specific central system, especially if that system has scant regard for its users’ privacy rights and security.

So whilst Facebook might be showing us a glimpse of the future, I hope that Facebook – as it stands – isn’t the future.

Right now I think there’s a lot of space in the online social market, and I hope that people with integrity are able to grasp the opportunities and make the most of it. Ironically, one of the best places to advertise any new network will be Facebook!

This is very much a case of “watch this space”. The open-social-graph vs privacy war is just warming up, and there’s plenty of space for heroes and villains, victors and casualties.

Tagged , , , , , ,
May 05 2010
Leave a comment
Web Development

Thoughts on HTML5, Apple and Adobe

Following the handbag-waving of Apple & Adobe I was asked by our IT guy - mainly Apple-based -whether, from an agency perspective, we were considering ditching Flash in favour of HTML.

My initial response:

Website wise we can’t consider moving to HTML5 for some time, not until IE8 dies.
http://theholmesoffice.com/2010/04/12/how-ready-are-we-for-html-5/

We tend not to recommend Flash for a full site anyway, as you know. Lack of mobile support just adds more weight to this argument. For the time being we’ll still use Flash to bring certain areas to life as it’s still the prevalent technology. However, it shouldn’t be for anything critical to a given site.

We’ll keep an eye on HTML5 developments & support, and see where this argument ends up, but we’re certainly not ditching Flash entirely for now.

Summary: this is a decision for 18 months time. Flash is still the dominant technology with widest support so we’ll stick with it for now.

This elicited two reasonable questions:

Are still stuck in the ‘when Microsoft updates then the world follows’ state?

So, with mobile devices becoming the standard for the new way we consume internet access, IE only being available on Windows smartphones (by a huge margin not the norm) and open standards as mentioned on the web page emerging, maybe Apple is right about Flash… A great technology for it’s time, but that time is almost over?

My follow-up response.

I’m hopeful that IE8 won’t linger as long as IE6 has.

You probably know all this, but this is the background as I see it. When it was first launched IE6 was a whole leap forward (although everything else that leapt after it did so in a slightly different direction!). As such a lot of internal corporate intranets/applications were built specifically for it. IE7 took steps towards following the standards, the outcome being that these bespoke systems wouldn’t work so corporations couldn’t upgrade. This is the main reason why IE6 is still there and lingering well after it’s time. Systems being developed for IE7/8 are – generally – less browser specific so upgrade paths should be easier.

Even so, back on topic, we will have to wait until IE9 becomes mainstream and 6/7/8 become insignificant before we can fully use HTML5.

If  1) Apple persist with the refusal to allow Flash Player on its mobile devices, 2) the trend for browsing on these devices continues to increase, and 3) Apple’s market share doesn’t suffer from this (or other issues/competition) then we’re going to end up back in the bad-old-days of duplicate code and code branching. A side issue with HTML video at the moment is that there is currently no standard codec and different browsers are supporting different versions. *sighs* *rolls eyes* *heads off for a pint*

I’ve never been a big fan of Flash, but that’s mainly down to bad implementation and lack of consideration for accessibility / usability issues. On these points I agree with Steve Jobs, but that’s not a technology issue, it’s an implementation issue. There are also some terrible, unusable HTML websites out there too! I think Flash is a good enhancement tool for general websites, and good for online games & tools.

Flash in its current guise may be a technology of the past, but I bet that behind the scenes Adobe are working at ways to make it more suitable for the modern web & touchscreen devices. For example the Packager for iPhone feature in CS5 http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/

Tagged , , , ,
Apr 14 2010
1 Comment
Web Development

How ready are we for CSS3?

Following up on my “How ready are we for HTML5?” post I thought I’d complement it with this look at CSS3 supports levels in current browsers.

The site I’ve used for this is http://tools.css3.info/selectors-test/test.html which, as a caveat, only checks for selectors.

Anyway, here are the current results on Windows 7, out of 578:

Chrome 4.1: 578
Safari 4.0.4: 578
Opera 10.51: 578
Firefox 3.5.9: 578
IE9 beta: 578
IE8: 349
IE7: 330
IE6: 276

[IE9 beta using the IE Test Drive, and IE6/7 using IE Tester]

As we can see there’s pretty ubiquitous support across the modern browsers, gradually getting worse the further back in IE history we go. Dwelling on this is a bit unfair to IE as I’m not looking into the history of the other browsers, but sadly it is relevant due to the market share.

Taking the HTML5 and CSS3 compliance together just fuels my suspicion that IE8 will be the new IE6. Until IE either loses their massive market share or IE9 becomes the favoured version we can’t rely on HTML5 and CSS3 for our sites.

Tagged , , ,
Apr 12 2010
2 Comments
Web Development

How ready are we for HTML 5?

Today I came across The HTML5 test at http://html5test.com/

Visit this site and it will tell you to what extent your browser supports HTML 5. At the time of writing the maximum score is 160, but as the authors note this is a moveable goalpost as the spec is being updated.

These are my findings on Windows 7, in descending order:

Chrome 4.1: 118
Safari 4.0.4: 115
Opera 10.51: 102
Firefox 3.5.9: 100
Opera 10.1: 38
IE8: 24
IE7: 11
IE6: 11

And the trusty Nexus One? Joint top at 118 :-)

So how ready are we? Getting there, it looks as though the browsers who release frequent updates are working on their HTML5 rendering – see the huge leap seen in the recent Opera release. Sadly, it looks as though it won’t become mainstream until IE8 dies. Seems to me that IE8 is destined to be the new IE6, just give it a year or so. Presuming IE9 supports HTML5 of course.

I’ll update this page as the browsers get updated. Post your scores in the comments along with Operating System, Browser and Browser version and I’ll add to the list.

Tagged , , ,
Apr 07 2010
Leave a comment
Web Development

.NET MVC to give more control over HTML output

I never really gelled with standard .NET. I like nice neat HTML over which I have complete control. ASP.NET doesn’t let you do this, chucking everything into forms and adding its own controls.

I’m not sure how I missed .NET MVC appearing last year – I must have been having too much fun with jQuery. Well, that and getting married and moving house I suppose.

I’ve not played with it much yet, but it looks as though by moving to an MVC structure that .NET have returned control of the front end markup to its rightful owner – i.e. me!

So, I’m going to dive in and will no doubt be back when I know more.

Tagged , , , ,