What happens when your design goes into development

Ever wondered what happens to your design when you hand it to your developer? I know the whole point of the MAJ Web philosophy is that you don’t have to worry about it, but you might just want to know. So here is how I go about turning your Photoshop or Illustrator files into websites.

Planning, planning, planning

The first thing I focus on is planning.

I have a series of ready-made to-do lists, each corresponding to one type of project. These are most particularly helpful during boring yet delicate tasks such as moving a website or testing it. I will pick the right list(s) for the project at hand and customize it (them).

I then dissect your design to look for general rules or patterns. I will look out for things such as margins after paragraphs, the main font size, the header sizes, the main colours and save that info for later. In the case of a responsive website, I will also determine the break points (screen sizes at which the layout changes).

This is typically the phase where I decide in which order I am going to build the various pages of the website: from ‘plainest’ to most specific, in other words from the page that has the most ‘average’ design to the one that features the most exceptions. 90% of the time I start with the ‘T&Cs’ page and finish off with the home page.

Now that I don’t have to decide what I have to do anymore (as I am following a plan), I can focus on the nitty gritty of web development.

Content first

I create the website on my computer. That means I install the content management system requested (usually WordPress) and I will fill it up with the copy and pictures.

As I am entering the content, I am also customizing the CMS in a way that it becomes easier for the client to update their website whilst avoiding their breaking the design on doing that.

I will also work out the best size for the content pictures (if I haven’t done that yet during planning).

Coding, coding, coding

Now that the content is in, it’s time to implement your design around it.

I will select a starter template for development – I love Bones for WordPress (http://themble.com/bones/) – and set it up.

And now we are coming to the bits you REALLY don’t want to know about (unless you want to become a developer yourself). So, without entering into the technical details, I will only tell you that I start with implementing all those ‘general rules’ I worked out during the planning phase. I then move on to work on the header, navigation and footer. And then go through the pages in the order I decided when planning the development. Think of it as sketching and refining.

I use a mobile-first approach, which means that for each element or page, I will start with the mobile version, move up to the tablet version, and finally to the desktop version.

For every feature of the website, I will always try to find a solution with CSS and only move on to use some Javascript for the bits that really require it.

These last two points are to ensure good performance (reasonable loading times, including on mobile devices).

Testing, testing, testing

I take a look at every bit of the website in the most recent major browsers and I do that for every screen size.

I then upload the site for viewing (note that this bit is more time consuming then you would expect!) and test it on mobile, tablet and on older browsers.

Hopefully, there is not too much to correct for the various browsers!

Tweaking

And then you know what happens, because I then get in touch with you to show you the website. I can then get your feedback and we can tweak the site before the launch.

Like that blog post? Get more straight to your inbox PLUS... your FREE checklist to ensure your websites are developed on budget and on time.

Leave a Comment

Your email address will not be published. Required fields are marked *