Paul Stone Design - Blog

UX details: How the iPhone mail app decides when to show you new mail

2011-01-25T18:02:00+00:00

Apple are renowned for making their apps really simple to use, so that they “just work”. But how much work goes into them making them so simple to use?

Both the apps that come with the Mac operating system and the ones that are on iPhone's and iPad's are often cited as examples as 'best practice'. It wasn't just one afternoon's work though that went into each app. This article on 'The Invisible' blog highlights just one bit of behaviour on the iPhone Mail app that I'm glad Apple took the time to identify it and fix the problem. It is these kind of details that make the experience better without us realising it. This is the kind of thing that we should all be striving for when approaching designing the user experience of websites too.

You’re in the iPhone mail app, and you’re looking at your inbox, when a new email arrives. What happens?

Read the full article here

Image credit: from the original author

Managing your website source code - my method to avert madness (and lose your stuff)

2011-01-21T12:52:00+00:00

Whether your website is large or small it is more than likely worth a lot to you and your business. I this article I will detail how I, if you are a client of mine, look after your site by using source code management and various backup plans.

Websites may have thousands of pages of code and databases that power them or they can be wonderfully lean and simple, consisting of only a few static HTML files and a few images. But even if they are simple, don't be fooled into thinking that your web designer/developer shouldn't be keeping backups of files and source code so that in the event of a disaster your site can be restored as quickly as possible.

Your project files that are held locally

Things you send me (content, images, etc.) are held in multiple locations and backed up in various ways.

Laptop hard drive
Back up drive with two mirrored hard drives (so if one fails the other will be intact)
Further back up drive which is a complete mirror of my laptop hard drive
Further back up which keeps each version of the file so that if I make changes and delete something important I can bring it back from the history)
Off-site back up using a service called Dropbox (they store multiple versions of each file on Amazon infrastrucuture and also version control each file so that if I make changes and delete something important I can bring it back from the history)
Off-site back up using a service called JungleDisk (which stores my files on Rackspace infrastrucuture, again keeping old versions)

Your website development files that are held locally (and remotely)

I develop your site locally, so it makes use of the same back ups as described above
I also manage the code and files that make up your site with a Source Code Management (SCM) system called… git. I know, slightly rubbish name but it is very powerful. In a nutshell, it means that every change I make to every file is described and written down in fine detail, so that I can go back to any version I need to, even if it was five years ago that I initially developed your site (assuming I was using SCM then).
As well as keeping track of the files on my local hard drive, the original repository (or place where the master files are stored) is part of a commercial web application called Beanstalk. This means that there is always another version of your site files off-site, and they have their own spectacular back up and disaster recovery plans.

Development and staging server

The next place your website goes to is a development server. This is where I commit changes to regularly from my laptop so that I can (a) check that it works on a real-life web server (i.e. not just my cosy laptop) and (b) give access to other developers if they are working with me on the site.

The files on this server are backed up to the same server if anything minor goes wrong
The files on this server are also backed up nightly to a separate server in the same facility.

The place you will spend most of your time looking at your site before it is launched is what I call a staging server. This is on the same server as the development server so is covered in the same way.

Live server

The real deal, what your customers and prospects will see and where you will make changes to your site on a day-to-day basis.

This server is hosted on Rackspace Cloud infrastructure. It is hosted on multiple servers so that if one fails another will pick up. It is also designed so that if you have a massive spike in traffic to your site it dynamically grows to cope. The files are backed up as part of Rackspace’s disaster recovery plans. I also run scripts to keep back ups of the files on my home network (see above back up methods) and also on Amazon S3 and also on Joyent, who provide my development server.

So basically your site is everywhere! And I provide all of this for free as part of my service to you. Aren't I nice!

A plea to restaurant owners everywhere: please ask for a mobile-friendly site

2011-01-11T06:49:00+00:00

Whereas a lot websites aim to keep visitors for as long as possible, restaurant websites just need to give people the information they want as quickly and simply as possible, no matter where they are and what they are using to connect to the internet.

