WEBSITE PLANNING and

INTRODUCTION TO
WORDPRESS

1
 Website Planning
• Internet
• World Wide Web
• HTTP vs HTTPS
• Client – Server Relationship
• Website and webpages
• Types of websites and Components of websites
• Website Planning
• Wireframe
• Markers for an effective website
2
 What is the Internet?
• It is the contracted form of “interconnected network”

• It is the global system of interconnected computer networks that use the Internet protocol
to link devices worldwide.

• Network of all networks

• IoT involves extending Internet connectivity beyond standard devices, such as desktops,
laptops, smartphones and tablets, to any range of traditionally non-internet-enabled
physical devices and everyday objects. Embedded with technology, these devices can
communicate and interact over the Internet, and they can be remotely monitored and
controlled.

3
 What is the World Wide Web
(www)?
• The World Wide Web, also known as the WWW and the Web, is an information
space where documents and other web resources are identified by Uniform
Resource Locators (URLs), interlinked by hypertext links, and accessible via the
Internet.

• English scientist Tim Berners-Lee invented the World Wide Web in 1989.

• The terms Internet and World Wide Web are often used without much distinction.
However, the two are not the same. The Internet is a global system of
interconnected computer networks. In contrast, the World Wide Web is a global
collection of documents and other resources, linked by hyperlinks and URIs.

• Think of the internet as a library. The racks inside which the books are
arranged is the www. You navigate the book racks based on certain
classification rules or protocols (HTTP/S, TCP – Transmission Control
Protocol/Internet Protocol). The books are the various websites, the pages
of the book are webpages.
4
 What is the World Wide Web
(www)?
The following example demonstrates the functioning of a web
browser when accessing a page at the URL
http://www.example.org/home.html. The browser resolves the
server name of the URL (www.example.org) into an Internet
Protocol address using the globally distributed Domain Name
System (DNS). This lookup returns an IP address such as
203.0.113.4 or 2001:db8:2e::7334. The browser then requests
the resource by sending an HTTP request across the Internet
to the computer at that address.

5
 HTTP vs HTTPS
HTTP means HyperText Transfer Protocol. HTTP is the underlying protocol used by
the World Wide Web and this protocol defines how messages are formatted and
transmitted, and what actions Web servers and browsers should take in response to
various commands.

Hyper Text Transfer Protocol Secure (HTTPS) is the secure version of HTTP, the
protocol over which data is sent between your browser and the website that you are
connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all
communications between your browser and the website are encrypted.

HTTP -> HTTPS

In HTTPS, the communication protocol is encrypted using Transport Layer Security
(TLS), or, formerly, its predecessor, Secured Sockets Layer (SSL). The protocol is
therefore also often referred to as HTTP over TLS, or HTTP over SSL.
The principal motivation for HTTPS is authentication of the accessed website and
protection of the privacy and integrity of the exchanged data while in transit. It
protects against man-in-the-middle attacks.
6
 HTTP vs HTTPS
HTTPS URLs begin with "https://" and use port 443 by default, whereas
HTTP URLs begin with "http://" and use port 80 by default.

HTTP is not encrypted and is vulnerable to man-in-the-middle and

eavesdropping attacks, which can let attackers gain access to website
accounts and sensitive information, and modify webpages to inject malware
or advertisements. HTTPS is designed to withstand such attacks and is
considered secure against them.

How to bring your website on HTTPS?

http://www.howto-expert.com/how-to-get-https-setting-up-ssl-on-your-websit
e/

7
 Client – Server Relationship

A client is a piece of computer hardware that accesses a service made

available by a server. The server is often (but not always) on another
computer system, in which case the client accesses the service by way of a
network- usually the internet.

A server is a computer program or a device that provides functionality for

other programs or devices, called "clients". This architecture is called the
client–server model, and a single overall computation is distributed across
multiple processes or devices. Servers can provide various functionalities,
often called "services", such as sharing data or resources among multiple
clients, or performing computation for a client.

A single server can serve multiple clients, and a single client can use
multiple servers.
8
 Website and webpages
A website is a collection of related web pages, including multimedia
content, typically identified with a common domain name, and published on
at least one web server. Notable examples are wikipedia.org, google.com,
and amazon.com.

Web pages, which are the building blocks of websites, are documents,
typically composed in plain text interspersed with formatting instructions of
Hypertext Markup Language (HTML).

9
 Website and webpages
URL: A Uniform Resource Locator, colloquially termed a web address, is a reference
to a web resource that specifies its location on a computer network and a
mechanism for retrieving it.

Domain: In general, a domain name represents an Internet Protocol (IP) resource,

such as a personal computer used to access the Internet, a server computer hosting
a web site, or the web site itself or any other service communicated via the Internet.

Hosting: A web hosting service is a type of Internet hosting service that allows
individuals and organizations to make their website accessible via the World Wide
Web. Web hosts are companies that provide space on a server owned or leased for
use by clients, as well as providing Internet connectivity, typically in a data centre.

Cloud computing is shared pools of configurable computer system resources that

can be rapidly provisioned with minimal management effort, often over the Internet.
Cloud computing relies on sharing of resources to achieve coherence and
economies of scale.
10
 Website and webpages

• The top-level domain or TLD is .com, .in, .uk. The uk domain is also
referred to as a country-code top-level domain or ccTLD. For google.com,
the TLD would be com.

11
 Components of Websites

Based on the nature of the functionalities carried out by the website, we can
determine two components essential to build a website, namely –
• Front End Web Development
• Back End Web Development

