At the start of any website build project I like to set up a work process, then let things evolve organically. One thing that is left out of work process flow guides is how important it is to stay in regular contact with clients, to understand their needs and preferences, and keep things moving forward towards completion.
- Gather data
- Research concepts
- Sketch ideas and wireframes
In this stage, I like to play with ideas and find sources that have visually and functionally similar concepts or overall emotional connection. I get the brief, obtaining as much detail as possible before I begin brainstorming. If there are certain colours, features or images to use, I make a list of these at the beginning. The next step is to sketch out ideas. I use physical and digital drawing aids, including paper and pencil, and Adobe apps, to draw rough sketches and wireframes. Usually, this is all I need to do before coding.
Development of Concepts
- Write and refine code
- Use Firefox and Chrome Inspectors in different screen sizes
This is the coding stage, where the concepts and ideas are converted into code. I decide what is more efficient and appropriate for the layout. It may mean using a combination of solutions and code snippets, or going for a WordPress theme that is very similar to the visualised result.
- Export Database
- Install CMS and Import Database
- Upload (child) files including any HTML, JS, PHP, and CSS
- Write htaccess and check config file
This is the most cumbersome, but necessary stage for CMS installation, as it involves following procedures and trouble-shooting errors. If I am installing a static website, then I would upload files and write htaccess rules, if required. Even with static sites, a WordPress installation for the blog is not unusual, but not as complex as exporting a WordPress database and settings from a local WordPress installation and importing it to a live site, or going from a development subdomain to the root domain. With a dynamic content area like a blog or news page, I wouldn't put it in a local server first just to see what it looks like, unless I was building a customised theme from scratch. Everything can be done in the live site at off peak times; images and text added to posts, experimenting with theme options.
- Ensure links and elements are displayed and functioning as expected
- Edit code as required
I don't have any fancy tricks in this stage. I test manually by playing with the live site and seeing where changes or improvements can be made. Sometimes, with themes, finding where the change needs to be made is the most challenging part, if the code is not in the file where you expect it to be. I don't really mind what code editor I use, as usually just a few lines or values are modified, commented out or added. If, at this stage, I notice some design, layout or navigational flaw, it means I have the task of drinking a few more coffees and working until I find a solution, or until I'm satisfied with the progress of the solution.
Making Google happy
- Submit sitemap
- Check your rank
By validate, I mean to get Google bots to validate the live content and links. Validation of code against current web standards should be done earlier in the process, usually when near the final stages of writing code. If using a theme, check that it is compliant with current standards. This, in addition to submitting a sitemap, help to get your site ranking in search results and, makes Google happy. Similarly, other search engines like this as well. Here are some Help pages for Google and Bing
I set up Australian Groundwater Technologies' website from scratch with no existing material to work with. Their old site was done with tables, not very visually appealing and severely lacking in relevant content. I customised the site with a variety of plugin features like sliders and parallax effects. As the client was quite conservative about how the site should look (similar to a competitor with small font and all content appearing above the fold), I had to cut out a lot of sections and do a lot of editing to get the final result.
With Future Minds Education, the client knew what content was must-have, nice-to-have, and what to leave up to me to decide. The essentials were discussed over phone, via sms, and email. The client preferred a different look for her website, with more relevant content in terms of timetables, tutor and class information, and adding a blog to complement her regular Facebook activity. I paid particular attention to making the website more consistent with the client's logo, and customising the theme to suit the business and client preferences.
Leadership Growth & Learning is a project that my client developed for her educational leadership programs delivered to schools across Victoria. My client needed a logo, business card and website. She had certain colours that she preferred, so I had those in mind when selecting a theme to customise. I added a plugin for SEO to make it easier for my client to manage the website content updates on her own. In future, this site could be developed further to include CTA's, email subscriptions, downloadable content for registered participants for programs and workshops, and video promos.
This non profit organisation in Melbourne needed a fresh and clean look, that was lighter and brighter than what they had previously, without altering the logo and overall feel of the identity.