The Importance of Planning

How I Quickly Learned to Love Preparation

Have just completed a project that involved making a responsive website, I thought I would share my thoughts on the importance of taking time to plan out a project fully before you dive into the code.

I am sure for some people such planning is second nature, with tasks being approached methodically whether that task be grocery shopping or building a website. However, for some, planning is often a reaction to hitting the first hurdle in a site design, and if you are building a site that is to also be viewed on mobile devices, this is far from the ideal approach. For example, you could find two sites that are designed for a single browser size that look identical on the surface, but can be coded in two completely different ways. Simply ask your colleagues or classmates how they would approach building a site and, while the choices of colours, font-sizes and images will be the same, the approach to construction can be wildly different; extra divs, all-encompassing wrappers, padding over margins, floats and the use of clearfix to name a few.

No matter what approach is taken, spending that extra bit of time in preparation can be invaluable. A quote attributed to Abraham Lincoln states simply, “Give me six hours to chop down a tree, and I will spend the first four hours sharpening the axe.” The message is, don’t dive in. This is especially important when planning a responsive site; not only does that particular section have to look good on a desktop, but how easy will it and it’s content be to manipulate in order for it to look as good, or better, on a handheld device?

As an aide memoire for future projects, the following is a list of factors I will consider:

1. Think big. Especially important with responsive design, think about how the elements of the page will be contained. For example, do you need a global wrapper, main sections, asides, divs or a combination of these and more? Once you have your main layout, follow the same process for all other screen sizes, concentrating on how the content can be manipulated.
2. If you are building a responsive site, color your backgrounds differently for the various screen sizes while you work. This will save you having to refer back to the code and measuring where the page changes occur.
3. Color your divs, sections etc. so that it is easy to see positioning and borders while they are being manipulated.
4. Think about the content within the sections or divs. How easy will it be to manipulate? Will font-sizing and padding be enough to achieve the desired positioning or would it be easier to section of the content with the use of more divs and classes?
5. In order to keep classes consistent, plan out what you will use before hand in a list, rather than thinking about names of classes for elements as you come to them.
6. When trying to fix a styling issue, start by taking out styling elements rather than adding more. A haphazard and inconsistent approach to styling can make a stylesheet for a responsive site very very complicated. And don’t forget to add comments. I am often guilty of this, but an extra 5 seconds to write a explanatory note can save 10 minutes of searching through code later.
7. Thinking about UX is very important, but even the coolest interface will suffer if it is built on dodgy foundations. I will have an overall idea of how I want a site to function but I will try to not get hung up on thinking about coding details and interactive elements before the core of the site is complete and I am happy with the layout.
8. Don’t be afraid to change things if they are not working. Sometimes trying one thing will lead you in a different and more exciting direction, and if it does, take time to pause and plan your next steps.

Hopefully I can follow my own advice and ideas as I continue to work. Certainly, knowing now what goes into a good layout, I will be spending that extra bit of time on planning before I open my text editor.