30 Aug 2019
Web Design & Development
A collection of expressions and terms from the web industry. Especially helpful if you are getting involved in a web project, or just want to be able to make conversation.
The list will be continuously updated.
Accessibility on the web is about making web content available to people with different kinds of disabilities. The most obvious handicaps for accessing web content are perhaps different kinds of sight impairments. Color-blindness, impaired sight as well as blindness needs to be taken into account. Colors and contrasts need to be adjusted to make content easier to see, and special code needs to be added to make the site even better for screen readers.
The growing possibilities of adding movement to websites – like the popular parallax effects – can also cause problems for people who are sensitive to motion sickness. Sites with these types of effects should, therefore, have a way of accessing the content with the effects turned off.
Some visitors could also have dyslexia, or be handicapped in ways that limit their cognitive skills. It would therefore be important not to use too complicated language or too long sections on websites that expect parts of their visitors have these disabilities.
Visitors could also have motor impairments, meaning they could find filling in forms or moving the cursor challenging.
The more people need to be able to use your site, the higher are the accessibility requirements. The toughest requirements are often placed on government websites that need to be accessible to all citizens.
AMP stands for “Accelerated Mobile Pages” and is a new format for serving websites to mobiles invented by Google. Maybe you’ve seen “AMP” next to a small icon of a lightning bolt in Google searches (on mobile) that indicates that this is a link to an AMP site.
Google actively promotes AMP sites to end up higher in their search results.
The supporters of AMP claims that the technology behind AMP sites makes them much faster to be viewed on mobile devices. That will, in turn, lead to happier visitors and companies making more money because shorter wait times lead to higher conversion.
AMP critics are concerned about Google gaining too much control over which sites search results show, as well as not being happy with where Google claims the AMP pages are really hosted.
CMS stands for ”Content Mangaement System”, and is a tool for easily updating and editing websites though a user interface. A CMS is to websites what the document editing software Word is for text documents.
The most popular CMS at the moment of writing (August 2019) is WordPress.
CSS stands for “Cascading Style Sheets”, and is the code that tells websites how their content should be presented (how elements on the website should look). CSS is used to add design and style a webpage. For example, the code contains among many other things, information about what colors, sizes and font text should have.
Above the fold is a graphic design term, referring to the area of a website that is instantly visible to the user, without having to scroll down. The general rule has been to put the most important content in this area so that it is instantly available and becomes easy to find.
With different screen sizes as well as screen orientations (landscape and portrait modes on phones and tablets), it becomes increasingly difficult to determine what content will actually be displayed in this highly desired space.
UX experts however have concluded that there are a lot more things deciding if a call to action button gets clicked apart from if it is placed in the golden “above the fold” area or not.*
TL;DR: Just putting important content in the very variable area that might be “above the fold” on some devices might not automatically improve the result in the obvious way people often expect. There are a lot of other important factors especially when it comes to UI and UX to consider as well.
*Joe Leech: “How to Design with Science Without Losing the Magic” at SmashingConf, Barcelona 2017, around 5.40
Frameworks are comprehensive plugins or libraries to enhance already existing programming languages. Frameworks are used to add functionality or simplify processes. They can be seen as tools or extensions to a programming language to make it easier for programmers to perform certain tasks.
Learn more about framworks; when to use them, which one to use and for what purpose in our article “Frameworks – What are They?”.
The General Data Protection Regulation is a new law, affecting all EU nations from May 25, 2018. The purpose of the law is to secure and protect the personal data of EU citizens. Companies or organizations failing to meet the new regulations risk substantial fines.
The new rules for handling personal data concern both how data is stored, how it is protected, routines for handling security issues, users being able to access their data and to have it deleted. It is also required to be able to report what the data should be used for, and why it is collected.
TL;DR: A new European law concerning handling personal user data, affecting all companies and organizations who collects any form of personal data.
HTML stands for “HyperText Markup Language”. HTML consists of multiple elements, that are the basic building blocks for creating a website. HTML is a bit like Lego, where each type of Lego piece represents an HTML element. These elements can for example be different types of text elements (heading, paragraphs), but also images, videos, forms or links.
Native applications are apps that are developed purely to work on a specific platform or with a specific operating system. Examples are apps that work on iPhones but not on Android mobile phones and vice versa.
Native apps are downloaded to the platform or system through distribution centers like Google Play or App Store. (Native apps are not reachable through URLs like normal websites.)
Web performance is how fast websites are downloaded and displayed in a browser. Faster websites have shown to increase user happiness as they provide a better user experience.
How fast a visitor reaches a page is also important when it comes to so-called bounce rate, meaning that visitors leave the site almost instantly, in this case presumably because it takes too long to load.
If visitors leave an e-commerce website, they will not make a purchase. If the site is instead loaded really fast, they might stay and buy something. Might sound trivial and simple, but to e-commerce companies this is vital, and to engineers, performance has grown into an area of expertise in itself.
Perceived Performance is how fast visitors think your site is, which can differ from how fast the site is in reality. Since it is the user who will determine when loading a webpage takes too long, how long waiting times are perceived is really what matters.
Some tricks to keep user attention while waiting (more effective than hold music):
Loading animations, spinners or progress bars help tell the user that a short wait time is expected and that nothing has gone wrong.
Use images that will show the entire image right away, but only load some of the data. The image will look a little blurry until all of the data is loaded, but it will be a better user experience because it will prepare the user to expect the content. To achieve this with JPEGs, use progressive format.
Skeleton placeholders on load: When the page loads, show indications of what content to expect. Examples of this are the light grey boxes replacing images and text on Facebook while the page loads (on a slow connection).
PHP stands for “PHP: Hypertext Preprocessor” and is a recursive acronym (it refers to itself). It is a programming scripting language commonly used for back-end web development.
PWA stands for “Progressive Web App”, and can be described as a mixture of a native app and a web app. Like web apps, PWAs are based on typical web technologies (HTML, CSS, JS) and are non-platform specific. They can be used by any device with a compliant browser.
PWAs also have functionality previously only seen in native apps, like offline mode and push notifications. As browser compatibility with the technologies needed for PWAs to work increases, the popularity of PWAs is expected to rise as they will become a more affordable option to building multiple native apps.
A responsive website or web app has a layout that adapts to the screen size of the device on which it is displayed. A typical example is visiting a website on a mobile and still being able to navigate and use the site without for example having to scroll the website sideways.
SEO stands for ”Search Engine Optimization” and are ways of optimizing a website to rank high in search engine (like Google, Bing, Yahoo!) search results.
There are many techniques to improve SEO, and the methods are changing as search engine algorithms evolve. The goal of search engines is to provide relevant and accurate search results. Therefore, they strive to prevent manipulative SEO methods where weaknesses in their algorithms are being exploited to give certain websites a better ranking than they deserve.
SPA stands for “Single Page Application”, and is a web app or site where the user stays on a page that dynamically reloads its content. For the user, these types of websites come across as more similar to the look and feel of (mobile) native apps.
SSL stands for “Secure Sockets Layer”, and is a technique used to encrypt traffic on the web, between web server and web browser. In a little more detail, if you for example login with username and password on a site not using SSL, then anyone who have access to follow the traffic on your current network can easily see your user information. With SSL, this is encrypted and therefore useless (of course assuming the encryption is not broken).
Read our in-depth article about SSL: “What is SSL?”
UI stands for ”User Interface”, and is a name for ways the user can interact with an app, website or product. A non-web related example: part of the user interface of a bike are the handles with which the user steers.
On the web, the user interface often consists of element with which the user can interact – for example text input fields or buttons in a form.
URL stands for Universal Resource Locator, and is basically the address to a website that you type into the browser address bar.
UX stands for ”User Experience” and describes the users’ experience of handling or using the app, website or product via its user interface (UI).
Even if the website, app or product is unchanged, external circumstances can affect the user experience greatly. For example, urgency combined with a slow Internet connection combined can frustrate users even if the website itself remains the same.
Apart from external factors, the user interface is very important for having a successful user experience. If the user interface makes it easier for the user to achieve their goal, the user experience will be better.
In the case of UI and UX, one has a hard time existing without the other. One of the simplest and most to the point examples of what UI and UX are and do is depicted below by Jennifer Aldrich, UX & Content Strategist at InVision:
— Jennifer Aldrich (@jma245) 4 mars 2014
Websites that use WordPress get their styling and layout through so-called themes. Additional functionalities (like e-commerce solutions, help with SEO), is available through plugins, which are expansion modules.