Parallax, RWD, CTA, what does it all mean? We in the web sphere casually drop these words in our day-to-day lives, but those of you who aren’t so familiar with these terms can learn about what these words really mean. So the next time you rub elbows with a hip designer type or a brainy developer, you could very well-impress them and earn some web-street cred by thoughtfully dropping these terms into a conversation or two.
Parallax scrolling on the web has been rising since its birth in 2011. It livens up the overall user experience of an otherwise static page. But what is it exactly? Simply put, parallax is a type of effect applied to the speed and movement of background imagery. The background of the website moves at a different speed than the rest of page, thereby mimicking layers of depth on the page.
Benefits of parallax include:
- Livens up a webpage with layers of depth and unique animations
- Encourages users to scroll through the content to reveal more of these effects
- It naturally provides a sense of wonder and curiosity for site viewers
- If you're in the tech field, parallax implementation gives you a one-up against your competitors, as it shows your viewers that you are thinking ahead, employing new ways to stay current in the digital sphere
Be mindful of using these effects however, as too many of these effects on a webpage slows down its load-time considerably.
Responsive Web Design:
You may have heard this phrase before, as the thinking has been around for a while now. Responsive web design (RWD) is a technique used in web design that aims to provide to site viewers the best viewing experience possible across a wide range of devices. When building out responsive websites, the site is built using a proportion-based grid, flexible images, and media queries via CSS.
Don't mistake responsive websites with mobile-versions of websites. If you view Facebook on your phone for example, they are employing a mobile-version of their desktop website, with a separate url to boot (see the m.facebook.com?). Responsive websites are different, because when building out the website, the development team only needs to create and maintain one singular website, while in the case of mobile-version websites, like Facebook for example, there are at least two separate websites that need to be maintained for both the desktop version of Facebook and the mobile version. In the end, websites built responsively save clients money, as maintenance of their website is limited to just one, while companies with mobile-version websites are forced to maintain multiple versions of the same website.
In marketing, a call-to-action (CTA) is some type of instruction given to an audience to produce an immediate response. —Buy Now,— —Get Started— or —Request a Demo— are all types of CTAs. In web design, a CTA is typically either a banner, button, or some other kind of click-inducing graphic meant to prompt a user to click it and continue through a conversion process, like signing up for a program or starting a trial of an application.
Good websites present users with a call-to-action. Great websites present users with a CTA they actually click on. The success of a CTA can be measured by calculating the number of clickers over the times the CTA was seen, or through A/B testing, a testing process in which several options of graphics are presented to site visitors. The graphic with the highest success rate (the most clicks) is later chosen as the ideal CTA to use on the website.
CMS, or content management system, is a web application designed to make it easy for non-technical users to create, edit, manage, archive, collaborate on, and store content on web pages. Content includes text, graphics, photos, video, audio, or markup that either gets presented or interacted with the user. Most CMS's provide capabilities for multiple users with different roles or permission levels to create and manage all or sections of content, data or information of a website.
Above The Fold:
In web design, above the fold refers to the portion of a website that is visible without the need to scroll. Countless times in my career, I've heard clients ask, nay, demand the same thing: adding unnecessary fluff above the fold. Somehow, they are scared to think whatever content is below the fold will not be seen by website visitors.
The vast majority of web users are savvy enough to know that content does indeed, live below the fold. A whole subset of websites called the one-page website restrict themselves to scrolling as the only way to navigate through content. If that doesn't convince you, think about it this way: would you rather browse a website with 80% of its content crammed up at the top of the page, or browse a website that provides a natural rhythm, balance and harmony throughout the page?
Though often called —white— space, white space doesn't have to actually be white. It is the negative space that exists within a layout. White space often includes margins, padding, and spaces either between graphics and text or even spaces between lines of type and letters.
Often times, clients neglect the use of white space. Usually going hand in hand with above-the-fold syndrome, they tend to think that by cramming as much content into a given space as possible, their users will have access to the most amount of information at any given point. Unfortunately, the effect is counter-intuitive. A website crammed full of text or graphics with very little white space has the feeling of being very busy and cluttered. The experience found on these sites is one that is very difficult to absorb content on, with users becoming mentally exhausted and frustrated while trying to decipher the site's content. Take for example, this infamous website: need I say more?
If one takes a look at the most compelling websites found today, they will quickly notice the use of white / negative space found on these websites. The use of white / negative spaces gives a feel of elegance and luxury, and provides even more importance to objects surrounded by the empty space around it. Used well, white / negative space is key to any type of composition. If used poorly, however, the layout feels incomplete and out of balance.
Akin to an architect's blueprint of a building structure, a wireframe is a visual guide that represents the framework of a website. Think of it as the skeletal structure of a website. The purpose of a wireframe is to keep subjective attributes at bay, such as typography, color, mood, and other visual —noise— that would otherwise skew viewers' perceptions, while presenting to the user a page's layout or arrangement of content. Interface elements such as buttons, links, images, and text blocks are included, along with a clear arrangement of a navigational system such as a header, footer, breadcrumbs, and sidebar navigation.
Simply put, a wireframe forces the viewer to focus on what a page does rather than what it looks like.
We see landing pages everywhere on the web these days, whether we know what they're called or not. A landing page is a single web page with its main objective to capture leads (such as filling out a contact form, starting a free trial of a product, or registering for a newsletter). A user usually arrives at a landing page after clicking on a banner ad, social media links, email campaigns, or search engine marketing campaigns. Their purpose is to reinforce or enhance the effectiveness of the ad the user clicked on. Landing pages are a great marker for how effective a particular advertisement is. Marketing professionals can analyze the activity generated by the linked URL, such as click-through rates and conversion rates to figure out the success rate of an advertisement.
And there you have it - a rundown of some popular, yet important terms found on the web-sphere. Impress your web-savvy colleagues during your next meeting or simply read up on these phrases to get a better understanding of this craft.