The online world has taken a big leap in the past couple of years, with plenty of major adjustments like HTML5 & CSS3. Another being WordPress, it has grown to be the mostly used/preferred Content Management System (CMS) sure to its flexibility and integration modules.
On a daily base I juggle between the two, mostly WordPress, but the framework does require the use of HTML5 & CSS3. To be able to fulflill the purpose of a website, it needs to reachable and clear to your lowest common denominator, meaning that even a 70 year old granny should be able to use your website.
In terms of reach, we use a common terminology called Responsive Web Design (RWD). This basically means that your site should retain its entire design on any device, whether it be desktop, laptop, tablet or mobile.
Before you can start on a web project, you will need to identify what exactly it is you want your website to do, and only once that is resolved you may continue to the process.
To be able to exactly pinpoint your breakpoints, wireframes are developed as an outline of the layout to show how well your site would respond on different devices. These can be in the form of scamps, digital wireframes or a wireframe generated from a website, trust me there’s plenty of those.
This way you would be able to identify the function.
In this step, we identify if this site is media rich, text based or both. Essentially it does make the framework process much easier.
There are plenty of frameworks available that are developed by top class developers, and this would be a good place to start, as it is packed with all the elements which would be needed to make your website responsive.
With this done, the form is in place.
So now you have a framework, what’s next?
Based on your brand, we can now safely add colour to the wireframe, and though it sounds like a creative and fun process, it is critical that you choose your colours carefully so that whoever is viewing your website won’t leave any time soon.
Also reduce the number of call to actions (CTA) to avoid the user feeling that they are forced to click the button. We recommend that high resolution images be used, not only for the quality, but the downscaling onto different devices too.
Test, test and test some more.
I can count all the major web browsers on one hand. This means that you would need to not only ensure that your site responds well on all devices, but also display the same on all browsers, and for many years the most known browser to test for issues is Internet Explorer (IE). To avoid the headaches, we let our friends view at the site on their mobile devices, and give feedback. Next we ask someone working on a desktop pc to view the site, and then whoever has a tablet device, we ask them to have a look. Now having all that feedback from non-designer/developer minds, we are able to resolve any issues that could have possibly led users away from your website.
So now we have all the above covered, having done each step, and constantly updating the client we are now ready to upload onto a server for the rest of the world to view.
Fortunately our job doesn’t end here. We hop onto our google analytics and monitor the site to keep track of who is viewing the site, how are they accessing the site, but most important, where do users exit your website. This way we would constantly be able to create interventions to rank higher, and resolve any issues that might be causing your website to rank low.