Email us and we'll get in touch...



... Or call us on

+44 (0)1202 847160

Archive for the ‘Web Design’ Category

Sublime Text 2 Packages we love

Wednesday, February 6th, 2013

Here at Freshleaf Towers, we’ve grown to love Sublime Text 2. No, love may not be strong enough – we adore it. One of the main reasons we covet it is down to its extendability with plugins.

First off, you’re going to need the Package Control Manager. It’s free, and requires a quick copy and paste to install into Sublime. Once that’s on, then installing more Packages is a breeze.

Once it’s installed, go to Preferences -> Package Control. A menu will appear, allowing you to show your installed packages, uninstall, find, or install a new package. From then, installing a package is only a short search away.

Here’s our favourite packages. All of them are free aside from the SFTP Plugin.

SFTP Plugin

Much like Sublime 2 itself, this is free with an annoying message, but $16 for a user license. If you work with FTP, then it’s invaluable and well worth the cost.

Emmet

Previously known as Zen Coding, Emmet is my best friend. It makes writing HTML super easy. It uses short CSS-style values to generate all the HTML you need in very little typing.

It has a learning curve, but once you get used to it you’ll never look back. Writing HTML is now effortless and I make far fewer errors. It also covers CSS, although I don’t use it as much. It also covers calculations (useful for CSS, type 50+5 and hit CTRL+SHIFT+Y and it’ll perform the action), number incrementing, Lorem Ipsum generation, and much more that I haven’t even learnt yet. Get it for the HTML Abbreviation, stay for the extras.

Try it now. Open a new blank HTML file, type html:5 and hit tab. Magic. Then try ul.nav>li*4>a inside body and hit tab. Looks like you just made a navigation, in no time at all. Have fun. Check out the docs for more.

BracketHighlighter

Assists with highlighting { } brackets, etc. Useful for Javascript and PHP.

Laravel-Blade

Helps with using .blade.php templates in Laravel.

CSS Media Queries

If you find yourself doing lots of responsive CSS and find typing out common Media Queries tiring, this is for you.

phpbeautifier

Helps with making PHP easier to read.

NightCycle

If you’re like me and enjoy a good gimmick, this plugin is for you. As the sun goes down the theme changes to a darker theme for legibility.

Color Highlighter

This plugin highlights CSS colours as their respective colours, both HEX and RGB.

Find Function Definition

Missing a quick way to find your functions from Netbeans? This’ll solve that. With this, you can right click on a function, and find it. It’ll take a few seconds to run through your project, and throw you back at the function. Most useful in PHP.

 

The real joy of Sublime is finding a workflow and packages that work for you. Stay tuned, and in the next few days I’ll go through my favourite tweaks and shortcuts to make your workflow in Sublime truly sublime.

Tips for creating a website development specification

Thursday, August 16th, 2012

For anyone who’s worked in the website, software or application development industry for more than five minutes, I don’t need to explain the need for a really good specification.  It ensures that all parties – both developers and clients – are fully aware of what will be delivered, and it gives you something to refer back to when additional functionality is requested, to prevent scope creep within the project.

We’ve all seen projects where the slow but inevitable process of adding features to satisfy each new idea or new stakeholder causes the whole thing to flounder in a mass of mismatched expectations – developers work harder only to result in lower client satisfaction. No-one wins.

