This document discusses trends in website building and web design in 2014. It covers techniques used by web designers, including skills in interface design, graphics, coding, search engine optimization and user experience. It also discusses technology trends like responsive design, motion graphics and typography. Finally, it outlines different types of websites including informational, transactional, and hybrid sites that combine tasks and information.

1. i n f o s y s t e m s
FUNDAMENTALS OF
WEBSITE BUILDING & WEB DESIGN
TRENDS 2014
www.webguru-india.com

2. INDEX
Contents Page
1. Introduction 01
2. Techniques and Skills Used by Web Designers 01
3. Technology Trends 05
4. Types of Websites 07
5. Conclusion 08
i n f o s y s t e m s

3. 01
Introduction
Techniques & Skills Used by Web Designers
Website design incorporates many disciplines and
skills involved in the creation and maintenance of
internet sites. The different fields of web designing
include interface design, web graphic design,
authoring along with proprietary software and
standardized code, search engine optimization and
user experience design. Web Design is defined as the
process related to the client- side or front-end design
and writing mark up of a website.
In present times, with highly innovative and
sophisticated technology development, leading web designers cover various aspects of the
designing process. Expert web design professionals are expected to have proper awareness of
usability and web accessibility guidelines, especially if their role includes creating mark up.
In modern times, a variety of sophisticated tools are
used by web designers and the application procedure
of such different technologies mostly depends on what
type of the production process those are involved in.
Technologies used for building websites cover
standardized mark-up and it could be either hand-
coded or generated by editing software WYSIWYG.
Over time, these tools are updated by newer software
and standards, but the principles behind website
designing remain the same. For the purpose of
creating design prototypes or web formatted imagery, web graphic design professionals use raster
graphics packages and vector. Proprietary software that is based on plug-ins also bypasses the
browsers versions of clients. They are often WYSIWYG although having the option of applying
scripting language of the software.
There are also tools for search engine optimization and these can be used for checking search
engine ranking as well as suggesting improvements. Apart from these, some of the other tools like
mark up validations and usability or accessibility testing tools might be used by the leading designers
as per requirement. These website testing tools are all intended to ensure the various business
objectives and market potentials in terms of meeting web accessibility guidelines.
i n f o s y s t e m s

4. 02
i n f o s y s t e m s
1. Client Side Applications
The Client Side part of a web site is the data sent by the server in an unprocessed form to any web
browser on the local machine, that displays and processes the data.
HTML: Hypertext Markup Language (HTML) is a scripted language which is mainly used for
displaying images and text on the Internet. This is the primary internet language and all other
applications revolve around this. Its disadvantage is that it only displays website pages, but cannot
perform more complex functions like calculations, content manipulation and validation. There are
different variations of this language including XML, that allow more flexibility, but none is as widely
supported and used as HTML.
DHTML: Dynamic HTML or DHTML is only HTML generated by some other application, like a server
side script in PHP or Perl, or a JavaScript written client side script. The advantage of Dynamic HTML
includes the ability to change, delete or add HTML text whenever the web page is presented to the
web browser, allowing content modification and manipulation every time a page is displayed.
XML: Extensible Markup Language (XML) is a uniform protocol that enables receiving and sending
complex data over the internet irrespective of the platform or technology being used. A data can be
decoded from and encoded into XML protocol using ASP, PHP or Perl.
Java: Java is an interpreted language that was developed to run on each operating system. This very
nature of this language has made it a natural pick for complex internet functions like live news feeds,
streaming stock quotes, crossword puzzles, picture shows, games and much more. Prior to the
execution of Java applications, these must be compiled first.
Java Applet: Applets are small web applications embedded into HTML with a reference to other file
comprising the source code and written in Java. The primary advantage of Java Applets includes
their ability to perform complex functions along with the easy implementation on web pages.
However, these must be compiled and take longer to load.
JavaScript: JavaScript is a scripted language based on Java. It runs on most web browsers and can
only be performed by a web browser. It runs on most web browsers to complement HTML. For
complex functions executed by the browser, it is the language of choice and hence it is more stable
and much faster than Java Applets. The rolling image functions can be the example of JavaScript.
The image becomes white to yellow when on the left side of that site the mouse gets passed over it.
JavaScript can also be used for user personalization with form validation, cookies and special image
effects and text.
Frames: Frames is a series of web pages linked together into a single page by HTML. Its advantage
is that navigation can be done on just a single section of a page, leaving the rest unchanged. Thus
navigation is made easier and faster. Any corporate website can be designed using frames.

