Need a new website? It could be easier than ever – or you could be setting yourself up for headaches down the road. Before considering your options, think through what you ultimately need your site to accomplish and how both you and your visitors will engage with it.
If your goals is a focused awareness site or simple landing page, an automated platform like Wix or Squarespace could be the most expedient path. With just a little know-how and design insight (or a designer on call), you can quickly launch a site based on their plethora of templates.
The issues usually come when these off-the-shelf sites need to grow in scope and expand functionality. Even the most skilled designers and developers are limited to what can be done in these types of environments because the structure is simply not there to build upon and the tools are largely incompatible with third-party plug-ins.
In this world of “WYSIWIG” and “Drag and Drop” websites, it can be easy to forget that many websites are still built from scratch to achieve specialized needs, distinct style, and robust functionality. Today we’re going to take a peek in the design and development tool shed to get an idea how coding languages are integrated to build a fully custom website.
Design
I often like to use the analogy of building a house as a comparison to building a website. You never build a house without consulting an architect. They are the one who decides on the floor plan, the height of the walls, and essentially how each room will best serve its purpose while still meshing together seamlessly to create a solid and cohesive house. Each window, each door, each power outlet, and every nook is premeditated to best enhance the experience for those who will be inhabiting the house. The same level of thought and consideration often applies to a website’s design as well. Every well-built house needs a blueprint, and every well-built website needs wireframes and mockups.
“Form follows function”–a fundamental little earworm for any designer worth their salt. It means that each and every element must serve a purpose and is not simply placed for the sake of being there. Each color is selected to live in the site’s own ecosystem, helping visitors find exactly what they need to quickly and efficiently, and each typeface, no matter how bland they may seem at times, is there to help with legibility and the overall tone of communication. Think of it as the difference of what it might be to visit Elton John’s house versus visiting Jay Leno. At the core, both houses have walls, plumbing, et cetera, but for these two individuals, the layout and styling choices couldn’t be any more different, where the former may have several closets solely used for sunglasses, and the latter may have an entire wing used as dedicated garage space. To bring it back around to web design, not every site will look the same and nor should it. Each component should be carefully considered on how to best serve those who it is intended for.
Development
To continue on with the analogy, just as a house needs an architect, it also needs contractors and a construction crew to take the blueprints and build it into a tangible home. Websites need developers, and depending on the complexity of the project, these developers could all have different niches of expertise.
HTML
HTML, otherwise known as Hyper Text Markup Language, is essentially the fundamental structure of the website. This is the concrete foundation, the framing timbers–the screws, glue, and nails, if you will. It is the basic need if you want a website built. This is where you tell the code how many containers a page will have, where every button will go, as well as the placement of every form, map, video, and photo. This markup language has evolved slightly over the years, but like lumber, not much has changed really except to help make things more efficient to build.
CSS
CSS, or Cascading Style Sheets, are the cosmetics of the site. It’s the wallpaper, paint, floor tiles, and choice of cabinets. It’s the main difference between having a mid-century modern home or a Victorian home. This is all achieved by writing very specific rules that are mapped to every single element in the HTML. There are different ways to go about generating these rules, such as writing the CSS completely by hand, or by using preprocessors such as SCSS or LESS. The best way I could explain this is that CSS is like painting a wall by hand with a paintbrush, where SCSS is like using a power sprayer. It’s the same paint, the same room, but the method for applying the paint is much more fluid and efficient.
Javascript
And now we come to the switches and toggles of the house. Javascript is what makes everything work and is what gives life to the site. Everything you interact with on a site, like the forms, menus, and even those pesky little pop-ups, all come from Javascript. Of course we can write the code from scratch every time, but as It’s not the most people-friendly type of code mentioned so far, some people more clever than I, have developed sets of Javascript libraries. This is to help simplify the language to fit specific use cases. The most common of these libraries by far is jQuery, and even that library has variations that can be selected for specific and sometimes very niche purposes. Other examples would be Angular (a javascript framework developed by Google) and React (a framework developed by Facebook).
PHP
PHP is the server-side of the code. For lack of a better metaphor for this extended analogy of mine, it is essentially the utility company’s connection to the house. It helps the pages communicate outside of the site itself and store and share information and build databases. Say you fill out a contact form, that information needs to go somewhere in order for it to be useful later. Much like Javascript, there are different types of pre-existing frameworks built on PHP to better serve the type of website you’re building. You may have different requirements, where WordPress is generally built on good ol’ regular PHP and is useful for most cases, but say if you want to run a massive e-commerce site such as eBay, you may be interested in using a framework like Magento. If you’re more interested in building something more akin to an app, a framework like Laravel is more likely what you would want.
Notable Mentions
To conclude our tour of the inner workings of how a website works, all of this was simply to say, how a site is built is completely circumstantial. If you have larger-than-life ambitions, then you’ll likely need something more on the robust yet flexible side. If your plans are a bit more straightforward, then perhaps something a little more turnkey is needed. At either end of the spectrum, Ramey is able to plan and manage both, so give us a call if you ever find yourself in need no matter how big or small.
The views and opinions expressed are solely those of the author and do not reflect those of the Ramey Agency or its affiliates and are shared for educational and entertainment purposes only.
Written by
