Website Design and Development: Best Practices and Frameworks

This report provides a comprehensive overview of website design and development. It begins by defining website design and its distinction from web development, highlighting the stages involved in website design, including project discovery, ideation, UI design, and testing. The report then explores the significance of websites for businesses and individuals, outlining the steps to set up a website, including domain name selection, content creation, and testing. It delves into website architecture, covering considerations such as navigation, site structure, and page design. Additionally, it discusses development frameworks, server-side languages like PHP, Java, and Python, and client-side technologies like HTML, CSS, and JavaScript. The report also examines the role of Flash, development best practices such as meta tag customization and clean URLs, and the importance of quality assurance, including functional and UI testing. The report also offers a comparative analysis of web design and development. The document is contributed by a student to be published on the website Desklib. Desklib is a platform which provides all the necessary AI based study tools for students.

WEBSITE DESIGN AND DEVELOPMENT :
Website composition implies the arrangement of locales that are appeared on the web. It
when in doubt implies the customer experience portions of site improvement as opposed to
programming headway. A website specialist deals with the appearance, format, and, sometimes,
substance of a site.
In this way, website composition measure at Ruby Garage incorporates four significant
stages: project revelation, ideation and data engineering, UI plan, and testing and assessment
after dispatch. We should go further into what each stage incorporates and what expectations
you'll get.
Difference between web design and development :
Generally, website architecture alludes to both the stylish bit of the site and it's ease of
use. Web Developers then again, take a web composition and really make a working site from it.
Web engineers use HTML, CSS, Javascript, PHP and other programming dialects to rejuvenate
the plan documents.
Website Development ─ Introduction
A webpage can be described as a variety of a couple of site pages that are totally related
to each other and can be gotten to by visiting a greeting page, by using a program like Internet
Explorer, Firefox, Chrome, or Opera. For example, the website address of www.mywestford.com
Each site for have own and unique URL that is an outstanding overall area called space
name. A URL contains:
The protocol used to access the website, in this case is http, meaning port 80. It can also
be https; port 443.
Automated domain www.

Domain name; domain names are often chosen to have a meaning. Like our
"mywestford", we can understand that this website offers tutorials.
The suffix name can be .com, .info, .net, .biz, or a specific country.
Why Do We Need Websites
Sites essentially go about as an extension between one who needs to share data and the
individuals who need to devour it. Assuming you are maintaining a business, it is practically
basic for you to have a site to communicate your contributions and contact possible customers at
a worldwide stage.
The accompanying focuses clarify for why critical site:
 A site is an online handout where you are able to promote your business offers.
 Looks good on you a stage to connect with an allover worldwide client base.
 If you're a blogger, you get the likelihood to impact your perusers.
 You can display every one of your thoughts and distribute on a site.
 If you have a commercial enterprise thought, at that point you don't need to stand by. You
would straightaway be able to open an web shop and sell your items or administrations on
the web. An additional benefit is that the online shop will be open every minute of every
day for your customers, consistently.
 You can speak with your clients, allowing them a chance to communicate.
 You can give significant client assistance by experiencing a difficulty ticket framework.
How to Setup a Website
A site is made out of a few components and keeping in mind that setting up a site, you would
need to deal with every one of them.

 To installation a website and make it live, you need to begin with buy a facilitating plan.
 Pick a space name for this site.
 Factor the DNS records to the worker or the facilitating dealer.
 Increase the substance that you want to distribute on the website.
 Test inside the event that you need to shop for a public testomony and introduce it.
 Publish the web page at the internet.
Guidelines for Developing a Website
The improvement of numerous sites is driven by the excitement of creators and
implementers individuals who are frequently quick to utilize the most recent innovation. Being
driven by innovation as opposed to business and client needs can prompt destinations that are
delayed in execution, convoluted to utilize, and don't accomplish the proposed results.
Incidentally, focusing on another innovation too soon can make a site quickly look dated, either
on the grounds that the innovation didn't get famous thus remained in an old structure, or in light
of the fact that the selection of the new innovation was costly to the point that little spending plan
stayed for site upkeep.
When in doubt, stay away from the superfluous utilization of innovation. At the same
time, additionally perceive that any innovation that has been stayed away from sooner or later in
a site's lifetime may get fundamental to the site as the site's necessities change, or even as UI
design advances. This thought of progress, and the smoothness of the rules, is significant.
Innovation that is superfluous today might be satisfactory or even important in a couple of years'
time. For instance, it was once viewed as unwise to utilize outlines or looking over text.
Presently, these are less of an issue: outlines are upheld by most programs in current use, and
clients are accustomed to looking over.
Website Architecture
The plan of a site includes numerous contemplations, not least of which is route, a
conversation of which happens later. Other than route, the accompanying focuses should be
considered too:

 the construction of the site how the pages are coordinated (consistently, instead of truly
on circle);
 the potential ways through the design both the ways you may like or anticipate that a user