Of course it’s nice to have a site that makes the restaurant look lovely, but often the web designer or developer uses Adobe Flash to do that. Whether it’s for the entire site, or just for certain elements of the design.

A really common use for Adobe Flash is to create a slideshow of photos of the restaurant. This will look fine on a desktop PC, but if someone is out and about looking for nearby restaurants on their mobile phone, then they are either going to see a blank hole or, if the designer has set it up correctly, a placeholder image. The fact is though that it is really simple for a web site to achieve the same ‘slideshow’ effect without using Adobe Flash at all, so please, restaurant owners, ask your web designer/developer to try to avoid Flash where possible.

If you a restaurant owner or manager and have had some of your customers mention that they can't access your website on their iPhone, please get in touch. I am permenantly offering special discounts on converting flash based websites to ones that are accessible on the iPhone.

User stylesheet to force the display of the notes field in the ExpressionEngine downloads area

2011-01-10T21:21:00+00:00

Whenever I visited the ExpressionEngine downloads area I got frustrated with the fact that the (really very helpful) notes field is hidden by default. In this article I’ll show you how to get around this if you are using Google Chrome.

When you purchase a license for ExpressionEngine it is stored in your own personal downloads section of the ExpressionEngine website. Alongside each product is a notes field where you can add notes. I use this field to remember the client/website where the license is in use. Unfortunately though, this notes field is hidden by default; you have to click a link to show each notes field individually which can be very frustrating. Here I detail how you can get around this using an extension for Chrome and a simple user stylesheet.

Please see the comments below where Ryan Masuga mentions how to accomplish the same thing in Safari.

Requirements

You have to be running Google Chrome (although this probably works with greasemonkey, and stylish on Firefox as well)

You have to have purchased an ExpressionEngine license!!

Method

If you don’t already have the Stylebot plug-in installed, install it (Note: this probably works with the Greasemonkey or Stylish extensions on Firefox as well).
Go to the ExpressionEngine downloads area and log in if you need to.
Open up Stylebot by clicking on the little CSS icon in the address bar of Chrome.
Click on the ‘Edit CSS’ button at the bottom of the window that pops up.
Paste in the following code – you only really need the first bit, but I was trying to save vertical space by rearranging things slightly):


div.tableNewTwo * { 
    display: block;
}

div.tableNewTwo form textarea { 
    height: 15px; 
    width: 400px; 
}

div.tableNewTwo div.toppad input[type=“submit”] {
    position: absolute;
    left: 450px;
    margin-top: -25px;
}

Click the ‘Save’ button.
Click the ‘X’ icon in the top-right of Stylebot to close the Stylebot window.
Enjoy!

Update: Please let me know if you you work out what you need to be able to do this in Safari, Firefox, et al, and I’ll add it to here, or link to your blog post.

Update 2: Ryan Masuga’s given details on how to accomplish the same thing in Safari.

Top tips for keeping your website alive

2010-09-01T09:56:00+00:00

You’ve relaunched your website after a project lasting months and there’s a big tick on your task list. Now what? It is really hard to keep your website fresh with recent content and keep visitors coming back for more. Here are my top tips for making sure you publish regularly (and what I will be following from now on!)

Come up with an editorial calendar

There’s a reason why your favourite magazine always has lots of content – they plan in advance. Way in advance. Try and always have at least 6 months of ideas for content up your sleeve. If you only plan on updating something on your website once a month, then it isn’t loads to think about and doing a bit of ground work will mean that you don’t feel daunted by that ‘Write blog post’ task that’s just popped up on your task list.

Set up reminders

You should enter reminders into your calendar as soon as you’ve decided how often you are going to be adding content to your website. If it isn’t in there, you’ll just conveniently not remember it needs to be done.

Have some articles in reserve