Essentially, good planning, and the ability to write a solid, specific and clear specification is often the key difference between a successful development project and an unsuccessful one. But good specifications are tough to write, so how do you get one that works?

  1. Keep costs fluid until the spec is complete.
    All costs are estimates until the specification is finalised. They have to be. The very process of writing the spec finalises the development requirements, and until those requirements are finalised, the cost cannot be fixed.  A builder won’t issue a quote until he’s seen the architect’s drawings, you can’t issue a final quote until you have your spec.
  2. Understand what kind of specification you’re trying to write.
    Typically in development projects there are two types of specification – functional and technical.  And there are two different types for a reason – they fulfil two separate roles, so understanding which one you’re producing and keeping them separate is critical. A functional spec tells you what, but not how. It lists user features, sometimes known as stories, to outline what the user will be able to do on or with the website or application (“user will be able to view outstanding orders”). A functional spec, or a partial one, is sometimes produced by clients as part of the briefing process.  A technical spec, on the other hand, outlines how the features will be delivered, and should cover everything from the coding language, platform and system architecture to sitemap, wireframes and URL.
  3. Information gathering first
    A lot of larger development projects will involve a huge amount of information gathering before a specification can be finalised – be it reviews of existing solutions,  briefings, brainstorming with stakeholders, research and focus groups, or usability studies.  Some will just require a list of required user features to be written up into a functional spec and then translated into a technical spec. In either case, ensure you’ve gathered all the input before you start trying to create the spec – otherwise it’s a movable feast from the word go.
  4. Be consistent in outlining basic requirements
    Writing specs is time-consuming because they are typically so bespoke, but you can make things easier by ensuring you’ve got the basics in a template. This not only gives you a starting point but ensures that the basics don’t get missed. Examples of this are the combinations of platform and browser support undertaken, hosting requirements or expectations, accessibility compliance  etc.
  5. Be specific & measurable – don’t ignore uncertainty!
    Specification. The clue is in the name. If it’s not specific, it’s not doing its job. Be specific when documenting everything. If a deliverable cannot be quantified into a set of numbers, or a defined goal, then refine it until it can be – and this may mean breaking down large chunks of development into smaller bite size chunks until they can be realistically documented. There absolutely will be the temptation to gloss over things, thinking “we’ll sort that out later” or “there’s a couple of ways we can handle that, let’s see how it goes”. But those are traps for the unwary which will almost certainly catch you out at a later date. If something can’t be made specific, go back to your client and ask questions as to how they’re expecting it to work, or back to your developers and ask how they’d recommend delivering it, or both, and discuss until you have a specific answer.
  6. Work through the user journey using flowcharts and wireframes
    For most website development projects, a specification is not complete until you’ve documented the various key user journeys with a flowchart (or series of flowcharts), starting with the homepage and running through all the key processes identifying the key pages or stages of user interaction. Once the key pages/stages and their relationship to each other have been defined, you can also produce very basic wireframes for each key page/stage, blocking out not how the page will be laid out, necessarily (that’s a design decision), but certainly what’s on the page and how it relates to other pages.
  7. Consider risks & mitigations, assumptions & dependencies
    These may not go into the specification document but should be written into your development plan alongside your spec.  As you look at each stage of what needs to be delivered, consider and document the risks, how you can mitigate the risks, the assumptions upon which your spec rests, and any dependencies. So, your client has said that they will be setting up a brand new hosting environment for the project to an agreed specification by the end of this month. Your project specification assumes and depends on that server environment being available on time and being as per the agreed spec. The risks are that it is delivered late, or that the hosting environment is not as expected. You might mitigate around these elements by requiring that the client to deliver the hosting platform two weeks before you expect to need it, so that both timescales and platform shortfalls can be addressed.   Learning to recognise dependencies, assumptions and risk factors is an essential skill… brainstorm these with the team and ensure you’ve planned for them as far as possible.
  8. Use plain English
    Yes, your specification is a technical document, but it’s also the document that outlines the agreement between you and the client as to what you’re going to deliver. You need your client to understand what’s in the document, and sign off against it – so baffling them with technical language is not going to get you any closer to a good clear understanding on both sides of what’s being delivered.
  9. Have someone CHECK your SPEC for specificity and certainty
    Whether your spec document is authored by the project manager or the lead developer or a combination of the two, the key thing is to have it checked by someone else once it’s finished (and before it goes to the client!). Someone who hasn’t been involved in writing the spec should check it, actively looking for holes, unanswered questions, and undocumented assumptions. Anywhere where there is uncertainty, resulting in questions such as “will it do this?” and “how will that work” must be flagged and reviewed. For the spec to be fit for purpose on final check, you must be able to use it to create a solid agreement as to what is being delivered within the project cost, and to prevent scope creep. Can your spec do that?
  10. Document change requests!
    Once your spec is complete and signed off, everyone needs to be clear on what happens when, inevitably, someone wants to change something.   Be clear in the spec that change requests will be documented, analysed, and costed – and implications on timescales and delivery discussed.
  11. Remember to look for lessons learned
    It’s an old management training adage – but if you keep doing the same things, you’re going to get the same results. So, after each project, take time to review your planning and delivery. Did it come in on budget? Did the specification do its job? What lessons were learned?

