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.
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.
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!
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.