HTML: The Bones
The “bones” of a house determine how it is laid out and where everything goes. They will also tell you how strong the structure and foundation are. Is it a 1,000 square foot home or a 4,000 square foot home? How many rooms will it have? Where does each area of the house go? You don’t want the laundry room upstairs near the baby’s room, do you? Should the kitchen be at the front or back of the house?
The structure of a website is very similar. The process of building a small 1 page site is different from a 10 page site, which is different from a 100 page site. Which is partially why a client shouldn’t expect an answer to the most common question we hear: “how much does a website cost?” And if you’re the client and hear a flat answer without any consultation or other questions, run fast.
A standard page is made up of individual elements (e.g., <article>, <h1> [heading], <p> [paragraph], [image]). When you craft these together, you end up with the structure of a page.
Before any code or color hits a site, most designers usually create wireframes, which are like blueprints for a website. They are plain, single-color, and often hand drawn sketches of the site. Just like architects take flow into account when designing a house, when laying out wireframes, designers need to think of how your users will not just use the site, but the overall narrative from landing on the site to checkout.
By the way, have you ever walked into an open house and had somebody make you look at advertisements from Netflix or Ancestry.com before you get through the entry? That would be stupid right? Think about that next time you consider throwing pop-up advertisements on a site.
You can live in a house with nothing but drywall, studs, and a roof, but it won’t be pleasant. Similarly, with HTML alone, your site can function, but it will lack some serious curb appeal.
CSS: The Curb Appeal
CSS (Cascading Style Sheets) are what gives websites their design. It’s the decorating stage of building your
house website. Its the paint, furniture, and flooring; and is really what most users see when they see your site at first. It gives HTML elements their color, size, and shape. , shadows, colors, bold fonts, opacities, etc. are all determined by CSS.
CSS often does little to actually determine structure of the site, but it does determine how it is presented in the browser.
PHP: Letting Data Flow
Let me start by saying that you can replace PHP with other server-side languages (e.g., Ruby, Python, C#) for this example. These languages are the most powerful and complex languages and the user never sees any of it. It’s all done behind the scenes, generally, before and after the user lands on pages. Server-side languages communicate with databases and control the most of the data we interact with on the web today. The reason why you and I can both log into the same bank’s website and see different data is because the server-side language knows who you are after login and only displays your information on your screen.
This example may not be as strong as the 3 above, but it’s similar to the sewer system. It’s a give and take relationship with the grid. Clean water comes in, say in the form of shower water. We interact with it by showering, and the resulting dirty, waste water goes back to the sewer system.
SEO: Sweat Equity Online
I’m not going to pretend to be an expert with SEO (Search Engine Optimization). Or pretend that the heading above isn’t incredibly cheesy.
I know enough to use good practices on the sites I work on, but there are knowledgeable people who know much more than I do about SEO. If you’re selling a house, there are things that your realtor will have you do to attract more potential buyers through your front door, such as putting in a new lawn, a fresh coat of paint, or new hardwood flooring. Similarly, you can practice good SEO and get visitors to your site from search engines. However, like a real house’s attractiveness – the best SEO comes from care and maintenance over time (good content and clean code) and not a few sneaky tricks.
Oh, and for the last time, there’s no way to contact Google and ask them to make you the first result.