We’re recruiting!

Wednesday, April 11th, 2012
We have now finished recruiting! both of our developer and designer roles have now been filled. We will be posting about our new team members in the near future

 

We’re on the hunt for an experienced PHP developer, and a rock-solid front-end designer to join the team.

For the developer we’re looking for an in-depth knowledge of PHP, MySQL and modern coding conventions such as OOP, MVC and other frameworks. For the front-end designer we’re looking for an expert in HTML and CSS, and able to create eye-catching, functional and usable web layouts.

Full information on both roles is available on our jobs page.

Students blowing a Raspberry in the new year

Monday, January 16th, 2012

Raspberry Pi Logo
The new year may be a time for post-holiday blues but there is optimism in the air; the next generation of secondary school students are ditching ICT and learning something far more useful: programming. Considering the UK’s economy is becoming more serviced based, programming in the curriculum is a welcome move and will help the UK stay competitive. The new year also started with news of Nick D’Aloisio, a schoolboy from London, creating his own app for simplifying web searches. As a corporate website design agency we are continually adapting to new technologies and best-practice principles, and as we discovered after our recent search for a high-calibre PHP developer, there’s currently a shortage of good developers in the industry. A new generation of tech-savvy graduates could provide a welcome influx of new blood into our field, as well as changing the way people interact with technology. Maybe, Alexandra Robbins: The Geeks Shall Inherit the Earth, should be on the school book list!

To help facilitate a new generation of programmers, Raspberry Pi, a Cambridge based UK company, has started manufacture of their $25 computer. The computer is credit-card sized and can be attached to an HDTV, making computers more accessible to a mainstream audience—as well as making it an I-want-one-of-those gadget for the tech-geeks among us. The Raspberry Pi computer will be many people’s first taste of using a Linux based operating system for everyday tasks, such as browsing and document publishing. Low-cost computers are going to allow children a kick-start in their career development in lucrative games and media industries; the UK exports many Games developers but is not good in retaining the knowledge within the UK market. Low-cost computers may become thin-clients (computer using another computers processor) to powerful cloud based computers; phones are starting to follow this pattern.

The arts/science divide is slowly closing and could be the key for a long term economic growth strategy in the UK. Freshleaf will be following Raspberry Pi’s progress closely.

What makes a good strapline?

Friday, September 9th, 2011

A strapline is supposed to encapsulate everything your about business, telling customers about who you are, what you do, and more importantly why that’s great for them – in just a handful of words. You may never have thought about straplines, but if you look around, they’re everywhere – some brilliant, some misguided, and some utterly forgettable.

I have been working with one of our (b2b) clients this week to help them establish a strapline for their business… and being honest, coming up with the right strapline for the job isn’t as easy as you might think. Good headline/strapline writing is a real skill – but the information you need to come up with the right strapline already exists within your business, so with the right information and the right process, it is possible to nail it.
what makes a good strapline
(more…)

Website content – mind your Peas and Queues

Thursday, July 14th, 2011

Writing website copy: it’s an essential part of the process of creating a website, but in some cases it’s a bit of an after-thought. Sometimes we – as a web design agency – even end up supplying suggested copy for sections of the site which have been overlooked, copy which ends up going into the production site because no-one seems concerned enough to review it.