We all like a bit of spontaneous writing once in a while, but sometimes the inspiration is just not there. So if you’ve got some spare creativity going on, then write two articles (that are not time dependent – i.e. don’t write about what’s going on in [Eastenders](http://en.wikipedia.org/wiki/EastEnders) at the moment). Having a few articles in reserve will help you keep publishing to your website when you just can’t think of anything to write.

What do you do to keep content fresh on your website?

If you have some top tips that you’ve found to work great to keep your website alive, let me know in the comments.

One of the reasons I recommend ExpressionEngine: mass traffic is no problem

2009-05-15T18:14:00+00:00

When I recommend ExpressionEngine to my clients, they mostly haven’t heard of it. One question that they often have is whether it is robust enough to handle their amount of traffic. My answer is, of course, yes, but it’s obviously hard to prove it.

Hop Studios have published a post that hopes to help us all prove that ExpressionEngine can handle what we throw at it (hosting permitting). They’ve done this by listing out what they perceive to be the largest ExpressionEngine sites they know of, and boy are there some big ones! They get phenomenal amounts of traffic.

Continue reading: The 10 Largest ExpressionEngine sites on the Hop Studios website.

If you have any other questions about ExpressionEngine that you would like answering to help you make the decision to choose it as your CMS of choice, please either ask in the comments or send me an email via the ‘Contact‘ section.

An updated Tweetie for Mac bookmarklet

2009-05-15T03:16:00+00:00

What follows below is a variation on the Tweetie for Mac bookmarklet that comes “included” from atebits, the Tweetie for Mac developer.

First there was the iPhone app which seemed to become everyone’s favourite. Then atebits, the developer, set about (Mac) world domination by releasing Tweetie for Mac which brought many of the features people loved about the iPhone version into a native Mac app.

One of the added extras provided is a bookmarklet which allows you to share the web page that you are currently viewing with all of your Twitter followers in just a couple of clicks.

The bookmarklet works as advertised, but I didn’t want to have to re-type what the page was I was looking at to put it into context (the shortened links don’t give much away, do they!). So I set about updating the bookmarklet slighty.

What I came up with was a bookmarklet that by default creates a tweet with the page title, alongside the link.

So for instance. If I clicked it on this page, the resulting tweet would look like:

An updated Tweetie for Mac bookmarklet | Blog | Paul Stone Design (Web sites, email newsletters, flyers, brochures and emarketing from a Ealing, west London, UK freelancer):: http://paulstonedesign.com/blog/article/an-updated-tweetie-for-mac-bookmarklet

Ouch. That’s almost going to be as much work deleting all the other un-needed text. Definitely not under 140 characters!

So, I changed it again so that if any text is selected in the page that is used instead of the page title. So now, if I select the words ‘variation on the Tweetie for Mac bookmarklet’ on this article and click the bookmarklet the resulting tweet would look like:

variation on the Tweetie for Mac bookmarklet: http://paulstonedesign.com/blog/article/an-updated-tweetie-for-mac-bookmarklet

Much more manageable! You’ll still have to manually shorten the urls within Tweetie though unfortunately – if anyone’s got any bright ideas on that one let me know (I thought about trying to poll one of the shortening services APIs but I think there are security issues in the browser with trying to make an AJAX call to a different server to the one you are on).

So without further ado, you can click and grab it below, and drag it up to your bookmarks bar.

+Post to Tweetie

Paul Stone Design accepted into the ExpressionEngine Pro network

2009-05-02T01:46:00+00:00

I’m delighted to announce that I have been accepted into the ExpressionEngine Pro network.

The network is made up of freelancers and companies that have completed a certain number of quality, web standards-based ExpressionEngine sites.

The network is run by EllisLab, the people who make my content management system of choice, ExpressionEngine. The purpose of the network is to allow those in need to:

Discover graphic designers, programmers, flash developers, business consultants, and ExpressionEngine experts who can help you with your web development needs.

So if you’ve been looking for a decent content management system for your website, please feel free to get in touch with me to discuss it further.

Bookmarklet to add the currently viewed web page to Omnifocus

2009-03-13T15:26:00+00:00

A couple of problems I came across whilst using OmniFocus were that:

whilst on the Mac the the ‘Add to Inbox’ keyboard shortcut doesn’t work inside Firefox
when I am away from my Mac (i.e. at work on my PC) I have no way to send stuff into OmniFocus for later (of course, I could use the iPhone app, but typing out long protracted URLs isn’t the best use of my time!)

So I set about writing a bookmarklet for my browser that would take the web page I’m looking at, wrap it up in an Gmail/Google Apps email and send it to an ‘unused’ email address (I use my MobileMe one) so that later, when I start up Mail.app on my Mac OmniFocus would process them into its inbox.

Setting up OmniFocus

If not turned on already, go into OmniFocus’ preferences, go to the Mail settings and use the check box to create the Mail.app rule to process Omnifocus actions in the inbox.

Writing the bookmarklet

Here is the initial code for the bookmarklet:

javascript:(function()%7Bx=document;y=window;if(x.selection)%7Bsel=x.selection.createRange().text;%7Delse%20if%20(y.getSelection)%7Bsel=y.getSelection();%7Delse%20if%20(x.getSelection)%7Bsel=x.getSelection();%7Dif%20(sel==’‘)%7Bsel=document.title;%7Dm=‘https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=’<ins>encodeURIComponent(‘YOUREMAILHERE’)</ins>‘&su=%5BWeb%20clip%5D%20’<ins>encodeURIComponent(sel)</ins>‘&body=’<ins>encodeURIComponent(document.title)</ins>‘%20at%20’+encodeURIComponent(document.location);w=window.open(m,‘addwindow’,‘status=no,toolbar=no,width=575,height=545,resizable=yes’);setTimeout(function()%7Bw.focus();%7D,%20250);%7D)();

The procedure

If you use Google Apps, you need to replace the trailing mail in https://mail.google.com/mail/ with a/YOURDOMAIN.COM/ so it becomes https://mail.google.com/a/example.com/?view etc.
Add your email address where indicated
Copy it all
Right-click on your toolbar and click new bookmark
Give it a name (e.g. +Omnifocus)
In location paste the code you copied from the text box above
Click OK

That’s it. Next time you are on a web page that you want to save for later, simply click the bookmarklet button. The email will pop up. you can change stuff, added extra text into the body field (which gets used as the note) and press send. The item will end up in your inbox (the task name will be prefixed with [Web clip] so that you can easily spot them/search for them.

Some things to know

Your destination email provide might not support emails like name+omnifocus@example.com so you may need to use the other way Omnifocus allows, which is to prefix the subject with something as described in the OmniFocus preferences.

If you didn’t select any text on the page, the document title will be used as the task name. If you did have some text selected on the page, that will be used for the task name.

Customising the bookmarklet

You could change the prefix ([Web Clip]) to something else, or remove it completely.

You can add contexts (for example, you may think that everything that you will be clipping needs to be done online, so you need to add @online after the subject

You can add start dates, due dates. All the things as outlined in the OmniFocus user manual.

If you find any problems with it, have any difficulties in customising it the way you want (I certainly did!), please leave a comment below and I’ll see if I can help.

Getting started with Search Engine Optimisation

2009-03-13T14:06:00+00:00

I was going to write an article about SEO, giving some simple advice and examples as it is a question I get asked about all the time. But Chris Coyier over on CSS tricks wrote an article just like I had envisaged recently, and to be honest, I couldn’t put it better myself.

The Checklist

1. Does this page have a good amount of honest information on it about the subject?

2. Is the information on this page well structured in the markup?

3. There aren’t any stupid cheap “tricks”

4. Is the URL for this page clean and relevant?

5. If you were researching this subject, would you find this page helpful? Would YOU link to it?

6. Is the website a reliable source of quality information?

Check out Chris’s original article, with more information here: Common Sense SEO Checklist

If you’d like help with Search Engine Optimising your web site, please drop me a line. Although I’m not anywhere near an expert, I can provide you with some consultancy to get you started.