Front End Web Development: It is the practice of converting data to

graphical interface for user to view and interact with data through digital
interaction using HTML, CSS and JavaScript.

Back End Web Development: Back end development refers to the server
side of an application and everything that communicates between the
database and the browser. Back end Development refers to the server side
of development where you are primarily focused on how the site works. It
involves data generation, storage, analysis, updation and deletion.

12
 Website from a Digital Marketer's
Perspective:
• A website is important because it helps you establish credibility as a
business

• Your website is the key to a successful digital marketing strategy

because most of your digital marketing efforts directs your target
audience to your website, which should effectively convert into
revenue/awareness

• Elements of website design that generate conversions are using best

SEO practices and tools, having a great user experience, and
capitalising on the wealth of analytics websites offer.

13
• A website without effective SEO will not organically appear in the
top spots on a search results page and therefore won’t generate
many clicks from Google, Bing, and other search engines.

• While social media sites offer limited analytics to track your

marketing campaigns, your website has the ability to collect
comprehensive information on who your visitors are, how they find
your site, and what they view while on your site.

14
 Website Development
Below are important points to be taken care before
developing a website.
1. Effective Colour Scheme 7. Clean, SEO-Friendly Code
2. Functionality 8. Compatibility with Multiple
3. Navigation Browsers
4. Usability 9. Customer Testimonials
5. Call to Action 10. Tracking
6. Short Loading Times 11. Original Content
(Pagespeed)

15
WIREFRAME

16
Importance of website wireframe
• When a new project comes through, we generally
need to discuss the requirements with the client,
maybe sketch out a few quick ideas, and then get
into design immediately

• The reasoning for the approach is that it is unlikely

to hit a design home run right out of the gate in the
very first attempt, so its always better to start the
process as soon as possible to allow time for
revisions.

17
WIREFRAME EXAMPLES

18
19
20
21
22
 Importance of website wireframe
▪ Display site architecture visually
▪ Allow for clarification of website features
▪ Push usability to the forefront
▪ Identify ease of updates
▪ Help make the design process iterative
▪ Visually displays your information hierarchy
▪ Constructs the layout and placement of content
Reference:
https://www.orbitmedia.com/blog/7-reasons-to-wireframe/
https://www.seguetech.com/the-importance-of-wireframing-for-a-responsive-website/
23
Markers for an effective
website:
 Whitespace - Micro & Macro  Compatibility with Multiple
 Effective Colour Scheme Browsers
 Navigation  Cross Device compatibility
 Positioning and Alignment  Customer Testimonials & Ratings
 Mobile Friendly  Social Media Links
 Typography  Site Analytics – Google Analytics,
 Usability and Functionality Spring Metrics, Woopra , Clicky,
 Visual Design Mint.
 Content – Original, grammatically correct  HTTPS over HTTP
 Call to Action Stale Content
 Large & Responsive Images Too much content
 Short Product or Feature Videos No Photos
 Short Loading Times (Page speed) - Tool: Looking illegitimate
Google Page Speed Insights Being Bland
 SEO-Friendly Code – On page and Off page Have dead links
SEO techniques

24
 Website competitor analysis
• It is very likely that you will be having a list of
competitors
• Every company that has a handle on their market
space knows who the competition is
• And just about every company has a list of
companies on their target list -- that special subset of
companies that they want to beat soundly in the
marketplace

25
 Things to consider from
Competitors Website
Important things to consider from your competitors website.
1. Colour / Content / Design layout
2. Keywords
3. Titles of particular pages
4. Sliders / banners
5. Call to action buttons
6. Social media pages
7. Portfolio / Gallery / Case studies if any
8. Text Testimonials / Testimonials
9. Brief explanation of services / products
10. Their clients list if any
26
 Choosing Website Platform
It is up to the owner to choose website platform

Website is divided in two forms

▪ Static HTML Website
▪ Dynamic Website

27
 Static HTML Website
▪ Static sites are the most basic type
of website and are the easiest to create
▪ Unlike dynamic websites, they do not
require any Web programming or database
design
▪ A static site can be built by simply creating a
few HTML pages and publishing them to a
Web server

28
 Dynamic Website
• A dynamic site is one that is written using a
server-side scripting language such as PHP, ASP,
JSP, or Coldfusion.

• Widely used CMS (Content Management

System) built on PHP Language are WordPress,
Joomla, Drupal, Opencart, Magento etc.

29
 Responsive website
Responsive website designing and its importance
• An approach of laying-out and coding a website such
that…
• The website provides an optimal viewing experience

• Ease of reading and navigation with a minimum of resizing,

panning, and scrolling — across a wide range of devices (from
desktop computer monitors to mobile phones)

30
Important Of Responsive Website

▪ Super Flexible
▪ Excellent User Experience
▪ Cost Effective
▪ It is recommended by Google
▪ Very Easy to manage

31
Tool for analysing a website: Google’s
PageSpeed Insights
• First Contentful Paint marks the time at which the first text or image
is painted.
• First Meaningful Paint measures when the primary content of a
page is visible
• Speed Index shows how quickly the contents of a page are visibly
populated.
• Time to interactive is the amount of time it takes for the page to
become fully interactive.
• First CPU Idle marks the first point at which the page could respond
quickly to input. It doesn't consider any point in time before first
meaningful paint.
• Estimated Input Latency is an estimate of how long your app takes
to respond to user input, in milliseconds, during the busiest 5s window
of page load. If your latency is higher than 50 ms, users may perceive
your app as laggy. 32