But the copy on your website is important. It should be laboured over, drafted and re-drafted, and honed into a thing of perfection. But then I would say that, because I love words. But there’s evidence that not paying sufficient attention to the basics can end up hitting your bottom line, something that every business should take seriously. The BBC news website today carries a story about ‘online entreprenuer’ (what is he when he’s offline?) Charles Duncombe, who contends that a single error in the spelling or grammar used on a website can halve its revenue.

check-your-spelling

Photo credit: CookieDuster, Flickr

Mr Duncombe, who runs a number of e-commerce websites selling everything from mobile phones to clothes and travel, measured the performance of one of his sites before and after a simple spelling error was corrected. The results, he claims, are shocking – the revenue per customer doubled once the error was corrected. Mr Duncombe doesn’t share with us his methodology nor his exact figures, but the implications are obvious.

While older generations bemoaning the quality of written English in school and university leavers is seriously old news, the figures speak for themselves – and it makes perfect sense. Whether you’re selling online or communicating your core business competencies and values, how can you expect anyone to want to do business with you if you haven’t taken the time and trouble to write well structured, interesting and above all grammatically correct copy?

Note to the eagle-eyed and the pedantic - any spelling or grammatical errors in this post are entirely intentional, and were included for the sake of irony. Any errors in the remainder of the website can be notified here.

Start-ups, mergers and acquisitions – the lifecycle of a corporate website

Tuesday, July 12th, 2011

We recently lost one of our well established clients – Icera – when the company was swallowed up by a larger tech giant, Nvidia. We were sorry to see them go, but that’s the way it goes with technology websites – mergers and acquisitions are a part of the life cycle.

Because most of our client relationships are long-standing ones, managing websites from first steps through mergers and acquisitions is something we’ve become very familiar with at Freshleaf.   We’ve done our fair share of integrating branding, products, content and messaging from one website into another – and it can be a challenging process.
Website mergers and acquisitions
(more…)

Marketing your website and your business – going back to basics

Wednesday, July 6th, 2011

Once your corporate website is up and running (or even during the build process), inevitably someone will mention digital marketing, search engine marketing, and social media… and quite rightly too. There’s no point having a website out there if no-one can find it, and increasingly it’s not enough just to have a web presence; customers (even B2B customers) expect to be able to engage with you via other channels too. But how should you go about marketing your website and your business? Certainly not as an after-thought.

Website marketing? Think goals
(more…)

Good website design – sites we like

Friday, May 13th, 2011

The thing about the web is that it’s so much part of everyday life that it’s become wallpaper – we know it’s there but we don’t notice the details. So when asked to think of websites they like, or dislike, or have felt anything at all about, most people are a bit stumped.

Of course, as the old saying goes “good design is invisible”, so it makes sense that in compiling this list we found it easier to remember sites that got it horribly wrong than ones that got it right, but that’s a post for another day.

Good website design

One sub-set of websites which really are getting it right is app websites. Okay, so they have it easy – when you’ve only got one product to talk about, and you’re only driving users towards one point, there are less concerns than if you’re trying to make a huge corporate website aesthetically pleasing and usable. But still. Here’s our list of sites we like and admire (this week, at least):

(more…)

Search Engine Optimisation – the myth and the magic

Friday, March 18th, 2011

Search engine optimisation has become big business, and sometimes it feels like there’s so much myth and misdirection surrounding it that it’s a wonder anyone can get a grip on the subject.

But SEO isn’t magic. There isn’t a secret formula. It’s really just about common sense, best practice, and legwork. That’s it.

SEO - no myth and misdirection

Consider your business goals

A lot of businesses approach SEO as ‘something we ought to do’, without really giving enough thought to exactly what business objectives the work is intended to meet. To make SEO worthwhile, and to have any idea of whether the time and/or money you spend on it is effective, it has to be tied to an objective. And those objectives have to well thought out. The aim of SEO is not ‘to get to the top of Google’, or even ‘to get more traffic’ – those are too wide and generic aims. Why do you want to be at the top of Google?  Are you looking to increase sales? To improve brand recognition? What kind of people are you looking to attract? In what market? And for what keywords?  SEO has to start from a realistic and achievable business goal.

(more…)