WEB TECHNOLOGY

UNIT I ESSENTIALS OF WEB DESIGN AND HTML 9

Web design – Internet versus the web – Web browsers – Design process – Design principles –
HTML – Document structure – Paragraphs – Headings – Lists – iFrame – div – span –
Hyperlinks – Adding images – Table markup – Forms – HTML5 Advanced Elements –
Embedded media.
INTRODUCTION
Web design is a process of conceptualizing, planning, and building a collection of electronic
files that determine the layout, colours, text styles, structure, graphics, images, and use of
interactive features that deliver pages to ones site visitors.
Web design encompasses many different skills and disciplines in the production and
maintenance of websites. The different areas of web design include web graphic design;
interface design; authoring, including standardised code and proprietary software; user
experience design; and search engine optimization.
It also encompasses several different aspects, including webpage layout, content production,
and graphic design. While the terms web design and web development are often used
interchangeably, web design is technically a subset of the broader category of web
development.
The deign task fall under the principles of
 User Experience (UX) design,
 Interaction Design (IxD), and
 User Interface (UI) design.

UI refers to the screens, buttons, toggles, icons, and other visual elements that you interact
with when using a website, app, or electronic device. UX refers to the entire interaction you
have with a product, including how you feel about the interaction.
The goal of the Interaction Designer is to make the site as easy, efficient, and delightful to use
as possible. Closely related to interaction design is User Interface design, which tends to be
more narrowly focused on the functional organization of the page as well as the specific tools
(buttons, links, menus, and so on) that users use to navigate content or accomplish tasks.

The following are deliverables that UX, UI, or interaction designers produce:
User research and testing reports
Understanding the needs, desires, and limitations of users is central to the success of the design
of the site or web application. The approach of designing around the user’s needs is referred to
as User-Centered Design (UCD), and it is central to contemporary web design. Site designs
1
often begin with user research, including interviews and observations, in order to gain a better
understanding of how the site can solve problems or how it will be used.
It is typical for designers to do a round of user testing at each phase of the design process to
ensure the usability of their designs. If users are having a hard time figuring out where to find
content or how to move to the next step in a process, then it’s back to the drawing board.
Wireframe diagrams
A wireframe diagram shows the structure of a web page using only outlines for each content
type and widget (FIGURE 1-1). The purpose of a wireframe diagram is to indicate how the
screen real estate is divided and where functionality and content such as navigation, search
boxes, form elements, and so on, are placed. Colors, fonts, and other visual identity elements
are deliberately omitted so as not to distract from the structure of the page.

Site diagram
A site diagram indicates the structure of the site as a whole and how individual pages relate to
one another. FIGURE 1-2 shows a very simple site diagram. Some site diagrams fill entire
walls!

2
Storyboards and user flow charts
A storyboard traces the path through a site or application from the point of view of a typical
user (a persona in UX lingo). It usually includes a script and “scenes” consisting of screen
views or the user interacting with the screen. The storyboard aims to demonstrate the steps it
takes to accomplish tasks, outlines possible options, and also introduces some standard page
types.
A user flow chart is another method for showing how the parts of a site or application are
connected, but it tends to focus on technical details rather than telling a story. For example,
“when the user does this, it triggers that function on the server.” It is common for designers to
create a user flow chart for the steps in a process such as member registration or online
payments.
Visual (graphic) design
Because the web is a visual medium, web pages require attention to their visual presentation.
First impressions are everything. A graphic designer creates the “look and feel” of the site—
logos, graphics, type, colors, layout, and so on—to ensure that the site makes a good first
impression and is consistent with the brand and message of the organization it represents.
There are many methods and deliverables that can be used to present a visual design to clients
and stakeholders. The most traditional are sketches or mockups
style tiles, a technique introduced by Samantha Warren (see Note). Style tiles include
examples of color schemes, branding elements, UI treatments, text treatment, and mood.
Once the details are decided upon, they can be implemented into working prototypes and the
final site.