5. 03
i n f o s y s t e m s
Cookies: Small data files are called Cookies. These are sent to local computers by web browsers for
the purpose of storing user identification data and other information to a website for each visitor.
Cookies allow tracking of visitors, customization of web pages for each user, along with other user
specific functions.
Image: On web browsers, a file commonly in JPEG, Bitmap or GIF format is used to display
graphics. Animated Image changes or moves using a series of frames assembled together in
sequence. Animated images are extensively used for special effects and in ad banners.
Flash/Shockwave: It is an animated multidimensional image application designed by
Macromedia. The advantage of Flash lies in its movie like graphics and quality. However, users
generally do not have the software required to use this technology. Hence, an alternate website
without Flash should be created.
2. Server Side Applications
The Server Side application first processes the data on the server to send it to a web browser for
display and further processing.
Linux: Linux, Solaris, BSD, FreeBSD along with other Open Source operating systems are known for
their scalability and security, and these are applied to over 60% of the web servers powering the
Internet.
Windows NT: Windows NT and Windows 2000 besides the built in IIS (Internet Information Server)
are server operating systems designed by Microsoft for the Internet and networking.
CGI: Common Gateway Interface (CGI) enables the performance of server side applications such as
generating dynamic web pages, accessing data sources, server administration etc. C++, Perl and
Python are the most common Open Source languages applied for CGI. Into HTML pages, CGI scripts
cannot be embedded, as these are commonly placed in a separate directory called cgi-bin for
execution.
SSI: Server Side Includes (SSI) enables the web server to perform commands set into HTML
documents. SSI acts best for displaying time and date, merging CGI scripts and multiple documents,
last modified date, click counters and different simple server side applications.
PHP: For server side applications, this is the most advanced and latest Open Source scripting
language. PHP can be embedded into HTML and it is superior to CGI, and can be executed from any
directory on the server. PHP executes all CGI functions like receiving and sending email, accessing
databases, writing to and reading from files, user authentication, sever administration, form
validation and much more. It is a combination of Java, C and Perl, making it easy for most
developers to learn.

6. 04
i n f o s y s t e m s
ASP/ASP.NET: Active Server Pages (ASP) and ASP.NET is the server side application platform
designed by Microsoft based on the VB Script programming language. For people who know VB
Script, its code is easier for implementing. PHP is similar to ASP as it can be integrated into HTML,
provided it is not Open Source.
Cold Fusion: It is another platform for server side application developed by Allaire Corp and Cold
Fusion is used for its proprietary scripting technology. It is also another alternative to ASP and PHP
and it too can be enclosed into HTML, unless it is not Open Source.
Active-X: A plug-in developed by Microsoft allows applications, generally written in VB Script. It can
be embedded in web pages and is similar to Java Applets.
SSL: Secure Sockets Layer (SSL) is a process of encrypting data on the internet. Every website must get
a digital certificate for proving its true identity to end users. On almost all E-commerce sites this
technology is widely used in order to provide a secure environment for exchanging financial and
personal information.
Databases: The Database is an essential component of dynamic and data driven web sites, as it
retrieves and stores data in real time. The basic method of communicating with databases on the
Internet is through server side scripts.
MySQL: On the Internet, it is widely used and the most popular Open Source database. Developers
mostly prefer MySQL for ease of implementation and its speed, and its ability for importing data from
other databases like Microsoft Access. Some of the most popular and largest websites such as Yahoo,
Google and many others use MySQL.
MS SQL: Microsoft's Sequel Server or SQL database is mainly used for medium to light size web
applications written in Visual Basic and ASP.
MS Access: It is a lightweight database designed by Microsoft for its uses mainly on personal
computers or desktops. MS Access is also commonly used on the Internet due to its familiarity to PC
users.
Oracle: it is an industrial strength database developed primarily for government agencies and large
corporations. Oracle is popular for its ability to handle variety of data and very large volumes.
Sybase: It is also an industrial strength database meant for government agencies and large
corporations.
Visual FoxPro: Microsoft's FoxPro is one of the first databases to be used on the Internet. However, it
is not widely used any longer.

