It feels like pesky design boffins create website terminology just to confuse us. Front-end. Back-end. Design. Develop. Why not make things simple?
Fear not, we're here to simplify these terms so everyone can understand them. Firstly, let's have a look at the difference between web design and web development. Otherwise known as front-end and back-end.
What's the Difference Between Web Design and Web Development?
Web designers are the more creative of the two, dealing with the visuals and layout of the website. Want a certain colour there? Bigger text here? They'll sort it.
It's common for them to have backgrounds in graphic design and art, so they'll know how to make things look pretty!
A web developer's job is different, they'll build the core of the website. They focus on the technical aspects and make sure everything works. This involves inputting code into websites for optimum performance. They're logical and tend to have backgrounds in computer science or programming.
For example, the outside of a car is visually pleasing, whereas the engine is built for maneuverability.
To make things simple, we're going to break up the guide into designer and developer website terminology. Hold on to your Hertz, here we go!
Designer Website Terminology
This aspect of design is often overlooked by many web designers, but should be part of your web design basics. It's how accessible your website is for people with disabilities.
Disability guides, simple copy and larger icons help them navigate the site. These functions are popular with healthcare organisations. Here's an example of the Care in Mind website, which has a font adjuster at the top right of the homepage.
It's no use having a mind-blowing website if your content is all over the place. Where are your contact details going? Are visuals in the right place? What about white space? Nobody wants a headache when they visit your site. Getting these aspects right will make your visitors journey more pleasurable and increase your chance of appearing in search engines.
Check out this example from FastPay, see how the login and contact details are highlighted and easy to find? The logo is clear, there's a live chat at the bottom and the picture is clean. Keep the page minimal and it'll be easier to navigate.
CSS (Cascading Style Sheets)
CSS is a style sheet language used to describe the layout of HTML code. In simpler terms, HTML is the language of the text and CSS is the language of page design. CSS saves a lot of work for web developers as it helps them format their HTML code into different layouts and styles.
This type of layout is easier to design but isn't as flexible for the user. If a page is the same width for every visitor, it may be unpredictable on different devices. Apple still uses static layouts, it's a USP for their brand.
A favicon is an image that appears next to your domain name in the browser address bar. It's a good idea to sue your logo or something that relates to your business. Need inspiration? Take a look at some of these cool logo designs!
Where do you want the eye to focus? A logo? A product? If your website is too cluttered or you don't know where you want the user to go, they could leave. Take a look at this web page from Botany Bay, what do you think the focal point is?
HTML (Hypertext Markup Language)
Do you speak computer? Fortunately, designers do. They input codes into a text file, the browser reads it and translates it into digestible form. A range of typography, design and computer programming skills are needed for HTML coding.
The term used for the number of pixels in the vertical and horizontal elements of a screen. Although many believe it's the length and width.
Responsive layouts are adaptable and change depending on the user device. They optimise the page to fit as much content on as possible. This layout is a staple of web design basics.
When designing a website it's important to have a consistent style. Too many colours or shapes can confuse the user, so it's important to have a complementary blend. Take a look at Kidult & Co's Instagram page, notice how all the images follow a similar theme and the colour palette blends from image to image.
How does the user feel when they visit your website? If it's practical and easy to use they'll be more likely to stay on the site. If there are lots of broken links they'll feel disappointed. It's vital to get into the mindset of the user and empathise with their problems.
Graphical User Interface
Apple makes devices suitable for young children, look at a mobile home screen with all the apps and menus. GUIs should be simple and easy to navigate, which is all down to clever design.
Progressive enhancement is the practice of building a website with simple, web design basics. The designer will add more complex features as they build the website. This means that whatever issues it has, they're protected by strong foundations. You wouldn't put the roof on a house without laying the foundations first.
What platform should you use for your business? Wix vs Wordpress: Who wins?
Developer Website Terminology
AJAX uses various programming tools to send and retrieve data without having to refresh a web page. If you have your Facebook homepage up in a browser, it will keep refreshing to provide you with updates. Here's an example of AJAX code.
No, not that type of back-end! Websites aren't superficial, there are a lot of internal processes that the user can't see. Servers, applications and databases are crucial to the smooth running of the site.
A bad neighbourhood is a group of websites with poor reputations and search rankings. You wouldn't want to live in a bad neighbourhood, and neither does your website. Putting your website in rogue neighbourhoods will dent your chances of appearing in a search engine. Get the best hosting package, you don't want punishment for your neighbours' naughty behaviour!
Your video is buffering. Why?! Bandwidth is the level of traffic and data that can pass through your site. Bigger businesses need more bandwidth as they get higher traffic and data passages. Bandwidth varies so it's important to get the right amount for your business.
A cache is a devices temporary storage space and improves application performance. When you visit a webpage your browser will keep a record of the pages you visit, storing the files in the cache. This means the browser doesn't have to re-read them, which saves time.
Cookies are small text files which contain basic information about the websites you visit. Cookies help web servers determine preferences by looking at the types of site you visit, or what you put in your shopping cart.
There's been a lot of negative press about cookies in recent years as there are issues with privacy.
As you would expect, a database is a storage hub for data. As browsers navigate through your website they enter search queries or personal information. Your database stores that information.
If you have an online clothing business, your database columns might read:
Here's a sample of an anonymous database.
Web hosts give us the power to post web pages to the internet. They use server computers to connect your website to the internet. When somebody clicks on your website page, the page will send a request to the server and it will load up.
PHP (Hypertext Preprocessor)
PHP is a server-side programming language used to develop fluid websites and connect to databases. For example, You may have a login button on your website with an email address and password box above. When you input and send this information, the PHP will send it to a database and check it's correct.
Look at this code example, see how it's handling an incoming request? That's PHP.
Python is a web development framework that's been around since the 1980's. It's known for its ease of use and readability. Beginners often use Python as a stepping stone to other development tools. Besides that, it's free!
Servers do a lot of work, they're computers after a can of spinach. They store huge amounts of data, such as CSS sheets, and connect to other servers through internet connections. Web servers store web information like URLs, when a browser requests a page it'll communicate with the server.
And that's the difference between wed design and web development. You're now qualified to waffle website terminology to your heart's content!