Design and build a website in 20 hours

by

Explore Geography responsive websiteImage credit: ami.responsivedesign.is

Sometimes good things happen when you have a tight deadline. You’re forced to simplify, which not only makes the build quicker but in many cases can lead to a better design.

I think this was the true for a side project I recently launched, exploregeography.net. Well, making the website was a side project, running the site is actually my wife’s project. Helen is a secondary school geography teacher, and Explore Geography is a resource to support her students classroom and self directed learning.

Setting rules

  • As there were no clients, other than my wife, I decided to impose a 20 hour time limit; thats 2.5 working days or so. Heck, I’m a busy person with a day job, two kids, and a Handball club to co-run.
  • Don’t work too late. Never later than 10.30pm. I’m definitely not as productive when tired. And I’m lucky to have a great job, making awesome websites for Sea, so I need to be fresh.
  • Don’t let it impact on kid time. They’re only young once, it would be wrong to put side projects ahead of family time.

All of this means I have a window of about 8pm to about 10pm, 3 or 4 days a week. Though I did also manage to grab an afternoon one saturday too.

Strike when the iron is hot

It’s refreshing to design and building something completely from the ground up, and the creative juices were flowing so I started straight away.

Napkin planning

The “kick off meeting” started over dinner out at a restaurant. Here’s the not so detailed notes:

website site map sketched on napkin

In case you can’t make out my scribbles, there’s a simple site map, which is basically homepage > year group > topic > post. Then it has the contents for the homepage: latest posts, search, and news.

Objectives:

  • Easy to access geography news, making it more visible.
  • Be a place to get more info about study topics
  • Be a place where you can access revision material like Word docs, PDFs, reading lists, and lesson material.
  • Have it’s own identity
  • “Mac like clarity”
  • To be accessed by all Helen’s students
  • Be a useful resource so other geography teachers can refer to it.
  • Based around teaching for the exam board AQA

The primary user base was roughly 15-17 year olds, so it needed to be cool looking, something that the youngsters would be keen to go and browse, and hopefully get excited about. There over 100 students, and between them probably have every handset and tablet there is. So the site has to be device agnostic.

Existing elements

The only existing elements were the photography. Helen got some great shots last year when she lead a school trip to Iceland (for which I did a quick logo). Fantastic photography always makes a designers life easier.

Browser support

As this is not for a client, I decided not to support old browsers. In fact, to be honest I haven’t even checked it on a PC at all.

Design

Actually, rewind a bit, we brainstormed some names first, which is not one of my strengths. I thought of some duffers, then Helen came up with the perfect name, Explore Geography. I was inspired to start with the logo.

Logo design

My logo process starts on paper, then when I’m fairly happy or feel like something has potential I’ll start working it up on computer. Despite the fact that these sketches are rubbish and there’s not many of them, I felt that the map concept was worth developing.

rubbish logo sketches

I like sketching ideas in biro because nothing is too precious, and bad sketching is allowed (obviously). Which is a good thing because bad sketches mean quick sketches, which allows you can move on from an idea very quickly.

Opened up my Adobe tool of choice, Illustrator, and started working up the logo and an initial design. A couple of hours later, on the 23rd of Feb, I sent Helen this email:

website concept

The logo developed a bit from this, but it’s not a million miles away from where it ended up. As this was a 20 hour project, with no client, I only did one logo option and ran with it.

The typeface is DIN condensed. I added the square brackets to add visual interest, but also explore could mean the physical environment, or the website itself. It also lends itself to the potential for expansion to other subjects, [explore]history for example. Not that I’m planning that in the near future.

At this point I had no idea how I was going to code the lines on the image, just thought they looked cool, added interest, and resembled a map-like journey.

Continue the design of the homepage in browser

In a nutshell this is my process; play around in Illustrator for a while until I think there’s something that has potential, then hit code and continue the design in browser.