3
Designers may also be responsible for creating a style guide that documents style choices,
such as fonts, colors, and other style embellishments, in order to keep the site consistent over
time.
Do Designers Need to Learn to Code?
In short, yes. A basic familiarity with HTML and CSS is now a requirement of anybody
joining a web design team. You may not be responsible for creating the final production code
for the site, but as HTML and CSS are the native languages of your medium, you need to
know your way around them. Some designers also learn JavaScript, but others draw the line
there and let a developer handle the programming.
Code is becoming more central to the visual designer’s workflow. Where once Photoshop was
all you needed to mock up web page designs to send them to production, mockups fixed to a
particular size fall short of describing a page that needs to flex to a wide range of screen sizes.
For that reason, designers are building their own working prototypes as deliverables that
communicate how the design will look and behave in users’ hands.
Code Slinging
At web design firms, the team that handles the creation of the files that make up the site (or
templates for pages that get assembled dynamically) is usually called the development or
production department.
Development falls under two broad categories: frontend development and backend
development. Once again, these tasks may fall to specialists, but it is just as common for one
person or team to handle both responsibilities.
Frontend development
Frontend refers to any aspect of the design process that appears in or relates directly to the
browser. That includes HTML, CSS, and JavaScript, all of which you will need to have
intricate knowledge of if you want a job as a web developer.
HTML (HyperText Markup Language) is the authoring language used to create web page
documents.
HTML is not a programming language; it is a markup language, which means it is a system for
identifying and describing the various components of a document such as headings,
paragraphs, and lists. The markup indicates the document’s underlying structure
Styling (CSS)
While HTML is used to describe the content in a web page, Cascading Style Sheets (CSS)
describe how that content should look (see Note). The way the page looks is referred to as its
presentation. Fonts, colors, background images, line spacing, page layout, and so on, are all
controlled with CSS. You can even add special effects and basic animation to your page. The
CSS specification also provides methods for controlling how documents will be presented in
contexts other than a browser, such as in print or read aloud by a screen reader;
4
JavaScript and DOM scripting
JavaScript is a scripting language that adds interactivity and behaviors to web pages, including
these:
• Checking form entries for valid entries
• Swapping out styles for an element or an entire site
• Loading scrolling feeds with more content automatically
• Making the browser remember information about users
• Building interface widgets, such as embedded video players or special form inputs
Frontend developers may also be required to be familiar with JavaScript frameworks (such as
React, Bootstrap, Angular, and others) that automate a lot of the production process. They’ll
likely also need to be handy with AJAX (which stands for “Asynchronous JavaScript And
XML”), a technique used to load content in the background, allowing the page to update
smoothly without reloading (like those automatically refreshing feeds).
Backend Development
Backend developers focus on the server, including the applications and databases that run on
it. They may be responsible for installing and configuring the server software
The following technologies are typically in the domain of the backend developer:
• Server software (Apache, Microsoft IIS)
• Web application languages (PHP, Ruby, Python, JSP, ASP.NET)
• Database software (MySQL, Oracle, SQL Server)
Coding tools
Although you can get by with the simple text editors that come with your computer, a
dedicated code editor makes the task of writing HTML, CSS, and JavaScript much easier.
Code editors understand the syntax of the code you write, so they can do things for you like
color coding, error detection, and automatically finishing simple tasks like closing HTML tags.
Some provide page previews so you can view the results of your code as you work.
Few of the better-known code editors for web production that are worth exploring:
• Sublime Text (sublimetext.com)
• Atom (free from GitHub; atom.io)
• Brackets (free from Adobe; brackets.io)
• CodeKit (codekitapp.com; Mac only)
• Adobe Dreamweaver (www.adobe.com/products/dreamweaver.html)
5
• Coda (panic.com/coda/) • Microsoft Visual Studio (visualstudio.com)
User interface and layout tools
Sketch (sketchapp.com, Mac only), is extremely popular at the time of this writing. Other
options include the following:
• Affinity Designer (affinity.serif.com/en-us/designer/)
• Adobe XD (www.adobe.com/products/xd.html)
• Figma (figma.com)
• UXPin (uxpin.com)
Web graphic creation tools
For professional designers, the Adobe Creative Cloud (adobe.com) suite of tools, which
includes Photoshop ,llustrator, and other highend design tools, is worth the investment.
• GIMP (free, open source; gimp.org)
• Corel PaintShop Pro (for photo editing; paintshoppro.com; Windows only)
• Corel Draw (for vector drawing; coreldraw.com; Windows only)
• Pixelmator (pixelmator.com; Mac only)
A variety of browsers
One of the biggest challenges for web designers is that our sites may look and behave
differently from browser to browser. For this reason, it is critical that we test our designs early
and often on the widest range of browsers possible.
These are the browsers designers and developers keep around for testing: • Chrome
(google.com/chrome)
• Firefox (www.mozilla.org)
• MS Edge (www.microsoft.com/en-us/windows/microsoft-edge; Windows only)
• Internet Explorer (www.microsoft.com; search “Internet Explorer”; Windows only)
• Safari (support.apple.com/downloads/#safari; Mac only)
• Opera (opera.com)
THE INTERNET VERSUS THE WEB

6
7
8
The internet is an international network of connected computers. No company owns the
internet; it is a cooperative effort governed by a system of standards and rules. The purpose of
connecting computers together, of course, is to share information. There are many ways
information can be passed between computers, including email (POP3/IMAP/SMTP), file
transfer (FTP), secure shell (SSH), and many more specialized modes upon which the internet
is built. These standardized methods for transferring data or documents over a network are
known as protocols.
The web (originally called the World Wide Web, thus the “www” in site addresses) is just one
of the ways information can be shared over the internet. It is unique in that it allows
documents to be linked to one another via hypertext links—thus forming a huge “web” of
connected information. The web uses a protocol called HTTP (HyperText Transfer Protocol).
The web is a subset of the internet. It is just one of many ways information can be transferred
over networked computers. addresses, as we’ll discuss in an upcoming section.
SERVING UP YOUR INFORMATION
Let’s talk more about the computers that make up the internet. Because they “serve up”
documents upon request, these computers are known as servers. More accurately, the server is
the software (not the computer itself) that allows the computer to communicate with other
computers; however, it is common to use the word “server” to refer to the computer as well.
The role of server software is to wait for a request for information, and then retrieve and send
that information back as quickly as possible.
It’s the server software that makes it all happen. In order for a computer to be part of the web,
it must be running special web server software that allows it to handle HyperText Transfer
Protocol transactions. Web servers are also called HTTP servers. There are many server
software options out there, but the two most popular are Apache (open source software) and
Microsoft Internet Information Services (IIS).
Apache is freely available for Unix-based computers and comes installed on Macs running
macOS. There is a Windows version as well.
9
Microsoft IIS is part of Microsoft’s family of server solutions. Every computer and device
(router, smartphone, car, etc.) connected to the internet is assigned a unique numeric IP
address (“IP” stands for “Internet Protocol”).
For example, as I write this, the computer that hosts oreilly.com has the IP address
199.27.145.64. All those numbers can be dizzying, so fortunately, the Domain Name System
(DNS) was developed to allow us to refer to that server by its domain name, “oreilly.com”, as
well. The numeric IP address is useful for computer software, while the domain name is more
accessible to humans. Matching the text domain names to their respective numeric IP
addresses is the job of a separate DNS server. If you think of an IP address as a telephone
number, the DNS server would be the phonebook. It is possible to configure your web server
so that more than one domain name is mapped to a single IP address, allowing several sites to
share a single server.
A WORD ABOUT BROWSERS
The software that does the requesting is called the client. People use desktop browsers, mobile
browsers, and other assistive technologies (such as screen readers) as clients to access
documents on the web.
The server returns the documents for the browser (also referred to as the user agent in
technical circles) to display.
The requests and responses are handled via the HTTP protocol, mentioned earlier. Although
we’ve been talking about “documents,” HTTP can be used to transfer images, movies, audio
files, data, scripts, and all the other web resources that commonly make up websites and
applications. It is common to think of a browser as a window on a computer monitor with a
web page displayed in it. These are known as graphical browsers or desktop browsers and for a
long time, they were the only web-viewing game in town. The most popular desktop browsers
as of this writing include Edge and Internet Explorer for Windows, Chrome, Firefox, and
Safari, with Opera and Vivaldi bringing up the rear. These days, however, more than half of
web traffic comes from mobile browsers on smartphones and tablets such as Safari on iOS,
Android and Chrome browsers on Android devices, Opera Mini, and a myriad of other default
and installable mobile browsers (see en.wikipedia.org/wiki/Mobile_browser for a complete
list). Navigating the web on a touch screen is the new normal.
Server-Side and Client-Side
. These terms are used to indicate which machine is doing the processing. Client-side
applications run on the user’s machine (also referred to as the frontend), while server-side
applications and functions use the processing power of the server computer (the backend).
Browser Rendering Engines
The program that is responsible for converting HTML and CSS into what you see rendered on
the screen is called a rendering engine (also browser engine or layout engine). Browsers that

10
you use on desktop computers and mobile devices are made up of rendering engines as well as
other code used for their own user interfaces and functionality.
Blink engine
WEB PAGE ADDRESSES (URLS)
Every page and resource on the web has its own special address called a URL, which stands
for Uniform Resource Locator. It’s nearly impossible to get through a day without seeing a
URL (pronounced “U-R-L,” not “erl”) plastered on the side of a bus, printed on a business
card, or broadcast on a television commercial. Web addresses are fully integrated into modern
vernacular. Some URLs are short and sweet. Others may look like crazy strings of characters
separated by dots (periods) and slashes, but each part has a specific purpose. Let’s pick one
apart.
The Parts of a URL A complete URL is generally made up of three components: the protocol,
the site name, and the absolute path to the document or resource, as shown in FIGURE 2-1.

1.http:// The first thing the URL does is to define the protocol that will be used for that
particular transaction. The letters “HTTP” let the server know to use HyperText Transfer
Protocol, or get into “web mode.” You may also see a URL begin with https://, which I explain
in the “HTTPS, The Secure Web Protocol” sidebar.
2 www.example.com The next portion of the URL identifies the website by its domain name.
In this example, the domain name is “example.com.” The “www.” part at the beginning is the
particular hostname at that domain. The hostname “www” has become a convention, but is not
a rule. In fact, sometimes the hostname may be omitted. There can be more than one website at
a domain (called subdomains). For example, there might also be “development.example.com,”
“clients.example.com,” and so on.
3 /2018/samples/first.html This is the absolute path through directories on the server to the
requested HTML document, first.html. The words separated by slashes are the directory
names, starting with the root directory of the host (as indicated by the initial /). Because the
internet originally comprised computers running the Unix operating system, our current way of
doing things still follows Unix rules and conventions, hence the / separating directory names.

11
To sum it up, the URL in FIGURE 2-1 says it would like to use the HTTP protocol to connect
to a web server on the internet called “www.example.com” and to request the document
first.html, located in the samples directory, which is in the 2018 directory.
HTTPS
HTTPS, the Secure Web Protocol If you look at the address bar while shopping online or using
a banking site, you’ll notice that they use the HTTPS protocol. HTTPS, where “S” stands for
“secure,” is a modification of HTTP that encrypts form information when it is sent between
the user’s client and the server. Any web page that has form fields that accept text (such as a
search bar or a login) should use HTTPS.
As of this writing, around 60% of pages (and growing!) use HTTPS, and for good reason. Not
only is it a good idea to keep your user’s data secure in transit, but Google is pushing along the
transition to HTTPS with some serious incentives as well. If you have a site that accepts text
input and you don’t use HTTPS, your site won’t rise as high in the Google search results. In
addition, in Chrome, these sites are marked with “Not Secure” in the top bar of the browser.
HTTPS works in tandem with another protocol, SSL (for Secure Socket Layer), which needs
to be enabled on the server for secure transactions to work. Hosting companies have options
for enabling SSL, often for free. Keep in mind that HTTPS protects form data as it is sent to
the server, but doesn’t do anything to make your site “secure” and safe from hackers
Static vs. Dynamic Sites
Static websites consist of HTML files with fixed content that display the same information to
every visitor. In other words, each page you see in the browser is a view of a single HTML file
on the server.
By contrast, dynamic websites are generated with backend programming such as PHP or ASP.
Each page is generated by the application on the fly.
Dynamic sites access content and data from a database, and the final pages may be customized
for each user. For extremely large sites with hundreds or thousands of pages, setting up and
maintaining a dynamic site is considerably less work than creating and storing every page as a
static HTML document individually.
HTTP Status Codes Servers issue status codes in response to browser requests.
200 OK
301 Moved Permanently
302 Moved Temporarily
404 Not Found
410 Gone (no longer available)
500 Internal Server Error
12
1. To wrap up our introduction to how the web works, let’s trace a typical stream of events that
occurs with every web page that appears on your screen (FIGURE 2-5). Request a web page
by either typing its URL (for example, http://jenskitchensite.com) directly in the browser or by
clicking a link on a page. The URL contains the information needed to target a specific
document on a specific web server on the internet. In this case, it points to the default file
(index.html) in the top directory.
2. Your browser sends an HTTP request to the server named in the URL and asks for the
specific file. The request also includes information about what languages the user can read and
what types of files the browser can accept. If the URL specifies a directory (not a file), it is the
same as requesting the default file in that directory.
3. The server looks for the requested file and issues an HTTP response in the form of an
HTTP header. The header includes information about the file, like the last modified date, the
length of the file, and its Content-Type (for example, an .html file has the content type
“text/html”). a. b. If the page cannot be found, the server returns an error message. The
message typically says “404 Not Found,” although more hospitable error messages may be
provided. Other error types are possible as well (see the sidebar “HTTP Status Codes”). If the
document is found, the server retrieves the requested file and returns it to the browser. If the
site is dynamic, the server assembles the page from stored data before returning it to the
browser.
4. The browser parses the HTML document. If the page contains images (indicated by the
HTML img element) or other external resources like scripts or style sheets, the browser
contacts the server again to request each resource specified in the markup.
5. The browser inserts each image in the document flow where indicated by the img
element, applies styles, and runs scripts. And voilà! The assembled web page is displayed for
your viewing pleasure.

DESIGN PROCESS
Well-designed websites offer much more than just aesthetics. They attract visitors and help
people understand the product, company, and branding through a variety of indicators,
encompassing visuals, text, and interactions. That means every element of your site needs to
work towards a defined goal.

In order to design, build, and launch your website, it's important to follow these steps:

1. Goal identification

13
In this initial stage, the designer needs to identify the end goal of the website design, usually in
close collaboration with the client or other stakeholders. Questions to explore and answer in
this stage of the design and website development process include:

 Who is the site for?

 What do they expect to find or do there?
 Is this website’s primary aim to inform, to sell (ecommerce, anyone?), or to amuse?
 Does the website need to clearly convey a brand’s core message, or is it part of a wider
branding strategy with its own unique focus?
 What competitor sites, if any, exist, and how should this site be inspired by/different
than, those competitors?

This is the most important part of any web development process. If these questions aren’t all
clearly answered in the brief, the whole project can set off in the wrong direction.

It may be useful to write out one or more clearly identified goals, or a one-paragraph summary
of the expected aims. This will help to put the design on the right path. Make sure you
understand the website’s target audience, and develop a working knowledge of the
competition.

For more on this design phase, check out "The modern web design process: setting goals."

Tools for website goal identification stage

 Audience personas
 Creative brief
 Competitor analyses
 Brand attributes

2. Scope definition

One of the most common and difficult problems plaguing web design projects is scope creep.
The client sets out with one goal in mind, but this gradually expands, evolves, or changes
altogether during the design process — and the next thing you know, you’re not only
designing and building a website, but also a web app, emails, and push notifications.

This isn’t necessarily a problem for designers, as it can often lead to more work. But if the
increased expectations aren’t matched by an increase in budget or timeline, the project can
rapidly become utterly unrealistic.

14
The anatomy of a Gantt chart.

A Gantt chart, which details a realistic timeline for the project, including any major landmarks,
can help to set boundaries and achievable deadlines. This provides an invaluable reference for
both designers and clients and helps keep everyone focused on the task and goals at hand.

Tools for scope definition

 A contract
 Gantt chart (or other timeline visualization)

3. Sitemap and wireframe creation

15
A sitemap for a simple website. Note how it captures page hierarchy.

The sitemap provides the foundation for any well-designed website. It helps give web
designers a clear idea of the website’s information architecture and explains the relationships
between the various pages and content elements.

Building a site without a sitemap is like building a house without a blueprint. And that rarely
turns out well.

The next step is to find some design inspiration and build a mockup of the wireframe.
Wireframes provide a framework for storing the site’s visual design and content elements, and
can help identify potential challenges and gaps with the sitemap.

Although a wireframe doesn’t contain any final design elements, it does act as a guide for how
the site will ultimately look. It can also act as inspiration for the formatting of various
elements. Some designers use slick tools like Balsamiq or Webflow to create their wireframes.
I personally like to go back to basics and use the trusty ole paper and pencil.

Tools for site mapping and wireframing

 Pen/pencil and paper

 Balsamiq
 Moqups
 Sketch
 Axure
 Webflow
 Slickplan
 Writemaps
 Mindnode

4. Content creation

16
When it comes to content, SEO is only half the battle.

Once your website’s framework is in place, you can start with the most important aspect of the
site: the written content.

Content serves two essential purposes:

Purpose 1. Content drives engagement and action

First, content engages readers and drives them to take the actions necessary to fulfill a site’s
goals. This is affected by both the content itself (the writing), and how it’s presented (the
typography and structural elements).

Dull, lifeless, and overlong prose rarely keeps visitors’ attention for long. Short, snappy, and
intriguing content grabs them and gets them to click through to other pages. Even if your pages
need a lot of content — and often, they do — properly “chunking” that content by breaking it
up into short paragraphs supplemented by visuals can help it keep a light, engaging feel.

Purpose 2: SEO

Content also boosts a site’s visibility for search engines. The practice of creation and
improving content to rank well in search is known as search engine optimization, or SEO.

Getting your keywords and key-phrases right is essential for the success of any website. I
always use Google Keyword Planner. This tool shows the search volume for potential target
keywords and phrases, so you can hone in on what actual human beings are searching on the
web. While search engines are becoming more and more clever, so should your content
strategies. Google Trends is also handy for identifying terms people actually use when they
search.

My design process focuses on designing websites around SEO. Keywords you want to rank for
need to be placed in the title tag — the closer to the beginning, the better. Keywords should
also appear in the H1 tag, meta description, and body content.

Content that’s well-written, informative, and keyword-rich is more easily picked up by search
engines, all of which helps to make the site easier to find.

Typically, your client will produce the bulk of the content, but it’s vital that you supply them
with guidance on what keywords and phrases they should include in the text.

Awesome content creation tools

 Google Docs
 Dropbox Paper
 Quip
 Gather Content
 Webflow CMS (content management system)
17
Handy SEO tools

 Google Keyword Planner

 Google Trends
 Screaming Frog’s SEO Spider

5. Visual elements

Style Tile: a free style tile / moodboard template built by Mat Vogels.

Finally, it’s time to create the visual style for the site. This part of the design process will often
be shaped by existing branding elements, colour choices, and logos, as stipulated by the client.
But it’s also the stage of the web design process where a good web designer can really shine.

Images are taking on a more significant role in web design now than ever before. Not only do
high-quality images give a website a professional look and feel, but they also communicate a
message, are mobile-friendly, and help build trust.

Visual content is known to increase clicks, engagement, and revenue. But more than that,
people want to see images on a website. Not only do images make a page feel less
cumbersome and easier to digest, but they also enhance the message in the text, and can even
convey vital messages without people even needing to read.

I recommend using a professional photographer to get the images right. You can try free stock
photos but keep in mind that massive, beautiful images can seriously slow down a site. I
use Optimizilla to compress images without losing quality, saving on page-load times. You’ll
also want to make sure your images are as responsive as your site.

The visual design is a way to communicate and appeal to the site's users. Get it right, and it can
determine the site’s success. Get it wrong, and you’re just another web address.

Tools for visual elements

 The usual suspects (Sketch, Illustrator, Photoshop, etc.)

 Moodboards, style tiles, element collages
18
  Visual style guides

6. Testing

Once the site has all its visuals and content, you’re ready for testing.

Thoroughly test each page to make sure all links are working and that the website loads
properly on all devices and browsers. Errors may be the result of small coding mistakes, and
while it is often a pain to find and fix them, it’s better to do it now than present a broken site to
the public.

Editor’s note: I highly recommend Screaming Frog’s SEO Spider for this stage. It lets you do
many of the standard auditing tasks all in one tool, and it’s free for up to 500 URLs.

Have one last look at the page meta titles and descriptions too. Even the order of the words in
the meta title can affect the performance of the page on a search engine.

Webflow has an excellent article on the pre-launch process.

Website testing tools

 W3C Link Checker

 SEO Spider

7. Launch

Now it’s time for everyone’s favorite part of the website design process: When everything has
been thoroughly tested, and you’re happy with the site, it’s time to launch.

Don’t expect this to go perfectly. There may be still some elements that need fixing. Web
design is a fluid and ongoing process that requires constant maintenance.

Web design — and really, design in general — is all about finding the right balance between
form and function. You need to use the right fonts, colors, and design motifs. But the way
people navigate and experience your site is just as important.

Skilled designers should be well versed in this concept and able to create a site that walks the
delicate tightrope between the two.

A key thing to remember about the launch stage is that it’s nowhere near the end of the job.
The beauty of the web is that it’s never finished. Once the site goes live, you can continually
run user testing on new content and features, monitor analytics, and refine your messaging.

PRINCIPLES OF WEB DESIGNING

Good website design needs a wide range of professionals having expertise in different areas.
Their collective efforts need to put in when there is a critical decision to take place. Here in
19
this article, we’ll outline the 8 essential principles of good website design which must be
pondered while developing a website. These design principles will definitely help web
designers to develop awe-inspiring designs and to enhance the usability of a website.
Here is the list of 8-good design principles which will make your website aesthetic, user-
friendly, effective, and engaging:

1. Simple is the best Over-designed website may not work.

Putting too many elements on the page may lead to distract visitors from the main purpose of
your website. Simplicity always works in an effective web page design. Clean and fresh design
of your website not only makes the website appealing, but also help user to navigate from one
page to another seamlessly. Loading a website having design features which do not serve the
purpose may be frustrating. Keep your design as simple as possible so that the visitors can feel
it easyto-use and can find their ways easily.
2. Consistency Consistency in website design matter a lot.
Give your attention to match design elements throughout each of the pages. It can be
understood that your fonts, sizes, headings, sub-headings, and button styles must be the same
throughout the website. Plan everything in advance. Finalize the fonts and the right colours for
your texts, buttons etc, and stick to them throughout the development. CSS (Cascading Style
Sheets) would come in handy to keep the complete information about design styles and
elements.
3. Typography & Readability
No matter how good your design is text still rules the website as it provides users the desired
information. You should keep your typography visually appealing and readable for visitors,
along with tricky use of keywords and meta-data. Consider using fonts that are easier to read.
The modern sansserif fonts as Ariel, Helvetica etc. can be used for the body texts. Make proper
combinations of typefaces for each and every design elements such as headlines, body texts,
buttons etc.
4. Mobile compatibility
Keeping in mind the ever-growing usage of smartphones, tablets and phablets, web design
must be effective for various screens. If your website design doesn’t support all screen sizes,
chance is that you’ll lose the battle to your competitors. There are a number of web design
studios or service points from where you can turn your desktop design into a responsive and
adaptive one for all screen sizes.

5. Colour palette and imagery

A perfect colour combination attracts users while a poor combination can lead to distraction.
This necessitates you to pick a perfect colour palette for your website which can create a
20
pleasing atmosphere, thus leaving a good impact on visitors. Enhance users experience by
selecting complementary colour palette to give a balanced-look to your website design.
Remember to white space use as it avoids your website from visual clutter and mess. Also
avoid using too many colours. 3 or 4 tones for the whole websites are ample to give appealing
and clear design. Same is the case with images. Don’t use multiple vibrant images
6. Easy loading No one likes the website that takes too much time to load. So take care of it
by optimizing image sizes, combing code into a central CSS or JavaScript file as it reduces
HTTP requests. Also, compress HTML, JavaScript and CSS for enhanced loading speed.
7. Easy Navigation
Study shows that visitors stay more time on the websites having easy navigation. For effective
navigation, you may consider creating a logical page hierarchy, using bread scrums, and
designing clickable buttons. You should follow the “three-click-rule” so that visitors can get
the required information within three clicks
8. Communication
The ultimate purpose of the visitors is to get information, and if your website is able to
communicate your visitors efficiently, most probably they would spend more time on your
website. Tricks that may work to establish effortless communication with the visitors are –
organizing information by making good use of headlines and sub-headlines, cutting the waffle,
and using bullet points, rather than long gusty sentences.
THE HTML DOCUMENT STRUCTURE
A generic container element is labeled in FIGURE 4-6.

Elements are identified by tags in the text source. A tag consists of the element name (usually
an abbreviation of a longer descriptive name) within angle brackets (< >). The browser knows
that any text within brackets is hidden and not displayed in the browser window.
The element name appears in the opening tag (also called a start tag) and again in the closing
(or end) tag preceded by a slash (/). The closing tag works something like an “off” switch for

21
the element. Be careful not to use the similar backslash character in end tags (see the tip “Slash
Versus Backslash”).
The tags added around content are referred to as the markup. It is important to note that an
element consists of both the content and its markup (the start and end tags). Not all elements
have content, however. Some are empty by definition, such as the img element used to add an
image to the page. We’ll talk about empty elements a little later in this chapter.
One last thing: capitalization. In HTML, the capitalization of element names is not important
(it is not case-sensitive). So <img>, <Img>, and <IMG> are all the same as far as the browser
is concerned. However, most developers prefer the consistency of writing element names in all
lowercase (see Note), as I will be doing throughout this book.
Basic Document Structure
FIGURE 4-8 shows the recommended minimal skeleton of an HTML document. I say
“recommended” because the only element that is required in HTML is the title. But I feel it is
better, particularly for beginners, to explicitly organize documents into metadata (head) and
content (body) areas. Let’s take a look at what’s going on in this minimal markup example.

22