Effective Size?

1763 words9 min read

Author
 Author
Author:
Mai
Twitter

Nowadays, with the development of 4.0 technology and e-commerce, websites are created
with many different usages. An indispensable part of helping the site operate effectively is
the banner. Currently, banner ads are very popular and highly effective when advertising.
This is also a form to help promote the brand of products and services widely.

Like a poster, the banner needs to attract viewers with fancy and trendy designs to catch the
viral trend to create customer interest, direct customers to and learn about the product or
service you want to advertise. However, another critical factor when you run ads on those
websites is the size of those banners. It can be said that size is one of the most vital factors
determining the number of impressions and the ability to reach the potential customers of the
ad.

In today's article, I will introduce you to the Website banner size. Let's find out which size
will help the ads bring back the highest profit.

Advertisement

What is a website banner? Why is it important?

According to the definition on Wikipedia, "A web banner or banner ad is a form of
advertising on the World Wide Web delivered by an ad server. This form of online
advertising entails embedding an advertisement into a web page. It is intended to attract
traffic to a website by linking to the website of the advertiser. In many cases, banners are
delivered by a central ad server". In other words, the website banner can be understood as the
squares or spaces which have the slogan, logo, symbols, and messages placed on the eye-
catching positions of a website. It helps attract visitors to click on the ad, from which viewers
will be directed to the company's main website to improve sales. Banner ads include an
image or a multimedia object. Therefore, banner ads can be static or animated, depending on
technology and user intent.
Currently, website banners include the following types of banners:

 Square – 250 x 250

 Small Square – 200 x 200

 Banner – 468 x 60

 Leaderboard – 728 x 90

 Inline Rectangle – 300 x 250

 Large Rectangle – 336 x 280

 Skyscraper – 120 x 600

 Wide Skyscraper – 160 x 600

 Half-Page Ad – 300 x 600

 Large Leaderboard – 970 x 90

The size of the display ad is developed for different purposes and use cases. The size of a
banner ad can affect the way users see it. Although, in reality, the difference in size is not
large, they can make a big difference in their interaction efficiency. Ultimately, your goal is
not just for people to see your ad but also to click on the ad and then convert potential
customers into customers. So the size of the ad will significantly affect the maximum reach of
your campaign.

Banner ads are created to increase traffic to a website by linking to that website. Most banner
ads are clickable and lead to increased brand awareness for the advertised website. The
effects of banner ads can be mentioned as:

 Increase brand awareness: You can develop your brand awareness by using this ad
format so people can easily recognize your product or service. Brands like IBM,
Apple, Target, or Nike use banner ads to grow their businesses through brand
advertising.

 Create a potential customer data list: Website banner is a great way to build your
user database. Because through these ads, you can know which users are interested in
your product or service, which users are not interested in, and which users even find
out about your product later. Thanks to banner ads, brands can create a potential
customer database.

 Retargeting the brand: If someone visits your site but doesn't sign up for your
newsletter or doesn't try your product, you can use banner ads to attract them again.
Additionally, consider using a new website builder to attract and retain more visitors
to your site.
  Sell a product: Banner ads with appropriate content and placement will encourage
customers to buy some products. To have effective sales, banner ads should be placed
on a certain website-related to that segment and provide answers to the visitor's
questions.

 Announcing discounts and sales: Another way for businesses to generate and
increase revenue is through sales and discounts. And website banner is the optimal
way to reach customers. It will notify your discount information to each customer
who is using those websites. You can present a digital newsletter to customers by
adding it next to the banner and offering more information regarding your new
products and discounts.

So we can see that the website banner is really important for advertising products and your
brand to customers. Your product will be more widely known by appearing regularly on the
web and getting the attention of your brand's users.

What are the most popular website banner sizes?

As mentioned above, there are many types of banners to run ads on websites. Because each
sex website has its own specific requirements about the size to fit their interface, the banners
also have many different sizes depending on the request. However, there are always other
commonly used sizes that work well.

Most effective website banner sizes

Leaderboard (728 x 90 pixels)
The leaderboard (728 x 90) is usually placed at the top of the website above the main content
to attract users' attention. This is a good choice to consider if you want your ad to be as
popular as possible. Also, you can increase your sales when you get more inventory when
using text and image ads. Google generally encourages the use of this banner ad size on
forum sites.

Large Rectangle (336 x 280 pixels)

Although this banner ad size does not help you gain as many impressions as the Leaderboard,
it is still a popular choice for advertisers. The Large Rectangle is about the same size as an
average rectangle. It is most effective when placed in textual content or placed at the end of a
post. Because it is slightly larger than size 300 × 250, that means you will have more ad
inventory.

Large Mobile Banner (320 x 100 pixels)

This ad type is optimized for mobile devices. Although it has a small ad size, it should be
used to maximize impressions and improve CTR on mobile devices.

Half Page Banner (300 x 600 pixels)

Although the name is Half Page, the size of this banner ad does not cover half the website.
Still, it's the ad that takes up the most space compared to other sizes. Therefore it will also
attract users' eyes more than other ads. You need to create stunning images that will appeal to
people and get them to click on your banner ad.

Medium Banner (300 x 250 pixels)

This banner ad is the most compact and the most frequently used of all the size options. It
doesn't take up too much space on a website. It works well when it runs textual content or
when placed at the end of an article. Due to its compact size, advertisers tend to like it
because it's convenient to display. Moreover, this is also a good option worth getting started
with display advertising.

Other website banner sizes

In addition to the common sizes mentioned above, other sizes of banners are also used to
display ads depending on each specific purpose. Banner sizes are usually divided into 2
types: standard size and mobile size. Standard banner sizes include:

 Wide Skyscraper (160 x 600 pixels)

 Billboard (970 x 250 pixels)

 Banner (468 x 60 pixels)

 Half Banner (234 x 60 pixels)

 Skyscraper (120 x 600 pixels)

 Vertical Banner (120 × 240 pixels)

 Portrait (300×1050 pixels)

 Large Leaderboard (970 × 90 pixels)

 Square (250 × 250 pixels)

 Small Square (200 × 200 pixels)

 Small Rectangle (180 × 150 pixels)

 Button (125 × 125 pixels)

Mobile advertising has seen huge growth in recent years. The banners have also been resized
to fit the advertising needs on the phone. Here are the different banner sizes that are suitable
for mobile devices:

 Mobile Leaderboard (320 × 50 pixels)

 Mobile Full Page (320 × 320 pixels)

 Square (250 × 250 pixels)

 Small Square (200 × 200 pixels)

What are Google’s guidelines for website banner size?

Google ad sizes, also known as Google banner ad sizes, are the different types of banner sizes
used for the network of Google websites called AdSense. Google allows publishers to display
a variety of different sized ads on their site. However, Google has also given direction to the
ad sizes will bring a larger impression than other sizes.
As I mentioned earlier, there's a clear selection of ads that publishers like and use the most.
The 5 ad sizes we mentioned in the first section by far are the most popular, meaning they
have the most inventory and the best clickthrough rate. According to Google, the most
successful ad sizes tend to be wider and higher. Google has recommended the most effective
web banner sizes, which are:

 Large rectangle (336 x 280 pixels)

 Medium rectangle (300 x 250 pixels)

 Leaderboard (728 x 90 pixels)

 Half-page (300 x 600 pixels)

Besides, I recommend manually searching for sites using AdSense in your niche and check to
see which formats they are running. Specific industries will use certain ad sizes depending on
their size and theme. This means that one industry may prefer to use a rectangle, while
another industry that likes to use large skyscrapers is less popular. Understanding your
industry and the ad sizes is essential if you want to get the most exposure from your
campaign.

Advertisement

Conclusion
In summary, the size of banner websites is very important in attracting impressions for ads.
Since then, it has made customers more interested in the company's products. Currently, there
are always common sizes that are used a lot and bring high profits. However, you should also
know how to use it in combination with other banner sizes to create effective advertising
according to the company's goals and strategies. Hopefully, with the above reviews, you have
understood correctly and fully about Website banner size and have options suitable for the
company's advertising campaigns.

Table of content

What is a website banner? Why is it important?

What are the most popular website banner sizes?

What are Google’s guidelines for website banner size?

Conclusion

Related Posts

How to Find and Set Up Shopify Store Address?

