Ever wonder how those image modules change color, or how that dropdown menu on a website animates? We all know that design plays a strong role in how our sites appear to the public, but what about the functionality? What makes the site really tick? This is where developers come in: they give your custom website that extra “wow” factor. Today, we have a special little segment we would like to share on the magic of development and how they make modules on a website function. If you’re interested in learning, let’s take a look at a few things that makes these elements possible…
We’re going to use a set of modules from a client’s site our developers have recently worked on. First, let’s start with the code types used to make all of this element’s features come to life.
The Code
As we all know, this process can become quite complicated. More function and style in the element means more lines of code are involved. Here, we will discuss the three coding languages required for the element above: HTML, CSS, and Javascript.
HTML
HTML is the skeleton of the page or element. This tells the browser to display the hard elements. (Images, Copy/Text, and objects like menus etc.) As you can see in the image below, there is nothing visual except the links and text of the elements.
CSS
This code is like the muscles and flesh of the element. All layouts require CSS to stylize and format the objects in relation to what is around them. This is the same language behind CSS Paintings – an awesome form of digital painting (well, at least we think it’s awesome)!
In the example below we see that the modules are now styled with color, shape, and size. There is animation attached to this through CSS, but we don’t quite have a complete product yet. These modules still require function. That is what leads us to adding Javascript.
Javascript
This code is the brain language of the page or element. Javascript tells the elements how to function. This could be movement/animation, or a hover effect such as disappearing/appearing.
[Video above has no sound. Captions not needed.]
An Understanding of Layout
It’s important for developers and designers alike to understand spacing and placement. This is required for all elements to work together and create a finished product. This is why we apply a solid system of responsive features on all of our websites. Our Development and Design departments work hand-in-hand to make sure none of the elements on a page are crashing into each other and adhere to rules of alignment on all of our sites.
In the build process, we are careful to code assets in a way that makes them responsive from the beginning. This means building elements to look good and function well from a large desktop all the way down to a small phone. Even with that in mind, there may be adjustments needed as small details on the website change. This is why it is important that each developer understands which code applies to each section of the site, and uses the correct language to make the needed change. Because if you accidentally use the wrong bit of code, or take out a piece of code that had a different purpose than you thought…
Patience and Problem-Solving
There is a lot of code used to make all elements of design look good and function. This naturally creates problems the more complicated the designs and layouts become. Most often, developers spend more time solving problems related to writing code for a brand new element than fixing code on a broken element. This is the nature of creating elements on any platform whether it be apps for a device or websites for a browser. With a lot of patience and hard work from developers, they are able to untangle the metaphorical “wires” that get all bunched together when a lot of work is put into projects.
So the next time you see an element on a website move, change colors, or appear on a website – maybe you’ll have a developer brain moment and be able to take a guess at which language of code was used to create it!
—–
Have more questions about what impressive custom features ViziSites’ developers can build on your website? Check out our portfolio of websites, or contact a consultant today for a free demo!
Written by ViziSites’ Development Team
Connect with Josh on LinkedIn