7. 05
i n f o s y s t e m s
Technology Trends
1. Market Branding and Communication
Design: Marketing and communication design on a
website helps in identifying all the features that will
work for its target market. This can be a particular age
group or strand of society or culture, accordingly the
designer can understand latest market trends and the
mindset of its audience. Design professionals always
understand the kind of website designs they plan, and
thereby making a business-to-business web design
considerations absolutely different from a customer
targeted website like an entertainment or retail
website. Careful consideration of specific web design
planning ensures the overall design or aesthetics of a site. Ideally, it should not clash with the
accuracy and clarity of web navigation or content, especially if it is an e-commerce site. Design
experts often consider the standing of the business or the owner’s reputation while making the site
that truly portrays the commercial purpose favorably.
2. Interactive and User Experience Design: The user experience design depends on what the
content is and how any website works. User experience is associated with labeling, clear instructions
and layout on a website. The interactive design of a website also greatly influences the level of users’
understanding along with their interaction on a site. If a user perceives the usefulness of that website,
they are more likely to continue using it. Users who are well versed and skilled as far as using website
is concerned may come across a more unique, less user-friendly or but less intuitive website interface
helpful nonetheless.
On the contrary, less experienced users are less likely to find the usefulness or advantages of a less
perceptive website interface. It is for this reason trends for a more universal and easily accessible user
experience are on demand. Easy and simple navigation helps to accommodate a large number of
users regardless of their proficiency. Much of the interactive design and user experience design is
taken into consideration in the process of creating user interface design. In case coding language
skills are not advanced, interactive functions often require plug-ins. In the user experience design,
choosing factors like whether to use interactivity which requires plug-ins is a crucial decision. If it is not
installed previously with most of the browsers, there lies a risk that users may neither have the know
how, nor the required patience to set a plug-in just for accessing the content. The function often
requires developed coding language skills.
3. Page Layout: The user interface design is partly affected by the type of page layout quality. For
instance, when scheming the layout, designers may consider the consistency of page layout on
various pages of the sites. Page pixel width is another vital factor of layout design for aligning objects.
The best-selling fixed-width website generally has the same width set to match the most popular
current browser window, at the best latest screen resolution, on the best available monitor size. Most

8. 06
i n f o s y s t e m s
of the pages are center-aligned for aesthetic concerns on larger screens. Fluid layouts are also
increasing in popularity as an alternative to grid-based design and layouts based on HTML table in
both coding technique and page layout design principle.
4. Responsive Web Design: It is a newer design approach based on CSS3 as well as a deeper
level of particular device specification within the designing of the sites. It is a process that employs an
advanced use of the media pseudo-selector and CSS. Responsive Web Design (RWD) is a trend that
suggests development and design should respond to user’s behaviors and environment based on
platform, screen size and orientation. The practice comprises a mix of layouts and flexible grids and
images along with the intelligent application of CSS media queries. As the modern users tend to
switch from laptops to their iPads, websites should also automatically switch and improve to
accommodate for image size, resolution and scripting abilities. This highly sophisticated design
process makes websites technically enable to respond to the user’s preferences automatically. This
technology is going to eliminate the requirement for a different development and design phase for
all new gadgets in the market.
5. Motion Graphics: Uses of motion graphics may also affect the user interface and page layout.
The choice of using motion graphics is optional and it generally depends on the target audience for
the site. Motion graphics may be better received or at least expected with the entertainment-oriented
websites. However, any website targets market with a more formal or sincere interest like business,
government or community and hence might find animations distracting and unnecessary if only for
decoration or entertainment purposes. This does not mean that purposeful content can not be
enhanced with video or animated presentations that has relevancy to the content. In any of such
cases, motion graphic design can make a difference between more efficacious or distracting visuals.
6. Typography: Instead of using a variety of website type styles or typefaces web designers may opt
to limit the them to just a few ones that are of similar style. Most browsers accept a limited number of
safe fonts that designers use mainly to avoid complications. Font downloading process was included
later in the fonts module CSS3 and since then it has been used in Opera 10, Mozilla Firefox 3.5 and
Safari 3.1. This enhanced method has subsequently become popular with increasing interest in the
implementation of font downloading and web typography as well. Many layouts on a website
incorporate negative space in order to avoid center-aligned text and also break the text up into
several paragraphs.
7. Quality of Code: Website designers may consider it to be good practice to conform to standards.
This is usually done via a description specifying what the element is doing. A successful website that
conforms to standards may relate to the accurate layout of pages for organized coded elements as
well as readability.

