November 22, 2016
As someone who designs and develops websites, I’m often asked: What goes into building a great site? For those who don’t create website code, it can seem mysterious and unapproachable and at times the investment of time and money can seem daunting. To better explain what it takes to create a functional and well-designed website I like to use the analogy of building a home from the ground up. It’s a concept most people have experience with and it parallels building a website pretty well — so let’s break each web component down and build this house together.
Putting Together the Blueprint: Design and User Experience
Before we begin to code, we need a design from which to work. Like a blueprint for a new home, web designers usually begin by plotting out pages on paper or using design software like Photoshop. This gives the website developer something to work from that includes specific measurements.
Many times agencies will take some time at this point to do a bit of user experience research. User experience (UX) design helps to ensure websites work in a way that users enjoy and that meets your goals. Just like you wouldn’t design a house with stairs to nowhere, UX makes sure a website functions in an expected and meaningful way.
Starting Construction: Building with HTML and PHP
Now that the plans are in place, it’s time to start building. When it comes to web developers, that usually means HTML and PHP. These two coding languages provide the basic structure for the website.
HTML, or HyperText Markup Language, serves as a building block for any web page. It determines where content goes and how various elements fit together. Think of it as creating the rooms and boundaries. HTML helps to construct areas for things like the navigation, sidebar or footer.
PHP (which originally stood for Personal Home Page) compliments HTML and works alongside it to make things easier. Using our analogy, PHP acts like prefabricated construction materials. When crews are building a house, they don’t usually construct a door or cabinets from scratch. Instead, they use doors and cabinets that are pre-built to help speed up the process. PHP works similarly by allowing developers to reference pieces of code many times throughout the site.
Interior Design Time: Styling with CSS
The walls are up, so it’s time to get creative and add some style — that’s where CSS comes in. CSS, or Cascading Style Sheets, help a design come to life. Without it, your website wouldn't be much more than a blank white page with text and links. Just as an interior designer makes a house more attractive by adding paint, light fixtures and flooring. CSS makes a website more attractive by adding colors, images, fonts and other styles.
To Be Continued… Moving In
We hope this house analogy helps you understand the basic building blocks of a website, but Lessing-Flynn’s team of experts are also always here to help with questions on any of the concepts listed in this article. Check back for part two to better understand what happens after your website is built!