● Importance of a Website Architecture

● Elements of a Website
● Different Types of Website Design

➔ Adaptive Web design

➔ Responsive Web design

● Understand the difference between a website and blog.

● Understand the importance of each element that goes on the website.
● Understand how websites works
● Understanding working of a website, web servers and how domain name
works?
 Understand the difference between a website and blog.

- A website is a collection of pages that are available on the internet and

belong to a single organization or individual. These pages can contain a
variety of information, such as information about the organization or
individual, products or services they offer, and other general information.

- A blog, on the other hand, is a type of website that is usually organized in a

chronological order and contains regular updates in the form of written
articles or posts. These articles or posts are usually written by a single
person or a small group of people, and cover a wide range of topics such
as personal experiences, opinions, news, and more.
Understand the difference between a website and blog.

In summary, a website is a general term that can refer to any type of website, while a
blog is a specific type of website that is focused on publishing written content on a
regular basis.

Here are some examples of websites:

1. Amazon.com - an e-commerce website that allows users to purchase a wide

variety of products online
2. Google.com - a search engine website that allows users to search for
information on the internet
3. Netflix.com - a streaming website that allows users to watch movies and TV
shows online
Understand the difference between a website and blog.

Here are some examples of blogs:

1. The Huffington Post - a news and opinion blog that covers a wide range
of topics
2. TechCrunch - a technology blog that covers the latest news and
developments in the tech industry
3. The Minimalists - a blog that focuses on minimalism and simple living
4. A Beautiful Mess - a lifestyle blog that covers topics such as home
decor, DIY projects, and food.
 Importance of a Website Architecture

Website architecture organises website content in a way that is easy for users to
understand and navigate. Well-designed website architecture can help users find the
information they need quickly and easily, while poorly designed website architecture
can lead to confusion and frustration.

Website architecture is significant for large websites with complex content structures.
By carefully planning the website's layout, designers can ensure that users will be able
to find the information they need regardless of where they start their journey.

In addition, a well-designed website architecture can also improve search engine

optimisation, making it easier for users to find your website through search engines. As
a result, website architecture is an essential part of creating an effective website.
Importance Of Website Architecture

- Usability
- Search engine ranking
- User experience
- Performance
❖ Create a simple top-level navigation
menu.
❖ Keep your URLs simple and user-
friendly.
❖ Model your website architecture after the
top players in your industry.
❖ Keep your website consistent.
❖ Implement the pillar-cluster internal
linking model.
❖ Provide access to most of your website’s
pages in 3-4 clicks.
❖ Use breadcrumbs.
❖ Create an HTML and XML sitemap.
 Elements Of The Website

- Navigation bar
- Header & sub header
- Cover Image
- Search bar
- Call to Action or CTA
- Body Content
- Footer
 Elements Of The Website

Navigation bar: It provides a clear and intuitive roadmap for users to navigate through the website,
enhancing user experience and guiding them towards desired actions, ultimately driving conversions
and engagement.

Header & subheader: They grab attention, communicate key messages, and establish brand identity,
ensuring a strong first impression and effective communication of your value proposition.

Cover image: It visually represents your brand, products, or services, capturing attention, conveying
the desired message, and creating an emotional connection with visitors.
 Elements Of The Website

Search bar: It enables users to find specific information or products quickly, enhancing usability,
reducing bounce rates, and improving overall user experience.

Call to Action (CTA): It prompts visitors to take desired actions, such as making a purchase or
subscribing to a newsletter, increasing conversions and driving users through the sales funnel.

Body content: It educates, engages, and persuades visitors, providing valuable information
about your products or services, building trust, and influencing purchasing decisions.

Footer: It contains essential information, such as contact details, navigation links, and legal
disclaimers, reinforcing credibility, providing easy access to critical resources, and improving
website usability and compliance.
Adaptive Web Design

Adaptive web designs (AWD) mean creating different

formats and layouts for the same website. So that it can
be easily visible on various types of devices such as
mobile, phone, laptops and desktops

Examples of Adaptive web design

Amazon.in
Reasons of Adaptive Web Designs

● Super-Efficient Page load

● Customization
● Allows you to tailor the experience based on user
intent and context
● Advertising Monetization
Disadvantage Of Adaptive Web Design

● Labour intensive
● Professional Requirement
● Costly
● Bad for Search Engine
Responsive Web Design

Responsive web design (RWD) or responsive

design is an approach to web design that aims to
make web pages render well on a variety of devices
and window or screen sizes from minimum to
maximum display size to ensure usability and
satisfaction.

Example of responsive web design (RWD)

Dropbox.com
Reasons For Using Responsive Web Design

● More mobile traffic

● Lower maintenance needs
● Faster mobile development at lower costs
● Lower bounce rates
● Higher conversion rates
● Improved SEO
● Easier analytics reporting
● Improved Online/Offline browsing experience
More examples of adaptive web designs (AWD)

● droom.in
● Paytm.in
● inoxmovies.com
More examples of responsive web designs (RWD)

● Github.com
● Shopify.ca
● Slack.com
Questions