should follow, and the ways you ought to give to make the construction genuinely
hypertext;
 the style the alleged 'look and feel', that is, the format of the genuine pages;
 the design of individual pages how each page is coordinated (or how classes of page are
coordinated).
Development frameworks
The back-finish of a site alludes to the worker side layer. This layer is stowed away from
the client's view. The connection between the client and the back-end is dealt with by means of
an introduction layer known as the front-end or customer side layer.
Back-end/worker side dialects and structures, Server-side dialects are the secret web
coding dialects that decide how your site functions and speaks with the web worker and your PC.
While picking a worker side language, you need to consider:
Cost: The expense shifts relying upon the language you decide for your web
improvement project, as some are more perplexing than others, the designer may charge more. In
this way, the language picked may straightforwardly impact the compensation of the engineer.
On the off chance that data is handled where your site is housed, instead of on the customer's PC,
it expands the expenses. A few dialects likewise require continuous site the executives and
support, which is an extra expense to consider.
Scalability: When arranging a venture where adaptability is a factor, consider whether
there are designers promptly accessible to create in this language. Additionally see whether there
are supporting libraries and structures accessible that may suit potential changes to your task.
Probably the most well-known and mainstream worker side dialects incorporate PHP,
Java, Ruby, .NET and Python.

HTML
HTML is the language for making destinations, and HTML is the fifth pattern of the
language. It is moreover the name for an extent of advances that enable present day web
examining features. It's a detail appropriated by the web standards body, depicting what features
are available and how to use them. HTML is remarkable corresponding to prohibitive web
programming, for instance, Adobe Flash in that the detail is the eventual outcome of
responsibilities from various affiliations and can be completed by anyone without paying for
sways or approving costs. You do, nevertheless, pay for the improvement gadgets given by the
associations.
HTML improves on numerous normal undertakings when assembling a page, for
example, including sight and sound substance, approving structures, reserving data and catching
client input information like date and time. HTML permits programs to play mixed media
content without the utilization of Flash or a comparative module. There is likewise an innovation
called Canvas, which permits engineers to make rich, intelligent encounters without the
imperatives that accompanied past renditions of HTML. For instance, a 3D vivified video would
now be able to be played, something that used to require the utilization of Flash or Silverlight.
The objective is a site that simply works, without the requirement for specific programs
or modules to empower certain usefulness. Having a normalized method of carrying out basic
highlights implies that the web is open and available to all, paying little heed to competency.
CSS
CSS represents Cascading Style Sheets and is a template language used to train the
program how to deliver the HTML code. For instance, the plain content on a page is remembered
for the HTML code, and CSS characterizes how it will show up. CSS can set numerous

properties including the size, shading and separating around the content, just as the position of
pictures and other plan related things. CSS pre-processors, for example, LESS, SASS and Stylus
are likewise accessible to make CSS all the more effectively viable and versatile. They take into
consideration more practical CSS assemblage. The most recent norm of CSS is CSS3. It is in
reverse viable with all renditions of CSS and gives a lot more helpful highlights, for example,
text impacts, 2D/3D changes and movements to give some examples.
JavaScript
This is the most widely recognized customer side language used to make rich, powerful
web properties. Since it is an open-source language, numerous designers have added usefulness
that can be all the more immediately executed. For instance, there are more than 1000 diverse
display frameworks made by JavaScript engineers for JavaScript designers.
Flash
Adobe Flash is a language for making rich, intuitive encounters. It upholds video and is
regularly used to make game-like web encounters. Albeit broadly upheld by work area programs,
it has restricted (and diminishing) support on cell phones and isn't usable on Apple gadgets like
the iPhone and iPad. It has a background marked by being dangerous for SEO, despite the fact
that there are approaches to work around quite a bit of this. Streak utilization has been on the
decrease since some security openings were uncovered, and many accept that it is on out. In
February 2016, Google declared that its promoting organizations, AdWords and DoubleClick,
would at this point don't be supporting Flash. The promotions would need to be refreshed to
HTML (Google AdWords, 2016). YouTube reported that it would not utilize the Flash player
naturally any longer. It changed to HTML for every one of the most recent programs. Adobe
suspended Adobe Professional CC and delivered Adobe Animate CC which is presently Adobe's
head instrument to help HTML content. There are as yet a couple of hints of Flash left as it is as
yet utilized as a video player and for the production of web based games.

