One of the most important things to keep in mind when building a website is consistency. When a user comes to your site, you want that user to become familiar with things and be able to easily navigate through it. To accomplish this, it’s essential to focus on consistency from the beginning of the design and the development process. Today, I will provide some tips for building the foundation of a clear and easily navigable website.
Study the Mockup
Before writing one line of code, take time to become very familiar with the mockup your designer produced. Take notes on the style and functionally of the site, considering how you plan to approach them as well as what further research you’ll need to do. Doing this will help you minimize the surprises and complications down the road and set you on a more efficient development path.
Pen & Paper
Sometimes, the best thing you can do is go back to the basics. Taking the given mockup and drawing out wireframes is a great way to eliminate all the flashy colors, images, or functionality that you simply do not need to worry about at this phase in development. For me, drawing a wireframe allows me to approach building the layout in a more systematic fashion. I am able to see what columns go in what containers and visualize the margins and paddings with arrows. I can’t understate the importance of this phase, and after you’ve done it a few times, it will become second nature.
Plan your CSS Classes
It is nearly impossible to avoid the random CSS classes that sometimes have to be created to finish a certain task or perfect a certain look, but the less of these you create, the better. In general, having fewer CSS classes will make identifying and solving problems much simpler, especially when you are already very deep in the process. Having clean, organized, and consistent classes will be great when an issue comes up because you will be able to easily target and change that element without having to deal with overwriting, finding it, or using !important tags.
Global Elements Page
After taking time to study the mockup, draw out my wireframes, and plan out my CSS classes, I can finally get around to the global elements page. This page acts as the central development hub for all of the recurring elements on the site. This includes sliders, titles, content blocks, buttons, forms, etc. Using a central page like this allows me and the designer to see all of the elements together, how they look, and how they function before copying them to real pages. The individual page creation comes after the global elements page. This should now be much simpler because elements from the global page can be copied and put on the new page, and then the content can be switched out.
Think Before You Do
It is safe to say that this is a pretty important rule in most aspects of life, but it is particularly important in website development. In the initial development process the decisions you make will build the foundation for future developers. Whether it is you working on it in the future or someone else, it is important to plan for change. There is nothing worse than going into the back end of a site that you did not build—or you built a long time ago—only to find a complete mess of code that is almost impossible to edit, and it only gets worse every time something is changed or added. With this understanding, try to avoid using random classes and inline styles, and make sure to label everything. Labeling code is critical; you and/or future developers will be grateful every time you do.
Sometimes, the development process can feel like a sporadic mess or a never-ending web of tasks, but these tips can help you start to become a more efficient developer. Implementing these tips into your development will make the process consistent and the finished website much more effective. Here at Blue Frog, we know quite a bit about the website development process and would love to talk with you more about it. Check out our website design page, and set up consultation with our experts today.
