Category Archives: Technniques

How to name your business

You’re starting a business. You want customers. You’re going to have a website and you want people to see your site. What will you be called? Trading in the online era allows you to reach a greater marketplace than ever, but potential customers need to either know you or be able find you. It all starts with a name.

What’s in a name?

You’ve probably already spent many sleepless nights agonising over the name of your new enterprise. You found the perfect combination of words to convey the spirit of your business, but does it tell people what you actually do?

Good website names fall into two categories:

  • short and memorable
  • long and descriptive

The first category is great for word of mouth. You can tell someone the name of your business and it’ll stick around in their head. Next time they need a collectible garden gnome, they’ll come straight to you at Gnome Zone.

If you’ve got a longer, but more descriptive name you’ll find it does a lot better when people are searching for a business online that matches your name. Your potential customer goes to Google and types “buy armadillos online” (a popular search, I’m sure). The first result is the one that most closely matches their search, so your business “Buy Armadillos Online” gets their click.

Uniqueness

Google your new name before you do anything else. What else appears when you search for your specific business name? All of these links are in vying for the very short attention span of your potential customer. If there is another business that does the same thing and has the same name (or one similar enough to be confusing), I’d advise against that name. During this search it’s well worth looking a few pages into the search results. If someone has recently set up a new site with the name you’re proposing, they may not yet be on the first page, but by the time you’ve launched your site you could have more serious competition.

The URL

URLs are important. If your business name is in your URL, you’ll rank higher when people search for your business (also, who wants a URL that doesn’t have their name in it?!). I launched my events ticketing website Ticketlab 4 years ago now. When I bought up the domain ticketlab.co.uk, the .com address wasn’t available, but wasn’t actually in use. 2 years later, a site appeared on the .com, confusing my search results. If you wish to “own” the name, and you think it’s a name that someone might want to use later, try and buy up the .com, the .co.uk, and any others you can afford that seem relevant. There are so many domain extensions available now, you’ll never be able to own them all, but you might be able to dissuade a future rival from the name by marking your territory.

Social

Is your business name available on social media? Setting up these profiles and linking them back to your website will give you better search rankings. Additionally, adding your business to Google’s business listings will give rich information and reviews on search results pages.

Ticketlab's Google search results

If your name has already been taken, try adding a descriptor, such as “shop”, “app” or your country to the end (Ticketlab is TicketlabUK on Facebook and Twitter).

In summary

Naming your business is one of the hardest decisions you’ll probably have to make when you start a new enterprise. All of these tips may seem like constraints on the creative process, but if you keep them in mind you’ll ensure that people can actually find you online when you’re ready to start trading.

Handy git commands

If like me, you occasionally use Sourcetree or similar Git GUI to quickly change branch, after a while you may find yourself with 200 branches in the left side, making this task a lot harder (and making you wonder why you’re not just using the command line!).

A quick remedy to this is to run:

git branch -d $(git branch --merged)

This rids you of any branches that have been merged, leaving you with a nice clean branch list.

If you then find yourself with a large pile of branches you never pushed to remote and merged (and indeed never will), you could then run:

git remote prune origin

This will remove any branches that are only on your local. Make sure you push whatever branches you’re working on first though!

Enjoy!

Building a web page from an InDesign file

There are an increasing number of articles around about how to design websites using InDesign. In theory (and according to the logic of these articles) there’s nothing to stop you designing a web interface in InDesign. In fact, there are some reasons why it’s almost more suited to web design than Photoshop: the ability to keep multiple pages and layouts within one file, the smaller filesize for holding all of those layers.

That being said I’d still never advise InDesign as the tool of choice. If you take a reasonably simple layout such as the one I was given for social discussion platform Pressr and use InDesign’s own Export to HTML functionality you end up with a complete mess.

Pressr Homepage in InDesign  HTML as exported by InDesign

Don’t forget we are looking at software built for print design here. To all of those people, organisations and blogs instructing in how to design for the web in InDesign: stop.