Development best practice
Meta and title label customization The CMS you have either chosen or made ought to
permit you to enter your own meta labels for each page, just as permit full customization of title
labels for each page. Note that Google doesn't utilize catchphrase meta labels for positioning any
longer (Lincoln, 2015).
URLs
Rather than utilizing dynamic boundaries, the CMS ought to consider clean URLs by
utilizing worker side modifying. Clean URLs comprise just of the way to a website page without
additional code. A perfect URL could resemble this: http://example.com/felines, while a messy
URL could resemble this: http://example.com/index.php?page=cats. It ought to take into account
the making of URLs that are:
 static
 rewritable
 keyword rich.
Quality assurance:
The product improvement cycle has one last advance before the site goes live, quality
affirmation. This is frequently alluded to as QA. It is a significant advance to guarantee that site
conveyance is of the best quality and that the customer assumption is in accordance with the
concurred Statement of Work. This progression is free of the plan and advancement stages and
includes different end-client experiments. Experiments guarantee that the graphical UI (GUI)
advances an incredible client experience (UX). QA
Includes two stages: practical and UI testing Functional testing
This includes testing the highlights of a site to guarantee that they are working accurately.
Useful testing ought to be done from the get-go in the advancement cycle as it speeds up
improvement, expands quality and decreases the danger of mistakes towards the finish of the
undertaking. Testing can occur either physically by an analyzer or be totally robotized utilizing
an application.

User interface testing
This is the way toward testing whether clients can draw in with the site as imagined
during improvement. It likewise incorporates testing all highlights like screens with controls,
similar to menus, dropdowns, catches, symbols, toolbars, exchange boxes, structures, and any
remaining UI highlights on the site. UI testing is urgent as it is the clients' experience of the site
that will decide whether they will utilize the site or application in future or not. On the off chance
that an interface isn't instinctive and is hard to comprehend clients are probably not going to
utilize that item once more.
Testing is essential.
The following should be checked during GUI testing:
 Can clients input the essential data into the client fields?
 Does the element execute the ideal capacity when actuated?
 Are blunder messages showed accurately and for the right capacity?
 Is the textual style proper?
 Is the content adjusted?
 Are the tones and textual styles, and even blunder messages, outwardly engaging?
 Are the pictures clear and showing accurately?
 Are the pictures accurately adjusted, and do they show up where they should?
 Are the GUI components situated accurately for various screen sizes and goals?
With the bunch of programs and gadgets accessible, designers need to guarantee that their
sites render acceptably across every one of them. Flawlessness is amazingly troublesome as
every program and gadget delivers a site somewhat in an unexpected way. To guarantee
similarity, designers compose cross-program code. In the event that an element isn't upheld, a
fallback should be set up to guarantee that it corrupts smoothly.
On the off chance that you are conveying your site across a scope of gadgets, every
adaptation should be checked. Furthermore, if the site is intended to be responsive, check the

GUI across a scope of gadgets to test the responsiveness of the plan and that every one of the
components work across the different gadgets and potential perspectives.
Website Development ─ Required Skills
The capacities expected to set up a site can contrast from incredibly basic to the most
reformist. If you will set up a specialist site for an overall group, by then you should have the
going with course of action of capacities or you would have to utilize a social occasion of people
to accomplish this work for you.
Content Experts
Content experts supply the substance that will be dispersed on the site. They plan the
substance as indicated by the need of the planned vested party and a short time later, adjust and
clean the substance before it gets conveyed. Content experts usually rely upon the capacity of the
site page designer and the site administrator. Note that the substance can be text, data, pictures,
sound or associations.
Website Designer
A website specialist is a specialized individual who plans and keeps up the Graphical
User Interface (GUI) of the site. For instance, where the catches ought to be put, how the pictures
are to be shown, and so forth.
Graphic Designers
Visual planners create picture records that are to be remembered for the site. These
experts have a sharp comprehension of creating reasonable illustrations for the web climate.
Web Developers