December 24, 2021
Read more →

What is the Best Size for Ecommerce Product Images?

December 24, 2021
Read more →

Website Banner Size: Which is The Most Effective Size?

December 24, 2021
Read more →
AVADA Marketing Automation. Make money while
you sleep.
Subscribe to get our latest news right in your inbox

Sign me up

Product & Solution

 Marketing Automation
 Email Marketing
 SMS
 Web Push Notifications
 WhatsApp
 Popup Forms
 Reports
 Landing Page

Shopify
 Resources
 Tutorials
 Dev docs
 App reviews
 Themes reviews

Useful links
 BigCommerce Tutorials
 BigCommerce Apps
 Woo Tutorials
 WP Docs
 WP Themes
 WP Plugins
 CSS

HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH

The web standards model - HTML CSS and

JavaScript
Contents
 [hide] 

 1Introduction
 2Why separate?
 3Markup, the basis of every page
o 3.1What is XHTML?
o 3.2Validation, what’s that?
 4CSS — let’s add some style
 5JavaScript — adding behaviour to web pages
 6An example page
o 6.1index.html
o 6.2styles.css
 7The reality of it all
 8Summary
 9Exercise questions

Introduction
Continuing with Web Standards Curriculum, the basic building blocks of the
Web — HTML, CSS and JavaScript have been introduced. Now it’s time to dig a little deeper and
to look at each of these — what they do, and how the three interact with each other to create a
web site.

Why separate?
That’s usually the first question that gets asked about web standards. You can accomplish
content, styling and layout just using HTML — font elements for style and HTML tables for layout,
so why should we bother with this XHTML/CSS stuff? Tables for layout, etc. is how it used to be
done in the bad old days of web design, and many people still do it like this (although you really
shouldn’t), which is one of the reasons why we created this course in the first place. We won’t be
covering such methods in this course. Here are the most compelling reasons for using CSS and
HTML over outdated methods:
1. Efficiency of code: The larger your files are, the
longer they will take to download, and the more they
will cost some people to view (some people still pay
for downloads by the megabyte.) You therefore don’t
want to waste your bandwidth on large pages
cluttered up with styling and layout information in
every HTML file. A much better alternative is to
make the HTML files stripped down and neat, and
include the styling and layout information just once
in a separate CSS file. To see an actual case of this
in action, check out the A List Apart Slashdot rewrite
article where the author took a very popular web site
and re-wrote it in XHTML/CSS.
2. Ease of maintenance: Following on from the last
point, if your styling and layout information is only
specified in one place, it means you only have to
make updates in one place if you want to change
your site’s appearance. Would you prefer to update
this information on every page of your site? I didn’t
think so.
3. Accessibility: Web users who are visually impaired
can use a piece of software known as a “screen
reader” to access the information through sound
rather than sight — it literally reads the page out to
them, and it can do a much better job of helping
people to find their way around your web page if it
has a proper semantic structure, such as headings
and paragraphs. In addition keyboard controls on
web pages (important for those with mobility
impairments that can't use a mouse) work much
better if they are built using best practices. As a final
example, screen readers can’t access text locked
away in images, and find some uses of JavaScript
confusing. Make sure that your critical content is
available to everyone.
4. Device compatibility: Because your HTML/XHTML
page is just plain markup, with no style information,
it can be reformatted for different devices with vastly
differing attributes (eg screen size) by simply
applying an alternative style sheet — you can do
this in a few different ways (look at the [mobile
articles on dev.opera.com] for resources on this).
CSS also natively allows you to specify different
style sheets for different presentation
methods/media types (eg viewing on the screen,
printing out, viewing on a mobile device.)
5. Web crawlers/search engines: Chances are you
will want your pages to be easy to find by searching
on Google, or other search engines. A search
engine uses a “crawler”, which is a specialized piece
of software, to read through your pages. If that
crawler has trouble finding the content of your
pages, or mis-interprets what’s important because
you haven’t defined headings as headings and so
on, then your rankings in relevant search results will
probably suffer.
 6. It’s just good practice: This is a bit of a “because I
said so” reason, but talk to any professional
standards-aware web developer or designer, and
they’ll tell you that separating content, style, and
behaviour is the best way to develop a web
application.

Markup, the basis of every page

HTML and XHTML are markup languages composed of elements, which contain attributes (some
optional and some mandatory.) These elements are used to mark up the various different types
of content in documents, specifying what each bit of content is supposed to be rendered as in
web browsers (for example headings, paragraphs, tables, bulleted lists etc.)
Elements define the actual content type, while attributes define extra information about those
elements, such as an ID to identify that element, or a location for a link to point to. You should
bear in mind that markup is supposed to be as semantic as possible, ie it is supposed to
unambiguously describe the function of the content. Figure 1 shows the anatomy of a typical
element.

Figure 1: Anatomy of an (X)HTML element.

With that in mind, just what is the difference between HTML and XHTML?
What is XHTML?
HTML is the oldest web language, and the most common one you'll find on the web - it is a bit
more forgiving in terms of strict syntax rules. XHTML on the other hand is a reformulation of
HTML as an XML vocabulary, XML being a separate markup language with much stricter syntax
rules. The difference between XHTML and HTML doesn't really matter so much any more,
unless you find youself working in a web team in the future that has coding guidelines that favour
one style or another. If you are using HTML5, which we will be doing throughout this course, then
you are free to use HTML or XHTML syntax. Choose whatever you are most comfortable with, as
long as you stick to the best practices outlined in the course.
Table 1 shows the main syntax differences between HTML and XHTML.
HTML XHTML
Elements and attributes are case
insensitive, eg  <h1>  is the same thing Elements and attributes are case sensitive; they are all
lowercase.
as  <H1> .
Certain elements don’t need a closing tag All elements must be explicitly closed (eg  <p>A
(eg paragraphs,  <p> ), while others paragraph</p> ). Elements without content should be
(called “empty elements”) shouldn't have closed using a slash in the start tag
a closing tag (eg images,  <img> ). (eg  <hr></hr>  and  <hr/>  mean the same thing).
Attribute values may be written without Attribute values must be enclosed by quotes.
being enclosed in quotes.
Shorthand can be used for certain The full attribute form must be used for all attributes
attributes (ie  <input required> ). (eg  <input required="required"> ).

Table 1: Differences between HTML and XHTML.

Validation, what’s that?
Because HTML/XHTML are standards (and CSS too, for that matter), the World Wide Web
Consortium (W3C) has created great tools called validators to automatically check your pages for
you, and point out any problems/errors your code might have, such as missing closing tags or
missing quotes around attributes. The HTML validator is available online. It will automatically
detect whether you’re using HTML or XHTML, and which doctype you’re using. If you want to
check out your CSS, there is also a CSS validator available. You can also find a special HTML5
validator online, which tends to be more up to date than the W3C one, as far as HMTL5 is
concerned.
For more information on validation, see Validating your HTML . For more information on
doctypes, see Choosing the right doctype for your HTML documents.

CSS — let’s add some style

Cascading Style Sheets gives you fine control over the formatting and layout of your document.
CSS works on a system of rules, which select the elements you want to style, and then set
values for different properties of the elements. You can change or add colors, backgrounds, font
sizes and styles, and even position things on your web page in different places. Here is an
example CSS rule:

p {
line-height: 2;
color: green;
}

Now any content enclosed within  <p></p>  tags will have double the line height, and be colored
green.
The example below will give you more of an idea of how CSS styles HTML; we’ll start looking at
CSS in way more detail in CSS basics.

JavaScript — adding behaviour to web pages

Finally, JavaScript is the scripting language that you use to add behaviour to your web pages —
it can be used to validate the data you enter into a form (tell you if it is in the right format or not),
provide drag and drop functionality, change styles on the fly, animate page elements such as
menus, handle button functionality, and a million other things. Most modern JavaScript works by
finding a target HTML element, and then doing something to it, just like CSS, but the way it
operates, the syntax etc. is rather different.
JavaScript is a more complicated and expansive subject than HTML and CSS, so to keep things
simple and avoid confusion at this stage, I won’t be discussing it in the below example. In fact,
you won’t be looking at JavaScript in this course again until Programming - the real basics.

An example page
There are a lot of details I haven’t covered here, but we’ll get through everything during this web
design course! For now, I’ll present you with a real page example, just to give you a taste of what
you’ll be working with in the rest of the articles.
The example I present below is a references page, which you could use to cite references at the
end of say, a psychology essay on the group dynamics of a web development team, or a report
for work on broadband Internet use in the United States. Please note, that if you’re a stickler for
strict academic writing, this example shows APA formatting (I had to pick one) download the
example code.
index.html

<!DOCTYPE html>

<head>
<meta charset="utf-8">

<title>References</title>
<style type="text/css">
@import url("styles.css");
</style>
</head>

<body>
<div id="bggraphic"></div>
<div id="header">
<h1>References</h1>
</div>
<div id="references">
<cite class="article">Adams, J. R. (2008). The Benefits of Valid
Markup: A Post-Modernistic Approach to Developing
Web Sites. <em>The Journal of Awesome Web Standards, 15:7,</em> 57-
62.</cite>
<cite class="book">Baker, S. (2006). <em>Validate Your Pages.... Or
Else!.</em> Detroit, MI: Are you out
of your mind publishers.</cite>
<cite class="article">Lane, J. C. (2007). Dude, HTML 4, that's like so
2000. <em>The Journal that Publishes Genius,
1:2, </em> 12-34.</cite>
<cite class="website">Smith, J. Q. (2005). <em>Web Standards and
You.</em> Retrieved May 3, 2007 from
Web standards and you.</cite>
</div>
<div id="footer">
<p>The content of this page is copyright © 2007 <a
href="mailto:[email protected]">J. Lane</a></p>
</div>
</body>
</html>
I’m not going to dissect this file line by line, as you’ll see many examples in future articles,
however, a few major things to take note of are as follows.
Line 1 is what’s called the document type declaration, or doctype. In this case, the page is an
HTML5 page. The original idea of doctypes was to specify a set of rules that your markup has to
follow, and can be validated against, but in actual fact all it really does is to make your browser
render the page properly, in what is called "standards mode". The HTML5 doctype is therefore
the shortest sequence of characters that will do this. See Choosing the right doctype for your
HTML documents for more on doctypes.
Lines 5 to 7 import a CSS file into the page — the styles contained in this file will be applied to
the various elements on the page. You’ll see the content of the CSS file that handles all of the
formatting for the page in the next section. I’ve assigned a different class to each of the different
types of reference. Doing this lets me apply a different style to each type of reference — for
instance in our example I’ve put a different color to the right of each reference to make it easier
to scan the list.
The page looks like Figure 2 without the CSS applied:

Figure 2: the raw HTML, without any CSS styling

Now let’s take a look at the CSS that styles the HTML.
styles.css

body {
background: #fff url('images/gradbg.jpg') top left repeat-x;
color: #000;
margin: 0;
padding:0;
border: 0;
font-family: Verdana, Arial, sans-serif; font-size: 1em;
}

div {
width: 800px;
margin: 0 auto;
}

#bggraphic {
background: url('images/pen.png') top left no-repeat;
height: 278px;
 width: 362px;
position: absolute;
left: 50%;
z-index: 100;
}