9. 07
i n f o s y s t e m s
Types of Websites
The visual appearance and design of a website
depends on the function of a site. There are a number
of categorized web designs that are used to build and
describe sites. Even though the possible types of
websites may appear endless, these can be grouped
safely in a couple of general ways. Starting from the
abstract there are various visual categorizations also.
• Abstract Categorizations
A site can be of two types: task focused and
information focused. This distinction sometimes can
be described as document-centered site and application-centered site. Informational or document-
centered sites offer information for users, though such sites provide very little interactivity instead of
allowing the users to search, browse or find the information presented. Websites that are
applications or task oriented allow users to interact with information and accomplish tasks like online
retailing or shopping and transferring funds from any bank account.
Hybrid sites combine both the tasks in a limited way. In recent times these type of web design concept
are becoming more common. As the line between application and information blurs, a general static
document-oriented site may be converted into full-blown software applications.
This abstract grouping also suggests the transition from more print or document oriented websites to
more interactive programmatic sites. With the onset of sophistication in the field of web development
and designing, contention and innovation play a major role.
• Broad Visual Categories
Turning to more visual characteristics of the sites, with some sample categories usually seen on the
web, websites may also be grouped based upon an organization that is running or somehow paying
for a particular site. Within such categorization there are some major groupings.
1. Informational websites: The sites that provide information regarding a specific
organization or subject fall into this category. These are also known as the brochure ware
sites. These are found to be most commonly used websites on the Internet and over time
these sites take on aspects of other site categories. Commercial sites are mostly
informational in form.
2. Transactional websites: These sites are used for conducting some task or transaction. E-
commerce sites and Government sites are included in this category. Transactional
websites generally refer to on-line stores which allow customers to order various products
and services. Transactional site facilitates commerce by enhancing businesses network
with target customers all across the world. The primary advantage of transactional

10. 08
i n f o s y s t e m s
websites is that customers do not need to step out the door or travel, as 24 hour on-line
stores are just a click away.
3. Community websites: These sites are intended to provide transaction-related facilities or
information, but mainly focus on the user interaction among the site's visitors. Community-
based websites tend to highlight a particular type or topic of a person and thus encourage
interaction between like minded visitors or individuals. Educational sites fall into this
category.
4. Charitable websites: These are intended and designed for gaming or some sort of
amusing interaction including informational, transactional and community elements.
Such sites help users find out information about charity, but the primary objective of the
website is to get visitors involved with charity.
5. Personal websites: Among various other classifications or types of websites there are
experimental or artistic sites, personal web spaces like blogs or web logs as well as sites
which may not follow common web standards or conventions or involve some well-
defined economic purposes.
6. Online Business Catalog/Brochure Websites: In early days when the Internet was not in
use, the print, television media and radio were used for spreading awareness about
businesses. Now you can easily promote your industry by reaching out to literally millions
of people with the help of just one website. With your online catalog or brochure, you can
show anyone who looks for your website, photos, descriptions and various other related
details of your products and services. To some it may sound like an E-commerce Website,
but there are a number of businesses that market services or products such as dentist, hair-
stylist or day-care center and these are not sell-able over the web.
Web design partly overlaps the process relating to web engineering so far as the wider scope of web
development is concerned. In the year 1996, the first competitive browser of Microsoft was released
in its own complete form with tags and its features. It was the first advanced browser that is meant to
back up the style sheets that earlier seemed to be an obscure authoring technique.
In this informative e book you will find various useful
things about professional website designing. Right
here in this book you will get to know about the
fundamentals of everything important relating to web
design, optimized graphic files, CSS layouts and so
much more. This thoroughly revised comprehensive
edition offers lessons on website design programs
according to professional standards and modern
design practices.
Conclusion

11. Need any help in web design and development? Get in touch with us at
Y8, Block - EP, Sector V
Salt Lake
Kolkata - 700091
INDIA
Ph: +91-33-40200844
Email: info@webguru-india.com
Website: www.webguru-india.com
i n f o s y s t e m s
...designing imaginations across boundaries