Web engineers make the program codes to control the provided content, in light of the
webpage configuration set up by the web specialist. A web software engineer should utilize a
bunch of programing dialects to incorporate explicit capacities that the website pages ought to do
behind the scenes.
 HTML/XHTML − These are the markup dialects which you will use to fabricate your
site. A web developer should have a decent comprehension of HTML and XML.
 PHP – It is a mainstream programming language to create website pages.
 PERL Script − PERL is another dialect which is being utilized to create intelligent Web
Applications.
 Java or VB Scripts − These contents are needed to perform client level approvals and to
add greater intelligence to your Website. Thus, a web designer is needed to have
satisfactory information on any of these customer side contents.
Website Development ─ Domain Name
Domain Name Extensions
First area sort is top Level Domain (TLD). These high level areas incorporate any
augmentations that contain only 1 addition — for example, .net, .information, .business, etc.
Second Level Domains (2LDs) square measure space names
containing another level when the .com or .co postfix. for example, com.au may be a second
level space vogue because it contains an additional suffix when the .com that shows the
location begins in Australia.
A gTLD may be a Generic top level Domain and incorporates addresses like. promoting,
domain, style and photography. This can be a roaring
portion that is renowned as lately and there's a vast reach to browse, no matter your industry!

CcTLDs square measure Country Code Domains that square measure usually restricted to
specific nations. These square measure areas like .au, .uk, .ae, .us, so forth
Extension conjointly incorporates a that means. The meanings of
some commanding domains square measure listed as follows:
 .com – business – Top Level Domain; any individual or substance is allowed to enroll
and it is consistently the fundamental TLD.
 .org – association – Top Level Domain; any individual or element is allowed to enlist. Be
that as it may, it is initially planned for use by any non-benefit associations. In any case,
as of now, there are no such limitations and the .organization space name is being utilized
by various associations.
 .net – network – Top Level Domain; any individual or substance is allowed to enlist. It
was initially proposed for use by spaces highlighting a circulated organization of PCs, or
"Umbrella" destinations that go about as an entry to a bunch of more modest sites.
 .edu – instruction – Top Level Domain is restricted to explicit higher instructive
organizations, for example, yet not restricted to, exchange institutes.
 .mil – military –Top Level Domain is restricted to use by the United States military.
 .arpa – Address and directing – It is for Advanced Research Projects Agency in the good
'ol days on the Internet, .arpa is presently solely utilized as an Internet foundation TLD.
Area names are significant. They are important for the URL of a site. A space name looks
something like this: www.mycompany.com significantly more data can be remembered for this.
Area names can convey the accompanying data: subdomain.domain.tld/catalog.
 Domain – the enlisted area name of the site
 Subdomain – an area that is essential for a bigger space
 TLD – the high level space, highest in the chain of command of area names
 directory – an envelope to sort out content
 The TLD can demonstrate the country wherein a space is enrolled and can likewise give
 information about the idea of the area.
 com – the most well-known TLD

 co.za, .co.uk, .com.au – these TLDs give country data
 .org – utilized by non-benefit associations
 .gov – utilized by governments
 .ac – utilized by scholastic establishments
 Domain names should be enrolled, and by and large, there is an expense for doing as
such.
Website Development ─ Domain Privacy
Web Corporation for Assigned Names and Numbers (ICANN) extensively necessitates that
the postage information, telephone number and email address of those claiming and
administrating an area name ought to be made freely accessible through the "WHOIS" indexes.
In any case, this standard empowers spammers, direct advertisers, character hoodlums or
different aggressors to utilize the index for individual data. Despite the fact that ICANN has been
investigating changing WHOIS to empower more prominent security. There is an absence of
agreement among significant partners with regards to what sort of progress ought to be made. Be
that as it may, with the proposal of private enlistment from numerous recorders, a portion of the
danger has been moderated.
There area unit four contact positions during a domain's WHOIS record, which are –
 Holder
 managing director
 promote
 high-tech
A few recorders won't safeguard the proprietor association name to secure the responsibility
for space name.