DEVELOPING A WEBSITE FROM THE BOTTOM UP

#2 Finding the Best Way to Develop from the Ground Up

Before starting to build out a website you can hope to have a good knowledge base about the customers’ needs and with that knowledge we ask ourselves questions. Is the client going to maintain the site after we build it? How many pages will the website be? What kind of special features has the client requested? I could probably list over 1,000 questions but to save time I will focus on our website that we recently re-designed.

What’s the best way to develop a website?

The best way to develop a website is to weigh your options. I chose to use the CMS WordPress to build our website which I believed would fit our specific needs, such as; templating, blogging, use of plugins and easy client use (ourselves).

I chose WordPress, now what? Do I purchase a premium theme, use a free theme or build a custom one? If I get the option I will always choose to build a custom theme. Premium and free theme’s can often be bloated with features and plugins you don’t need, and these can end up slowing down your website. When you build a custom theme, you get exactly what you want and nothing more. At Revital Agency our designer creates mockups/style guides, and I develop off of them. If we were to use an already built theme we would be “unstyling” the theme and restyling it towards our design. This can cause an unnecessary amount of work and can even be “hacky” at times when you are changing an already styled theme. For our website I decided to create a custom theme.

Assuming everything is ready from a copy and design standpoint. I setup a dev server on my local machine using XAMPP and decide on my workflow. For this specific project I used Gulp.JS which is essentially a task-runner using Node.JS.

What is Xampp?

xxamp screenshot

Xampp is an open source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in the PHP and Perl programming languages. It essentially allows me to run a web server on my local PC.

What does Gulp.js do?

gulpfile screenshot

It can do many things to help streamline your workflow. For our website redesign I used it to compile my javascript and css, compress images and my favorite task LiveReload. LiveReload auto refreshes my browser every time I save a file in my project. These tasks can help speed up development and make the development process run smoother.

Node.sj is an open-source, cross-platform runtime environment for developing server-side Web applications.

The last thing to decide on is what preprocessor to use for my CSS. The debate is usually between LESS or Sass, to not bore you to death here’s a good article on which one is better: https://css-tricks.com/sass-vs-less/, and I chose Sass for our website redesign.

After all those decisions have been made, now comes the easy part: actually building the website. After the dev site is ready and I have my workflow working properly, I start to build the website off of the mockups and style guides.

Before you know it, you’ve built out the entire site and it’s ready to go live. Told you that was easy, right? Wrong. You’re most likely going to run into issues as you build out the website, rarely technical, usually bureaucratical. The client sent an email last night saying they would prefer the design for the contact page to look like this awesome website a friend showed them. Well you already built out the contact page from the mock up that was approved by the client! Time to start that page over again. Other times the design doesn’t always translate to an actual web page and you have to discuss with the designer a way to find a workaround.

I think the best way to develop a website is to plan for the specific client, customer, and needs. Once all the kinks are worked out (and the website is finished and it’s been approved), I then package the website and move it to the live production server.

Eric Franklin

Written by:

Eric’s passion for technology translates into work that he loves. With an eye-for-detail and strong tech skill, Eric helps perfect the functionality behind each client’s website.