There are the tools I used, all of which crucial to completing within 20 hours:

  • I installed WordPress locally (running with Mamp). It’s the quickest and best tool I know to build a blog style site. Plus we’re well acquainted and I can bend it to do what I want.
  • I usually start any WordPress project with Monkeydoo’s HTML5 reset theme. It’s completely stripped back, blank theme ready to apply custom styles to.
  • Sass. Essential for any project, but especially one on a tight deadline.
  • Codekit. Maybe getting a little old school, but I still use it. It compiles my Sass and handles live reload, which I couldn’t live without.
  • Coda 2. My editor of choice (though Atom looks very interesting).

The lines on the image actually turnout out to be pretty easy, just a set of five empty divs, positioned absolutely and with white borders for the visible sides. There’s usually a way to code unusual things like that.

Mobile first

The site is built from small screens upwards, which helps focus on only the content that is needed, and determine hierarchy. It also prevents you from putting anything unnecessary on the site.

Minimum width, EM based media queries all the way. I still feel like EMs are the best unit for web as they’re based on the users default font size. Browsers, especially Chrome, are catching up with handling pixel based layouts well at a high zoom levels, but I still feel like you may as well use EMs.

Icons

These were one of the most time consuming parts of the site, roughly a couple of evenings to make and export them all properly. There’s 16 in total. Another down side to icons is that they’re not particularly scalable in terms of website growth, next year when Helen teaches different topics I’ll need to create extra icons.

However they add something to the visual of the site. Giving it some life. I’d also planned to use them as the navigation for topic headings when you hit a level page, like GCSE for example.

I was always going to go down the SVG route for these, because SVGs are awesome. Scaleable, sharp on retina, clean, fast. Won’t work on older browsers though – but I’d already decided not to support older browsers anyway. So no need for a fall back, which means another time saver.

In the future I may adjust them slightly so they can be an icon font. I’m a big fan of icon fonts, but for the sake of saving a few minutes I just placed these on the page with the <object> tag.

Second level page design

At this point I returned back to Illustrator briefly, mocking this up to see if it could work:secondary level page mockup

Again, this is not far from how the site has ended up. The main difference is I decided to just go for a search bar instead of any other navigation. It feels like the most likely way to navigate the site once there is a lot of content on there. Plus, to be honest, it was quicker to implement.

I’ll have to test this usage after a couple of months data and feedback. Of course on a client site I’d test this sort of thing thoroughly before launch, but we’re on a 20 hour deadline here!

Archive pages

In WordPress these are post listings for a category, tag, author, date etc. For example this page http://exploregeography.net/category/water-on-the-land/

I didn’t bother heading back over to Illustrator, just styled them in code. Apart from the logo there’s no images on these pages anyway.

Not so finishing touches

We’re dangerously close to launch now, only a couple of crucial things to do. Lots and lots of non crucial, but they can wait for another time.

The search results page followed the style of archive pages, so that was pretty straight forward.

The 404 page. OK, maybe not absolutely crucial but it’s an excuse for a gratuitous volcano picture. I dare you to try an pronounce it’s name!

Is the site perfect? God no. Is there still work to do? Hell yeah. But there’s enough done in the 20 hours to make it a useable, hopefully attractive, and practical resource.

I’m particularly impressed with how Helen is embracing the Geography news section. Small snippets of the most interesting related news of the day, everyday. This is something I may well roll out on my site in time.

Speed to market

Explore Geography is not a commercial site, far from it. But with speed to market being so crucial in the business world today, it’s positive to know that with the right attitude and the right tools we can turn around good sites in über quick time.

Explore Geography is not up to client production level, but almost exclusively working short evenings, and starting with nothing on the 23rd of February, to a full functioning website on the 10th of March, it is proof that a lot can be achieved in a small space of time. Well done me.

Now go an pick holes in it – because there are plenty ;-) and let me know what you think of the site: exploregeography.net.

Leave a Reply