h1 {
text-align: center;
text-transform: uppercase;
font-size: 1.5em;
margin-bottom: 30px;
background: url('images/headbg.png') top left repeat;
padding: 10px 0;
}

#references cite {
margin: 1em 0 0 3em;
text-indent: -3em;
display: block;
font-style: normal;
padding-right: 3px;
}

.website {
border-right: 5px solid blue;
}

.book {
border-right: 5px solid red;
}

.article {
border-right: 5px solid green;
}

#footer {
font-size: 0.5em;
border-top: 1px solid #000;
margin-top: 20px;
}

#footer a {
color: #000;
 text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

I went a little overboard with styling up this page, adding some neat background effects in order
to show you some of the things that can be accomplished using CSS.
Line 1 sets some defaults for the document such as text and background color, width of border to
add around the text, etc. Some people won’t bother to explicitly state defaults like these, and
most modern browsers will apply their own defaults, but it is a good idea, as it allows you more
control over how your web site will look across different browsers.
On the next line I’ve set the page to be 800 pixels wide (although I could have specified a
percentage here to have the page expand/contract based on the size of the browser window.
The margin setting I’ve used here will ensure that the page content stays centered in the window.
Next let’s turn our attention to the background images used in the page (these are applied using
the  background: url  declarations.) I’ve got 3 different background elements on this page. The
first is a gradient that tiles across the top of the page giving us the nice blue fade. Second, I’ve
used a semi-transparent PNG for the pen graphic in order to provide enough contrast with the
text above it and to pick up the gradient (semi-transparent PNG images don’t work in Internet
Explorer 6 or below, but they work in pretty much every modern browser; see Dean Edward's IE-
fixing JavaScript for an IE6 solution to this issue, which also fixes some of IE6’s CSS support
issues.)
Finally, I’ve used another semi-transparent PNG for the background of our page heading. It gives
the heading a little added contrast, and provides a neat effect.
The fully styled example looks like Figure 3.

Figure 3: The finished example with styles applied.

The reality of it all
Something you should bear in mind when learning web standards is that what we are working
towards here is an ideal. It would be so much easier if all web designers and developers used
modern web standards and best practices to build web sites, and all browsers in use today
supported web standards perfectly. Unfortunately, neither is true - for a start, the web
professionals making web sites today have learned how to do so in many different ways, and at
many different times. Some are still making web sites using bad practices like tables and spacer
gifs, which is what most of us used to do back in the late nineties. Most web professionals taught
themselves, and even those of us who did do an official qualification of some kind did not
necessarily get taught "the right way" to do things. Many of the university and college courses out
there are ...shall we say... behind the times.
If you talked to many of those who do things using the old methods about updating their skill set,
they would probably say "why bother - my way works, and I don't have time to learn new skills,
so I'm just sticking to what I know." You can understand this argument, but if they could just take
the time to update their skills, I'm sure they would find creating cross browser web sites and
maintaining their code a lot easier. They would also get better accessibility and SEO thrown into
the bargain. For now, I'd advise those of you learning to do things right from the start with
courses like this to carry on doing what you are doing! Also, if you get the chance to pass on
some of these modern best practices to others, then you will be doing the Web a favour.
And in terms of web browser support, all modern browsers now support HTML, CSS and
JavaScript really well. The problem lies in legacy support for old versions of Internet Explorer - IE
6, 7 and 8 still have significant usage figures, so you may still be called upon to support these in
web projects. You can work around lack of support for various features, and sometimes lack of
support will mean a lesser (eg, it may not look as nice) experience that still works ok, rather than
the site not working at all. This may still be fine, depending on your particular situation.
We'll include more details on what to do with older browser support in subsequent chapters.

Summary
There is nothing mystical about HTML, CSS and JavaScript. They’re simply an evolution of the
web. If you’ve already had some exposure to HTML, there is nothing to “unlearn”. Everything you
know is still relevant, you’ll just have to handle certain things a different way (and be a little more
careful in your markup).
Aside from getting the satisfaction of a job well done, web standards development just makes
sense. The counter-arguments to developing with standards is that it’s time consuming and a
pain in the neck having to make a layout work across browsers. The opposite argument could be
applied to making a non-standards-based layout work across a range of devices and with future
browser versions. How can you be certain that your hobbled-together markup will display at all in
future versions of Opera, Firefox, Safari, Chrome, Internet Explorer, etc.? You can’t, unless you
follow the rules.

Exercise questions
 What’s the difference between a class and an ID?
 What role do XHTML, CSS and JavaScript each play on
a web site?
 Take the index.html file from the example provided, and
change the formatting using the CSS alone (I'd suggest
editing the file using a text editor such as Notepad or
Text Wrangler). Do not make any changes to the HTML.
 Add an icon for each of the different
reference types (a different icon for articles,
books and web resources). Create your own
 icons for this purpose, and make them
appear alongside the different reference
types using CSS alone.
 Hide the copyright notice at the bottom of
the page.
 Change the look of the title, make it
distinctive.
 What sorts of things could you do to the CSS to make
this example work well on a mobile phone browser?
Note: This material was originally published as part of the Opera Web Standards Curriculum,
available as 4: The Web standards model - HTML, CSS and JavaScript, written by Jon Lane.
Like the original, it is published under the Creative Commons Attribution, Non Commercial -
Share Alike 2.5 license.

Next: Web Design Concepts: Information Architecture - planning out a web site

Web Page Design: A

Comprehensive Guide

Nick BabichNov 24, 2020

Illustrated by Prabhat Mahapatra
Web design is a complex subject. Designers and developers have to consider both visual
appearance (how the website looks) and functional design (how the website works). With so
many things that you need to take into account, the process of design can be tricky. To
simplify the task, we’ve prepared this guide for you.

In this guide, we’ll focus on the main principles, heuristics, and approaches that will help
you create a great user experience for your website. We’ll start with global things, like user
flows (how to define the structure of the website), and then work down to the individual
page (what to consider during web page design). We’ll also cover other essential aspects of
design, such as mobile considerations and testing.

Designing the user flows

The first thing to consider is your user flow, or the path by which the visitor will navigate
through your website. After all, web page design isn’t about creating a collection of
individual pages; it’s about creating flows. This path is a series of steps that the visitor takes
from the entry point (the first page where they land) toward the specific action you want
them to take (typically a conversion action, such as a sign-up, purchase, etc.). The following
will help you determine your user flows as you design your website.

Information architecture

Information architecture (IA) is a discipline that allows you to organize information clearly
and logically for your visitors. Information architects analyze how users structure
information and create a hierarchy that aligns with the user’s expectations. Good IA is a
result of solid user research and usability testing.

There are several ways to research user needs. Often, an information architect will take an
active part in user interviews, card sorting, and moderated usability testing where they
observe how people interact with the existing design and share their opinions on it.
 Card sorting is a simple technique that allows UX practitioners to understand how users
group and organize content. Image credit experience ux.

IA is also used to define the site’s navigation and menus. When UX practitioners finish
working on a menu, they use another technique called “tree testing” to prove that it will
work. Tree testing happens before designing the actual interface.

Tree testing is a reliable method of finding out whether users can work with the proposed
menu structure. Image credit Nielsen Norman Group.
Global navigation

Navigation is a cornerstone of usability. If visitors can’t navigate your website, they will
most likely leave. That’s why the navigation on your website should adhere to a few
principles:

 Simplicity. Your navigation should help visitors understand how to get around on

your site with the fewest clicks possible.
 Clarity. There shouldn’t be any guessing about what each navigation option means.
 Consistency. The navigation system should be the same for all pages on the website.

Consider a few things when designing navigation:

 Select a navigation pattern based on the user’s needs. Navigation should

accommodate the needs of the majority of your website visitors. For example, it’s
better to avoid hamburger-menu navigation if the majority of your users aren’t
familiar with the meaning of the icon itself.
 Prioritize navigation options. A good design team will prioritize navigation options
according to common user tasks, considering both priority and frequency of tasks.
 Make it visible. Minimize the user’s cognitive load by making important navigation
options permanently visible. When we hide navigation options we risk that visitors
won’t be able to find them.
 Communicate the current location. Failing to indicate the current visitor’s location
is a common problem on many websites. If visitors have to ask, “Where am I?”,
that’s a clear indication that your navigation needs some work. For large websites,
offer location indicators like breadcrumbs.

Visual and functional design of web links

Links are a key element in web navigation. Their visual and functional design has a direct
impact on usability. Follow a few rules with these interactive elements:
  Recognize the difference between internal and external links. Users expect
different behavior for internal and external links. All internal links should open in the
same tab so that visitors can use the “back” button.
 Change the color of visited links. When visited links don’t change color, users
could unintentionally revisit the same pages multiple times.
 Double-check all links. It’s frustrating to arrive at a 404-error page. Use tools
like Dead Link Checker to find any broken links on your website.

“Back” button in a browser

The “back” button is perhaps the most used button in the browser, so make sure it works
according to user expectations. When a user follows a link on a page and then clicks the
“back” button, they expect to return to the same spot on the original page. Avoid situations
in which clicking “back” brings the user to the top of the initial page, instead of where they
left off, especially on long pages. Losing their spot forces the user to scroll through content
they have already seen, which leads to unnecessary interaction cost.

Breadcrumbs

Breadcrumbs are a set of contextual links that function as a navigation aid on websites. It’s
a secondary navigation scheme that usually shows the user’s location on a website.

While this element doesn’t require a lot of explanation, a few things are worth mentioning:

 Don’t use breadcrumbs as a replacement for primary navigation. Visitors should

use the main menu to navigate; breadcrumbs should only support the visitors in that.
When visitors rely on breadcrumbs as a primary method of navigation, rather than an
extra feature, it is a clear indication of poor navigation design.
 On the Best Buy website, breadcrumbs support the primary navigation. Image credit Best
Buy.

 Separate each level clearly. Use arrowheads as separators, not slashes. A forward

slash (/) can easily clash with product categories on e-commerce websites. If you’re
going to use the forward slash, ensure that no product category will ever have a slash:

Example of poor breadcrumb structure; distinguishing between the different levels of this
breadcrumb trail may be difficult for users.

Search

Some visitors come to a website looking for a specific item. Since they know what they
want, they probably won’t use the navigation options to find it. The “Search” feature will
act as a shortcut in this case. Visitors should be able to type text in a search box, submit
their search query, and find the page they’re looking for.
Take these few basic rules into account when designing the search box:

 Put the search box where users expect to find it. The chart below, based on a study
by A. Dawn Shaikh and Keisi Lenz, shows the expected location of the search field
according to a survey of 142 participants. The study found that the most convenient
spot is the top left or top right of every page on a website.

According to one study, the top left or

top right of your pages is the best place for a search box. Image credit Erik Moeller.

 Use a magnifying glass icon to draw attention to the area. The magnifying glass
icon has a universal meaning—most users are familiar with it. The Nielsen Norman
Group recommends using a schematic icon, the simplest version of the magnifying
glass.
 To draw attention to your search bar,
use an icon like a magnifying glass. Image credit icons8.

 Size the input box appropriately. Making the input field too short is a common
mistake. Of course, users can type a long query into a short field, but only a portion
of the text will be visible at a time, which isn’t great for usability. In fact, when a
search box is too short, visitors tend to use short, imprecise queries, because longer
queries can be hard and inconvenient to read. A 27-character input field will
accommodate 90% of queries.
 Amazon’s large input box allows visitors to see their entire search query. Image
credit Amazon.

 Put the search box on every page. Show the search box on every page so that users
can access it regardless of where they are on the website.

Designing individual pages

Now that we’ve reviewed the basics of user flow, it’s time to learn how to design the
individual web pages. Below we’ve summarized the key website designing guidelines to
know.

Content strategy

When it comes to web page design, the most important thing is to design around the page’s
objectives. Content strategy—which refers to planning, creating, and managing content on
your website—will help with this exercise. Each page has its own goal, such as informing
visitors about something or encouraging them to convert. Once you understand the goal of
the page, only then should you work on the design or write the content.

Here are a few practical tips as you consider your content strategy:
 Prevent information overload. Too much information on a page can easily
overwhelm visitors. There are some simple ways to minimize information overload.
One common technique is chunking: breaking content into smaller chunks to help
users understand and process it better. A checkout form is a perfect example of this.
Display, at most, five to seven input fields at a time and break down the checkout
process into easy steps, like in this screenshot:

Example of a step-by-step checkout process. Image credit Witteia.

 Avoid jargon and industry-specific terms. Each unknown term or phrase that

appears on the page will make it that much harder for visitors to understand the
information. A safe bet is to write for all reading levels and pick words that are
clearly and easily understandable to everyone.
 Minimize long sentences. Write in small, scannable segments. According to Robert
Gunning’s book “How to Take the Fog Out of Business Writing”, sentences should
be 20 words or fewer.
 Avoid capitalizing all letters. All-caps text is fine for acronyms and logos. But it’s
best to avoid all caps for paragraphs, form labels, errors, and notifications. In his
book Legibility of Print, Miles Tinker mentions that all-caps dramatically reduces the
speed of reading.
Page structure

A properly structured page will help visitors find each user interface element. While there
are no one-size-fits-all rules, there are a few website design guidelines that will help you
create a solid structure:

 Make it predictable. Look at your competitors’ websites, identify common design

patterns, and align with user expectations by using design patterns that are familiar to
your target audience.
 Use a layout grid. A layout grid divides a page into major regions and defines the
relationships between elements in terms of size and position. With the help of a grid,
combining different parts of a page in a cohesive layout becomes much easier.

A 12-column grid
is good for web page design. Adobe XD’s layout grids help designers create consistent,
 organized designs for different screen sizes and manage the proportions between elements.
Image credit Adobe XD.

 Use a low-fidelity wireframe to privatize essential elements. Wireframing can

save web designers a lot of time. Before building the page with real elements, create
a wireframe, analyze it, and remove anything that isn’t absolutely necessary.

Example of a low-fidelity wireframe created in Adobe XD. Image credit Tim Hykes.

Visual hierarchy

People are more likely to quickly scan a web page than to read everything there. Therefore,
it’s a good idea to optimize your web page design for fast scanning. You can help visitors
find what they need with a good visual hierarchy, which refers to the arrangement or
presentation of elements on a web page in a way that indicates their importance (that is,
where their eyes should focus first, second, etc.). Good visual hierarchy can significantly
improve page scannability.
 Use natural scanning patterns. As designers, we have a lot of control over where
people look when they’re viewing a page. The F-shaped pattern and the Z-shaped
pattern are two natural scanning patterns that can help you to set the right path for the
visitor’s eyes. For text-heavy pages, such as articles and search results, the F pattern
is better, whereas the Z pattern is good for pages that aren’t text-oriented.

Example of an F-shaped pattern on the CNN website. Image credit CNN.

 Example of a Z-scanning pattern on the Basecamp website. Image credit Basecamp.

 Visually prioritize important elements. Make important elements, such as key

content or your primary call-to-action buttons, the focal points so that visitors see
them right away.

The “Pick a Plan” call-to-action stands out in this example. Image credit MailChimp.

 Create mockups to clarify the visual hierarchy. Mockups are high-fidelity design

artifacts that enable designers to see what the final layout will look like. Rearranging
elements in a web design tool is much easier than doing it with code.
 Example of a high-fidelity mockup created in Adobe XD. Image credit Coursetro.

Scrolling behavior

A persistent myth among web designers is that people don’t scroll. To be clear: everybody
scrolls, and people start to scroll almost instantly as they land on a new page.

Knowing this, you can improve the user’s experience with these tips:

 Encourage users to scroll. Despite the fact that people usually start scrolling as soon
as the page loads, content at the top of the page is still very important. Put your most
compelling content at the top:
o A good introduction. An excellent introduction sets the context for the
content and answers the visitor’s question, “What’s this page all about?”
o Engaging imagery. Good imagery can accompany text and help visitors
better understand the idea or topic.
 In this example, Tesla uses powerful imagery to show the benefits and features of the Model
X. Image credit Tesla.

 Orient your users. When you create lengthy pages, keep in mind that visitors still
require a sense of orientation (of their current location) and a sense of navigation
(other possible paths). Long pages can make navigation problematic for users; if the
top navigation bar loses visibility when the user scrolls down, they will have to scroll
all the way back up when they’re deep within the page. The obvious solution to this
is a sticky menu that shows the current location and that remains on screen in a
consistent area at all times.

As you think about how to design a web page in a way that minimizes user interaction cost,
one solution is to use scroll-activated sticky navigation. Image credit Zenman.

 Provide visual feedback when loading new content. This is especially important

for web pages where content loads dynamically, such as news feeds. Because
 content-loading during scrolling should be fast (no longer than two to 10 seconds),
you can use looped animation to indicate that the system is working.

Subtle animation (such as Tumblr’s loading indicator) tells the user that more content is
loading. Image credit Tumblr.

 Don’t hijack scrolling. User control and freedom are among the key

heuristics for UI design coined by Jakob Nielsen. Hijacked scrolling is annoying to
most users because it takes the control away and makes the scrolling behavior
completely unpredictable. When you design a website, let the user control their
browsing experience.
 Tumblr’s signup page uses scroll hijacking, which isn’t an ideal user experience. Image
credit Tumblr.

Content loading

While an instant response is best, there are occasions when your website will need more
time to deliver content to visitors. A bad Internet connection could cause a slow reaction, or
an operation itself could take a bit more time to complete. But no matter the cause of such
behavior, your website should appear fast and responsive. Here are some ways to achieve
this:

 Make sure regular loading doesn’t take long. Our natural attention span is very
low. According to Nielsen Norman Group research, 10 seconds is about the limit!
When visitors have to wait for a website to load, they may become frustrated and
leave. Even with the most beautifully designed loading indicator, users will still leave
if it takes too long.
 Use skeleton screens during loading. Many websites use progress indicators to
show that data is loading. While the intention behind a progress indicator is good,
since it provides visual feedback, the result can be negative. As Luke Wroblewski
mentions, “Progress indicators by definition call attention to the fact that someone
needs to wait. It’s like watching the clock tick down—when you do, time seems to go
slower.”
Skeleton screens are an excellent alternative to this. These containers are essentially a
temporarily blank version of the page, into which information is gradually loaded. Rather
than showing a loading indicator, designers can use a skeleton screen to focus users’
attention on actual progress and create anticipation for what’s to come. Because information
is incrementally displayed on the screen, it feels like things are happening immediately.

Facebook uses skeleton screens to fill out the UI as content loads incrementally. Image
credit Facebook.

Buttons

Buttons are interactive UI elements that play a key role in conversational flow. It’s worth
paying attention to these basic best practices for buttons:

 Ensure that clickable elements actually look clickable. The way an object looks
tells users how to use it. Visual elements that look like links or buttons but aren’t
clickable, such as underlined words that aren’t links or elements that have a
rectangular background but aren’t buttons, can easily confuse users.
 Label buttons according to what they do. The label on any actionable interface
element should always tie back to what it will do for the user. Descriptive labels can
help with this—users will feel more comfortable if they understand what action a
button does. Vague labels such as “Submit” or abstract labels like in the example
below don’t provide enough information about the action.
 A good website
design guideline is to be clear with your button text so that users understand what the
interface element does. Image credit UX Matters.

 Design buttons consistently. Users remember details, whether consciously or not.

When browsing a website, they’ll associate a particular element’s shape with button
functionality. Therefore, visual consistency will not only contribute to a great-
looking design but will also make the element’s behavior more predictable to
visitors. The image below illustrates this point perfectly. Using three different button
shapes will leave your user confused.

When designing buttons, consistency leads to better usability. Image credit Nick Babich.

Imagery
As the saying goes, a picture is worth a thousand words. Human beings are highly visual
creatures and images are a powerful way to capture the user’s attention. A single image can
convey more to the viewer than an elaborately designed block of text. Furthermore, images
cross language barriers in a way that text simply can’t.

The following principles will help you integrate imagery into your web page design:

 Make sure images are relevant. One of the biggest dangers in design is imagery
that conveys the wrong message. Select images that are clear and support your
product goals.

Images that aren’t related to the topic will confuse visitors. Image credit Lloyds Bank.

 Avoid generic photos of people. Using human faces in design is an effective way to

engage users. When visitors see faces of other humans it makes them think that there
are real humans behind the product or organization. But in an attempt to build trust,
many corporate websites rely on generic stock photos. When visitors see inauthentic
photos, they may start to doubt the organization.
 Inauthentic stock images may create a poor first impression for visitors. Image credit Adobe
Stock.

 Use high-quality assets with no distortion. The quality of the visual assets on your
website can have a tremendous impact on the user’s impression. Pixelated images
make visitors doubt the quality of your product, so make sure to test resolution sizes
for various ratios and devices.
 Example of a pixelated, poorly sized image (left) versus a properly sized image (right). Image
credit Adobe.

Videos

With increasing Internet speeds, videos are more popular than ever, especially considering
that they extend the time spent on site. Today, video is everywhere. We’re watching it on
our desktops, tablets, and phones. When used effectively, video is one of the most powerful
tools available for engaging an audience — it conveys more emotion and really gives people
a feel for a product or service.

If you want to use video on your website, consider the following recommendations:

 Set audio to “off” by default, with the option to turn it on. When users arrive on a
page, they don’t expect that it will play any sound. If they’re in a public place and not
wearing headphones, they might not appreciate sudden and unexpected audio. In
most cases, users will leave the website as soon as it plays.
 Facebook videos
play automatically as soon as the user reaches them, but no sound plays unless the user
enables it. Image credit Facebook.

 Keep promo videos as short as possible. According to research by D-Mak

Productions, short videos are more appealing to the majority of users. Keep business
videos in the range of two to three minutes.
 According
to research, users prefer shorter videos to longer videos. Image credit D-MAK Productions.

 Provide an alternative way to access content. Always try to design your products

for users with various abilities, including those who can’t hear or see. For
accessibility, include captions and a full transcript of the video.

Subtitles will make your video content more accessible to your hearing- or visually impaired
users. Image credit TED.

Call-to-action buttons (CTAs)

Calls-to-action (CTAs) are buttons that guide users toward your conversion goal. The whole
point of a CTA design is to direct visitors to a specific action. Some common examples of
CTAs are:

 “Start a trial”
 “Download the book”
 “Sign up for updates”
 “Get a consultation”

Take a few things into account when designing CTA buttons:

 Size. Your CTA should be large enough to attract attention. A quick five-second test
will help you determine the right size. View a web page for five seconds and then list
the elements you remember. If the CTA is among the elements, then congrats! It’s
sized appropriately.
 Visual prominence. You can make certain buttons stand out by giving them more
visual prominence. Contrasting colors work best for CTAs and make for striking
buttons.

The green of the CTA button here jumps off the page and gets the visitor’s attention. Image
credit Mozilla.

 Negative space. Along with size and color, the amount of space around a CTA plays
an important role in the visual hierarchy of elements. White (or negative) space
creates essential breathing room and separates the button from other elements in the
interface.
 The previous version of Dropbox’s homepage features a good example of using negative
space to make the primary CTA pop. The blue “Sign up for free” CTA stands out against the
light blue of the background. Image credit Dropbox.

 Labels. Use action-oriented text for CTA labels, as this will compel visitors to take
action. Use strong verbs like “Start,” “Get,” or “Join.”

Evernote has one of the most common yet still effective action-oriented texts for its CTA.
Image credit Evernote.

Tip: Use a “blur test” to test your CTA. A blur test is a quick technique to determine
whether the user’s eye will go where you want it to go. Take a screenshot of your page
and apply a blur effect in Adobe XD (see the example on Charity Water below). Looking at
the blurred version of your page, which elements stand out? If you don’t like what you see,
revise.
 A blur test is a technique to reveal a design’s focal point and visual hierarchy. Image
credit Charity Water.

Web forms

Filling out forms is one of the most important types of interaction for users on the web.
Users should be able to complete forms quickly and without confusion.

Here are a few design recommendations that will help you improve your form design:

 Ask only what’s required. Every extra field you add to a form will affect its
conversion rate. The more you ask, the less motivated users will be to provide the
data. Always think about why you’re requesting certain information from users and
how you will be using it.
 Order the form logically. For example, asking for someone’s address before their
name might seem strange.
 Group related fields together. Grouping creates a flow from one set of questions to
the next. Grouping related fields together also helps the user make sense of the
information.
 For the best form-fill experience, group related fields together. Image credit Nielsen Norman
Group.

Animation

Animation is another important tool for effective interaction. More and more designers are
incorporating animation as a functional element to enhance the user experience. However,
animation in design can enhance the user experience only if it’s incorporated at the right
time and place. Good UI animation has a purpose; it is meaningful and functional.

Here are a few cases in which animation can enhance the user experience:

 Visual feedback on user action. Good interaction design provides feedback. Visual

feedback is helpful when you need to inform users about the result of an operation. If
there’s a problem, functional animation can provide that information. For example, a
shake animation can indicate that the user entered the wrong password.
 Animatio
ns can help users understand problems, such as if they entered the wrong password. Image
credit The Kinetic UI.

 Visibility of system status. One of Jakob Nielsen’s 10 heuristics for

usability, visibility of system status remains among the most important principles in
user interface design. Users want to know their current context in a system at any
given time, and a website should tell the user what’s happening via appropriate visual
feedback. Data uploading and downloading are typical operations on the web and
they are great candidates for functional animation. For example, an animated loading
bar shows how fast a process is going and sets an expectation for how fast the action
will happen.
 Example of a unique animation for downloading progress. Image credit xjw.

 Navigational transitions. Navigational transitions are movements between states on

a website, such as from a high-level view to a detailed view. Functional animation
creates a connection between the two states and smoothly transports users between
them.
 Example of a state transition on a corporate website. Image credit Ramotion.

 Parallax effects. Parallax is a popular technique in web design in which the

background moves at a different speed than the foreground content while scrolling.
This effect can introduce a sense of dynamics and movement into web layouts.
(Learn more about parallax best practices here.)
 Branding. Well-crafted animation establishes an emotional connection with visitors.
It can highlight a product’s strengths and make the user experience truly delightful
and memorable.
 Branding animation can create truly memorable experiences. Image credit Heco.

Mobile considerations

Today, almost 50% of users access the web from mobile devices. What does this mean for
us web designers? It means that we must have a mobile strategy for every website we
design.

Responsive design

It’s essential to optimize your website for various screens and resolutions. Here are some
key guidelines to follow:

 Aim for a single-column layout. A single-column layout usually works best on

mobile screens because it scales well between different device resolutions and
between “portrait” and “landscape” mode.
 Use the “Priority+” pattern to prioritize navigation across
breakpoints. Priority+ is a term coined by Michael Scharnagl to describe navigation
that exposes the most important elements and hides away less important items behind
 a “more” button. This type of navigation uses the available screen space; as space
increases, the number of exposed navigation options increases as well, which leads to
better visibility and more engagement.

This pattern is especially good for content-heavy websites with a lot of different sections
and pages, such as a news website or a large retailer’s e-commerce store. In the screenshot
example below, The Guardian uses the Priority+ pattern for its section navigation. Less
important items show up when the user hits the “All” button.

In this example, The Guardian employs the Priority+ pattern for its section navigation. Image
credit Brad Frost.

 Size images appropriately for displays and platforms. A website must adapt to look
perfect on all of the different devices and in all of the various resolutions. Creating
great-looking images on the web is one of the main challenges web designers face
when building responsive websites. To simplify this task, you can use tools like
 the Responsive Image Breakpoints Generator to generate breakpoints for images
interactively.

Responsive Image Breakpoints Generator helps you manage multiple sizes of images,

enabling you to generate responsive image breakpoints interactively. Image
credit Responsive Breakpoints.

From clickable to tappable

On the mobile web, finger taps (not mouse clicks) create interactions. This means that
different rules apply when you’re designing touch targets and interactions.

 Properly sized touch targets. All interactive elements (such as links, buttons, and
menus) should be tappable and a bit larger. Refer to the MIT Touch Lab’s study to
choose a proper size for your buttons. The study found that 10×10 millimeters is a
good minimum touch target size. This rule works for both designing apps and
websites.
 Smaller touch targets are harder for users to tap than larger ones, so be sure to size your
buttons appropriately. Image credit Apple.

 Stronger visual signifiers of interactivity. On mobile, there is no hover state to

provide additional visual feedback to your user. Thus, use visual design decisions
that allow users to correctly predict how an interface element will behave just by
looking at it. With buttons, for example, consider using a square shape with a subtle
shadow.

Example of a CTA button design with good visual signifiers. Image credit Nick Babich.
Accessibility

Accessibility is another essential website design guideline. Today’s products must be

accessible to everyone, regardless of a person’s abilities. Designing for users with
impairments should be an integral part of product design.

Users with poor eyesight

A lot of websites use low contrast for text copy. While gray text on a white background
may look cool, it is also illegible and inaccessible. Low contrast is especially problematic
for users with low vision and those who struggle with contrast sensitivity.

Gray text on a light-gray background is hard to read; instead, opt for more contrast for better
readability. Image credit Squarespace.

Low-contrast text is hard to read on a desktop, but it becomes even more difficult on
mobile. Imagine trying to read low-contrast text on a mobile device while walking in bright
sunlight.

The most important characteristic of text and other vital elements on a website is
readability, which requires sufficient contrast between the text and the background. To
ensure that text is readable by people with visual impairments, the W3C’s Web Content
Accessibility Guidelines (WCAG) includes a contrast-ratio recommendation. They
recommend the following contrast ratios for body text and image text:

 Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio
of 7:1 is preferable.
 Large text (at 14-point bold and 18-point regular and up) should have a contrast ratio
of at least 3:1 against its background.

In this example of poor

contrast, the lines of text do not meet the ratio recommendations and are difficult to read
against their background. Image credit Nick Babich.

In this example of
better contrast, the lines of text follow the color-contrast ratio recommendations and are
legible against their background. Image credit Nick Babich.

You can use WebAIM’s Color Contrast Checker to quickly find out whether you’re within
the optimal range.

WebAIM’s Color Contrast Checker will tell you whether your contrast ratio adheres to
WCAG standards. Image credit WebAIM.

Color blind and low-vision users

It’s estimated that 4.5% of the global population experience color blindness (that’s 1 in 12
men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind
(1 in 188 people).

To make design accessible for these users, avoid using color alone to convey meaning. As
the W3C states, color shouldn’t be used “as the only visual means of conveying
information, indicating an action, prompting a response, or distinguishing a visual
element.”

One common example of this is in forms. Success and error messages are often green and
red, respectively. But red and green are the two most difficult colors to distinguish for
people with color-vision deficiency. You’ve likely seen error messages that indicate
something like “the fields marked in red are required.” While it might not seem like a big
deal, this error message can be extremely frustrating for people with a color-vision
deficiency. Instead, designers should use color to highlight or complement what is already
visible.

In this example, the form relies only on the color red to indicate fields with and without
errors. Color-blind users wouldn’t be able to identify these fields. Image credit WebAIM.

In the form above, the designer should give more specific instructions, such as: “The email
address you entered is not valid,” or at least display an icon near the field that requires
attention.
 Icons and labels show which fields are invalid, better communicating the information to a
color-blind user. Image credit WebAIM.

Blind users

Images and illustrations are a significant part of the web experience for people who can
see and for blind users. Blind people use assistive technologies, such as screen readers, to
interpret websites. Screen readers “read” images using the alternative text attributed to the
image. If that text is not present or is not descriptive enough, they won’t be able to get the
information as intended.

Consider two examples—first, Threadless, a popular t-shirt store. In the screenshot below,

this page doesn’t say much about the item. The only text information available is a
combination of price and size.
 Example of an e-commerce page that lacks detailed information about the item. Image
credit Threadless.

The second example is from ASOS. This page, selling a similar shirt, provides accurate
alternative text for the item. This helps people with screen readers learn about what the item
looks like.
 In this
example, the e-commerce page provides a good amount of detail about the product. Image
credit ASOS.

When creating text alternatives for images, follow these guidelines:

 All “meaningful” images require descriptive alternative text. (A “meaningful” photo

adds context to the information on the page.)
 A text alternative isn’t needed if an image is purely decorative and provides no useful
information to the user.

Keyboard-friendly experience

Certain users, such as those with motor impairments, navigate the internet using their
keyboard, rather than a mouse. To cater to this group, it’s important to enable keyboard-
based navigation.
Here are the most basic rules for keyboard navigation:

 Check that keyboard focus is visible and obvious. Some web designers remove the
keyboard focus indicator because they think it’s an eyesore. This decision hinders
keyboard users from properly interacting with the website.
 All interactive elements should be accessible. Keyboard users must be able to
access all interactive elements, not just the main navigation options or primary calls
to action.

You can find detailed requirements for keyboard interaction in the “Design Patterns and
Widgets” section of the W3C’s “WAI-ARIA Authoring Practices” document.

Testing

The next thing you need to learn is how to test your website. Even if you’ve followed all of
the website design guidelines above, it doesn’t mean that it will work for your users. A
good rule of thumb is “test early, test often” because it’s the only way to know for sure.

Iterative testing

Like any other part of the design cycle, testing is an iterative process. Gather feedback early
on in the design process and iterate throughout.
 Eric Ries’s Build-
Measure-Learn feedback loop is an important part of the design and testing process. Image
credit Eric Ries.

Test page loading time

Users hate slow-loading web pages. That’s why response time is a critical factor for modern
websites. According to Nielsen Norman Group, there are three response-time limits:

 0.1 second. This feels instant for users.

 1 second. The user will sense a slight delay.
 10 seconds. Users may leave the website immediately.

Obviously, we shouldn’t make users wait 10 seconds for anything on our websites. But
even a few seconds of delay can make an experience unpleasant.

What usually causes slow loading time?

 Heavy content objects (such as embedded video and slideshow widgets)

 Unoptimized back-end code
  Hardware-related issues (infrastructure that doesn’t allow for fast operations).

Tools like PageSpeed Insights will help you find the causes.

A/B testing

An A/B test is ideal when you’re struggling to choose between two versions of a design.
This testing method consists of showing one of two versions randomly to an equal number
of users and then reviewing analytics to see which version accomplished your goal more
effectively.

A/B testing will help you understand which version of your design leads to better
conversions. Image credit VWO.

Design handoff

The UX design process has two important steps: prototyping the design and developing a
working solution. The “handoff” is the step that connects the two. As soon as the design is
ready for development, designers prepare a specification, which is a document that
describes how to code the design. A specification ensures that the team implements the
design according to the original intention.

A good specification is critical because without it, the developers will have to either rely on
guesswork when building the website or go back to the designer to get answers to their
questions. But assembling a specification manually can be a headache and usually takes
significant time, depending on the complexity of the design.

With Adobe XD’s design specs feature, designers can publish a public URL so that
developers can inspect flows, grab measurements, and copy styles. Designers no longer
have to spend time authoring specifications to communicate positioning, colors, text styles,
or fonts to the developer.

Your product team can also export assets from XD to Mockplus Cloud as a single source of
truth for everything related to the design. The cloud can become a foundation for
your design systems that will help both designers and developers create and reuse design
elements, including patterns and visual styles.

Conclusion

Of course, these web design tips are just a start. Mix and match these ideas with your own
for the best results. Treat your website as a continually evolving project and use analytics
and user feedback to constantly improve the experience. And remember that design isn’t
just for designers—it’s for users.
Web Design Guides

CSS | Website Layout

 Difficulty Level : Easy
  Last Updated : 22 Aug, 2022

 Read

 Discuss

 Courses

 Practice

 Video
A website can be divided into various sections comprising of header, menus, content
and footer based on which there are many different layout design available for
developer. Different layouts can be created by using div tag and use CSS property to
style it. 
The most common structure of website layout is given below: 

Notice: Header section contains a website logo, a search bar and profile of user. The
navigation menu contains link to various categories of articles available and content
section is divided into 3 parts(columns) with left and right sidebar containing links to
other articles and advertisements whereas the main content section is the one
containing this article, then at the bottom there is a footer section which contains
address, links, contacts etc. 
Header Section: The header section is generally placed either at the top of the
Website or just below a top navigation menu. It often comprises of the name of the
Website or the logo of the Website.
Example: 
 html

<!-- This code describes the header section

of website layout -->
<!DOCTYPE html>
<html>
     <head>
        <title>
            Website Layouts
        </title>
         
        <style>
            .header {
                background-color: green;
                padding: 15px;
                text-align: center;
            }
        </style>
    </head>
     
    <body>
        <div class = "header">
            <h2 style = "color:white;">
                GeeksforGeeks
            </h2>
        </div>
        <br>
         
        <center style="font-size:200%;">
            Remaining Section
        </center>
    </body>
</html>                   

Output: 

Navigation Menu: A Navigation Bar/Menu is basically a list of links that allows

visitor to navigate through the website comfortably with easy access.
Example: 
 html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Website Layout
        </title>
         
        <style>
         
            /* CSS property for header section */
            .header {
                background-color: green;
                padding: 15px;
                text-align: center;
            }
             
            /* CSS property for navigation menu */
            .nav_menu {
                overflow: hidden;
                background-color: #333;
            }
            .nav_menu a {
                float: left;
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            .nav_menu a:hover {
                background-color: white;
                color: green;
            }
        </style>
    </head>
     
    <body>
         
        <!-- header of website layout -->
        <div class = "header">
            <h2 style = "color:white;font-size:200%;">
                GeeksforGeeks
            </h2>
        </div>
         
        <!-- navigation menu for website layout -->
        <div class = "nav_menu">
             <a href = "#">Algo</a>
            <a href = "#">DS</a>
            <a href = "#">Language</a>
        </div><br>
         
        <center style = "font-size:200%;">
            Remaining Section
        </center>
    </body>
</html>                   

Output: 

Content Section: The content section is the main body of the website. The user can
divide content section in n-column layout. 
The most common layouts are: 
 1-Column Layout: It is mostly used for mobile layout. 

 2-Column Layout: This website layout is mostly used for tablets or

laptops. 
  3-Column Layout: This website layout is mostly used for desktops. 

The user can also create a responsive layout where the layout will get changed as per
screen size. Consider the below example where if width of screen is more than 600px
then there will be 3-column layout and if width of screen is between 400px to 600px
then there will be 2-column layout and if screen size less than 400px then 1-column
layout will display.
Example: 
 html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Website Layout
        </title>
        <style>
            * {
                box-sizing: border-box;
            }
             
            /* CSS property for header section */
            .header {
                background-color: green;
                padding: 15px;
                text-align: center;
            }
             
            /* CSS property for navigation menu */
            .nav_menu {
                overflow: hidden;
                background-color: #333;
            }
            .nav_menu a {
                float: left;
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            .nav_menu a:hover {
                background-color: white;
                color: green;
            }
             
            /* CSS property for content section */
            .columnA, .columnB, .columnC {
                float: left;
                width: 31%;
                padding: 15px;
                text-align:justify;
            }
            h2 {
                color:green;
                text-align:center;
            }
             
            /* Media query to set website layout
            according to screen size */
            @media screen and (max-width:600px) {
                .columnA, .columnB, .columnC {
                    width: 50%;
                }
            }
            @media screen and (max-width:400px) {
                .columnA, .columnB, .columnC {
                    width: 100%;
                }
            }
        </style>
    </head>
     
    <body>
         
        <!-- header of website layout -->
        <div class = "header">
            <h2 style = "color:white;font-size:200%">
                GeeksforGeeks
            </h2>
        </div>
         
        <!-- navigation menu of website layout -->
        <div class = "nav_menu">
            <a href = "#">Algo</a>
            <a href = "#">DS</a>
            <a href = "#">Language</a>
        </div>
         
        <!-- Content section of website layout -->
        <div class = "row">
             
            <div class = "columnA">
                <h2>Column A</h2>
                 
 
 
<p>Prepare for the Recruitment drive of product
                based companies like Microsoft, Amazon, Adobe
                etc with a free online placement preparation
                course. The course focuses on various MCQ's
                & Coding question likely to be asked in the
                interviews & make your upcoming placement
                season efficient and successful.</p>
 
 
 
            </div>
             
            <div class = "columnB">
                <h2>Column B</h2>
                  
 
 
<p>Prepare for the Recruitment drive of product
                based companies like Microsoft, Amazon, Adobe
                etc with a free online placement preparation
                course. The course focuses on various MCQ's
                & Coding question likely to be asked in the
                interviews & make your upcoming placement
                season efficient and successful.</p>
 
 
 
            </div>
             
            <div class = "columnC">
                <h2>Column C</h2>
                 
 
 
<p>Prepare for the Recruitment drive of product
                based companies like Microsoft, Amazon, Adobe
                etc with a free online placement preparation
                course. The course focuses on various MCQ's
                & Coding question likely to be asked in the
                interviews & make your upcoming placement
                season efficient and successful.</p>
 
 
 
            </div>
        </div>
    </body>
</html>                   

Output: 
The width of screen size greater then 700px: 
The width of screen size greater then 400px and less than 600px:  
The width of screen size less than 400px:  
Footer Section: A footer section is placed at the bottom of the webpage and it
generally consists of information like contact info, copyrights, About us etc.
Example: 
 html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS Website Layout
        </title>
         
        <style>
             
             /* Style for footer section */
            .footer {
                background-color: green;
                padding: 15px;
                text-align: center;
            }
        </style>
    </head>
     
    <body>
        <center style = "font-size:200%;">
            Upper section
        </center>
         
        <!-- footer Section -->
        <div class = "footer">
            <a href = "#">About</a><br>
            <a href = "#">Career</a><br>
            <a href = "#">Contact Us</a>
        </div>
    </body>
</html>                   

Output: 

Supported Browser: 
 Google Chrome
 Internet Explorer
 Firefox
 Opera
 Safari

Like38
Previous
CSS | Counters
#####################################################################################################
######################################

Web Development
 Last Updated : 03 Nov, 2022

 Read
 Discuss(30+)
 Courses
 Practice
 Video
Web development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It is
the creation of an application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

  Web: It refers to websites, web pages or anything that works over the internet.
 Development: It refers to building the application from scratch.
 
Web Development can be classified into two ways:
 Frontend Development
 Backend Development

Frontend Development

The part of a website that the user interacts directly is termed as front end. It is also referred to
as the ‘client side’ of the application.
 Frontend Roadmap:
 HTML: HTML stands for HyperText Markup Language. It is used to design
the front end portion of web pages using markup language. It acts as a
skeleton for a website since it is used to make the structure of a website.
 CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed
language intended to simplify the process of making web pages presentable. It
is used to style our website.
 JavaScript: JavaScript is a scripting language used to provide a dynamic
behavior to our website.
 Bootstrap: Bootstrap is a free and open-source tool collection for creating
responsive websites and web applications. It is the most popular CSS
framework for developing responsive, mobile-first websites. Nowadays, the
websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all
sizes of screens (Desktop, Tablets, Phablets, and Phones).
 Bootstrap 4
 Bootstrap 5
Frontend Frameworks and Libraries:
 AngularJS
 React.js
 VueJS
 jQuery
 Bootstrap
 Material UI
 Tailwind CSS
 jQuery UI
 Some other libraries and frameworks
are: Handlebar.js Backbone.js, Ember.js etc.

Backend Development

Backend is the server side of a website. It is the part of the website that users cannot see and
interact. It is the portion of software that does not come in direct contact with the users. It is
used to store and arrange data.
  Backend Roadmap:

 PHP: PHP is a server-side scripting language designed specifically for web

development.
 Java: Java is one of the most popular and widely used programming
language. It is highly scalable.
 Python: Python is a programming language that lets you work quickly and
integrate systems more efficiently.
 Node.js: Node.js is an open source and cross-platform runtime environment
for executing JavaScript code outside a browser.
 Back End Frameworks: The list of back end frameworks
are: Express, Django, Rails, Laravel, Spring, etc.
Web Development Tutorials
 HTML
 CSS
 JavaScript
jQuery
BootStrap
React JS
AngularJS
PHP
Node.js
Some Important Links on Web Development:
 Begin Web Development with a Head Start
 Why do you need a Responsive Website
 Top 10 Frameworks for Web Applications
 Web 1.0, Web 2.0 and Web 3.0 with their difference
 10 Web Development and Web Design Facts That You Should Know
 How can I start to learn Web Development ?
 The Future Of Web Development
 Best Books to Learn Front-End Web Development
 Best Books to Learn Back-End Web Development
 10 Things You Should Know As a Web Developer
 How to choose a Technology Stack for Web Application Development ?
 Top 10 Tools That Every Web Developer Must Try Once
Please write comments if you find anything incorrect, or you want to share more information
about the topic discussed above

WHAT'S NEW

DSA- Live Classes

View Details

System Design- Live Classes

View Details
Complete Data Science Program
View Details

A-143, 9th Floor, Sovereign Corporate Tower,

Sector-136, Noida, Uttar Pradesh - 201305
[email protected]

 Company
 About Us
 Careers
 In Media
 Contact Us
 Privacy Policy
 Copyright Policy
 Advertise with us
 Learn
 DSA
 Algorithms
 Data Structures
 SDE Cheat Sheet
 Machine learning
 CS Subjects
 Video Tutorials
 Courses
 News
 Top News
 Technology
 Work & Career
 Business
 Finance
 Lifestyle
 Knowledge
 Languages
 Python
 Java
 CPP
 Golang
 C#
 SQL
 Kotlin
 Web Development
 Web Tutorials
 Django Tutorial
 HTML
 JavaScript
 Bootstrap
 ReactJS
 NodeJS
 Contribute
 Write an Article
 Improve an Article
 Pick Topics to Write
 Write Interview Experience
 Internships
 Video Internship