So, here’s the real problem: you’ve been given an InDesign document and you need to make a web page from it. What’s the best way? Previously I’ve faced this problem by exporting the layout to Photoshop as a flat file (PDF or even just screengrabbing it) and working on it as usual.

Here, we assume you have a good working grasp of HTML and CSS in their most recent guises.

Step 1: Export to HTML (to get your images)
Yes, I know I’ve already said the results of this are pretty dire, but what InDesign does do well here is export all of the images you need and at the correct sizes in the right formats. It knows when a PNG is better suited than a JPEG – usually based on the source of the image (an AI file in your layout will be saved out as a transparent gif, a photo makes it out as a jpeg). I did find my images came out twice as large as they were in the design – I’m not sure if this is due to the document set up or something else in the file – but you may need to open these in photoshop and resize them.

Step 2: Get your text
You may find it’s easier to copy the text from your design from the HTML file created in the previous step before you discard it – it’s no picnic to select every text box within a layout and copy the text.

The other method of selecting and copying all text in an InDesign document is to use a script found at Application > Samples > Javascipt > ExportAllStories – this exports every text area as a separate text file, which creates it’s own problems.

Step 3: Start coding
So, you have all of your text in one document and a handy directory full of images, now you need to layout the structure of your HTML document. First up, I recommend downloading a copy of the HTML5 Boilerplate as the basis for your HTML. It’s a solid start, but you might find some parts unnecessary for your project – I rarely use Moderizer on small projects where the HTML will be mostly flat for example. At the very least you’ll a need DOCTYPE, a head (containing your empty stylesheets) and a body. If you don’t have a head or a body I wonder how you hope to do anything in life.

At this stage it pays to layout all of your text (including headers, navigation and footers) on your page in the order that is most logical for it to appear. What you’ll make here is a document without styles that shows your text in the right hierarchal order. In the case of our Pressr design, even though the hero image and that quote are first in reading order, if I were looking at this without images, I would probably want the main text to appear first. This is simply based on what’s most important on the page and without the user having to scroll. If this page is also to be responsive then I image mobile users would have a lot of scrolling to do if encountering that image first, so let’s just start with the main copy.

Wrap your text and divide it into sections using the appropriate tags. Your header should be in a header tag, your footer should be in a footer etc. You can see my Pressr HTML layout at this stage if you like. Notice I’ve placed the main content in a section tag and the image and quote in an aside tag. Sections are often used as a replacement for a div, although this is incorrect usage according to the spec – they should be used for content that could be considered stand-alone i.e. if placed on another page would still make sense on it’s own. Asides are used for content related to the current page, but not necessary for understanding it, hence my usage here. When viewed in the browser at this stage without styles, this is what you get:

Screen Shot 2013-11-18 at 07.35.57

I could leave it at that really – Google would be happy with it certainly – although the client may complain.

Step 4: Get some style
Depending on the size of your project you may want to use a CSS preprocessor such as LESS or SASS, or you may want to employ a framework such as Bootstrap to give you a head start.

Personally I tend to find frameworks are more useful if you are prototyping and need elements with pre-defined styles so you can just add a class and forget about the styling for a while. This design is pretty straightforward and we only have a handful of pages (all similarly styled) so I’ll just be coding my CSS from scratch.

I will include a CSS reset (everyone should), but otherwise we’re just going to get stuck in.

Your main ally in InDesign is the Window > Info panel. When you click an image or layout rectangle it’ll tell you the width. This is assuming the designer built this to web specs and using pixels. If not, you may still have to export and open in photoshop in order to resize the design to a suitable size and find out the sizes you’ll need!

If you want to find the colour of an element simply click it and double-click the colour swatch in the left hand tools menu – this will give you the RGB colour. If you’re keen to use the hex value, then you’ll either need to convert it or you can find the value in the Character style palette as detailed in this article.

The finished product can be seen at pressr.co.uk