Web Design Lesson 2 - Web Fundamentals
In this lesson you’ll learn the fundamentals the Internet and the World Wide Web work and how designing for web differs from other methods of communication.
You’ll benefit from understanding the structure and function of systems that deliver the
work you design across the Internet. This lesson focuses on understanding the structure and function of the Internet and the World Wide Web. Understanding these systems will help you deliver your web design projects more effectively. You will now take a quick look at how websites are hosted and how the pages you create end up on visitor’s computer screens and mobile devices around the world.
The Internet And World Wide Web Domain Names :
The Internet is based on the fundamental concept that all computers should be able to
reach each other using an address. Much like your home, apartment, or school has a street
address where the post office or Fed Ex can reach you, or you have a phone number where someone can call you, all Internet connected computers have an address known as a TCP/IP address. The TCP/IP stands for Transmission Control Protocol/Internet Protocol, but that’s not critically important. What you need to know is that TCP/IP allows packets of digital information, such as your website, to be sent across networks and then reassembled once it reaches its destination. TCP/IP addresses are commonly referred to as IP addresses.
In the early 1990s, Sir Tim Berners-Lee took advantage of the Internet’s linked nature and
created a method for his colleagues to remotely access data that he stored on his computer.
A user anywhere in the world who had access to the Internet could connect to a server and request a page, which would then display on the user’s computer. Berners-Lee dubbed it the World Wide Web, and his program was a simple version of the first web browser. Web browsers and the information available have evolved greatly, but the technical concepts have not changed. One computer with a TCP/IP address is able to request information, such as a web page, from a computer located at another TCP/IP address.
Researchers such as Berners-Lee appreciated the instant access to documents, and the World
Wide Web was used at first primarily by academics for research purposes. Commercial uses
of a web browser displaying text and graphics quickly evolved. In 1994 there were a mere
handful of websites in existence, and a short five years later, there were over six million
websites in existence.
Domain Names And Hosting :
Domain names help users find their way around the Internet. You already know domain
names because they are commonly surrounded by www on the front and .com on the end.
Domains can also include various endings such as .org, .edu, and .gov.
Domain names exist because it’s not very convenient for you to use or remember IP addresses.
Domain Name Servers (DNS) translate easy-to-understand domain names into IP addresses.
A DNS converts a familiar string of letters, the “domain name,” to the numbered IP address.
Instead of typing the IP address 72.32.147.166 into a web browser, you can type the domain
name, such as www.digitalclassroombooks.com. A DNS on the Internet converts your requested
domain into the appropriate IP address, which routes your request to the appropriate web server.
The web server is a computer that is much like a desktop PC. It generally runs either a version
of Microsoft Windows Web Server or UNIX, but it may have additional processing power
and redundant systems to handle traffic from thousands of users at the same time. Web servers
maintain a constant connection to the Internet, so your websites are available 24 hours a day.
Because most companies want their web servers to be available all day, every day, they are
often maintained by web hosting companies. These firms are paid to maintain your web
server so that it is always accessible and running. If you run a small website, they may put
your site on a server that is shared with other sites. For more demanding sites, or sites with
sensitive information, a business will pay higher fees for a dedicated server. Even large
companies will often turn to hosting businesses to maintain their web servers, although some
companies may elect to place their web servers within their own company.
The Language Of The Web :
Hypertext Markup Language, or HTML, uses tags that enclose plain text. The tags describe
how the text should appear and the function of the text. The web browser looks at the tags
and displays them accordingly. A simple example of HTML text is:
<p>Do you want to have lunch?</p>
The text to be displayed, Do you want to have lunch?, is wrapped by two tags
indicating that it is a paragraph. The fi rst tag is the opening tag <p> and the second is the
closing tag </p>. These tags are generally not displayed in the browser, which reads the text
from the web server and formats the text as a paragraph to display on the viewer’s screen.
HTML also lets designers create hyperlinks. Hyperlinks are areas of text, images, buttons, or
other parts of a page where the viewer can click to navigate to additional content. Clicking a
link can open a new web page, site, document, video, or animation.
The Evolution Of The Web And Web Standards :
HTML is interpreted by web browsers, such as Internet Explorer, Firefox, Safari, and Chrome.
Web designers have discovered that the same HTML code might be displayed differently on
various web browsers. Because web browsers can interpret HTML code differently, you will
need to consider browser testing in your design considerations, which we cover in more detail in
Coming Lesson 10.
In the early days of the web, some browser developers created proprietary HTML tags.
They created tags that were supported by only their browser, as they hoped that the unique
capabilities might draw more users.
Soon designers discovered they could not rely on the same HTML code for all browsers.
Designers added “hacks,” extra code, to pages, making certain that layouts worked in
different browsers. Some designers would go so far as to create two versions of a site, and the
appropriate version would be displayed based upon the browser being used by the viewer.
Other designers would add badges to their sites, letting viewers know that the site performs
best with a particular browser. To this day you can still see some sites with notices such as
“This site is optimized for Internet Explorer” or some other browser.
inconsistency and proprietary tags that worked only with their browser were hurting the
user experience and harmful to the vitality and growth of the web. The various browser
manufacturers have started to recognize the importance of consistency, and most are working
with the World Wide Web Consortium (W3C) and independent testing bodies to validate
the compliance of their browser with accepted standards. Browser developers now promote
their compliance with standards and speed at displaying standards-based pages.
Now that you understand some of the history and concepts behind the web, you’ll start to
examine some of the HTML code that powers web pages.
Separating Structure, Style, And Interactivity :
Modern websites often consist of pages with HTML or XHTML for the page structure and
content, Cascading Style Sheets (CSS) for the style, and JavaScript, Flash, or Silver light for the
interactivity. In this exercise, you will look at three examples of source code. Each page has
the same content, but has a different appearance and functionality. If you have not done so
already, be sure to copy the lesson folders for this book onto your local system.
- Open your web browser — it doesn’t matter if it is Internet Explorer, Firefox, Chrome,Safari, or another browser. Choose File > Open and browse to the web02lessons folder,Choose the file plain.html, and then click Open. The page loads into your browser.The page displays in your browser. The HTML defines the structure of this page and contains content such as the text and images.
- In your web browser, choose File > Open and browse to the document plain_with_styles.html located in the web02lessons folder, and click Open. Your browser displays a more highly formatted web page. It includes a two-column layout, and background colors for the page. The content on this page is identical to the previous document; however, the style is being provided by a number of style rules in a Cascading Style Sheet or CSS
- In your web browser, choose File > Open and browse to the document plain_with_styles_js.html located in the web02lessons folder, and click Open. This page includes a collapsible panel which you can activate by clicking the title to expand the content section. JavaScript makes this interactivity possible by registering the mouse click which triggers the expansion or collapse of the panel.
As you can see, the same HTML content can be enhanced and modified using CSS and also
by adding interactivity, in this example it was through the use of JavaScript. As you work
through this book, you’ll learn different ways to have HTML work in concert with CSS and
interactive elements and even multimedia to create the page and message you need for the
sites you create
Designing For The Web :
The best designed websites are those that meet the expectations of a user, are easy to use, and
meet the objective of the publisher — whether a business, organization, or individual. There
are several considerations that should always be a part of your decision-making process when
starting to create a design.
Know Your Audience :
A bank site provides a sense of safety, stability, and professionalism. The kind of image you
want from someone that will hold on to your money. It also provides easy access to log-in
to your account if you are a user, and has easy-to access links to move to the parts of the site
offering various services. The design and navigation is easy to follow, regardless of the age or
technical skill of the user.
An entertainment site that targets a teenage audience includes a more visual approach,
updated news, and links to social networking sites that might be used by the audience.
Information about shows and personalities is front-and-center. The site manages to be trendy
and still provides easy access to information that viewers are likely to be seeking.
Know that your site’s viewers are impatient:
The viewers coming to your site are impatient. A recent study of retail websites found that if
users reach a website and the page does not load within four seconds, they are likely to leave
the site, never waiting for the page to load. The same study found that more than one-third
of online shoppers would abandon a site immediately if they have a poor online experience.
The majority of those who said they would abandon a site indicated they would not return.1
As a designer you can help provide a great experience on your sites by keeping the following
in mind:
• Use images only when they add value to the page.
• When using images, optimize their size for online use so they load faster. This is
covered in detail in Lesson 5.
• Use a common Cascading Style Sheet to standardize layout, navigation and colors.
• Separate long content into multiple pages so it loads faster.
• Only add multimedia such as video, audio, Flash, and Silverlight.
Designing For The Screen :
When designing websites, consider where they will be viewed. If your audience will
primarily be on a desktop or laptop computer, the pages should be horizontal rather than
vertical. This keeps users from needing to scroll unnecessarily. Similarly, if your audience is
primarily working on mobile devices, consider reducing the content and designing for a
smaller, vertical screen.
Displays are available in different sizes, and can display varying amounts of information.
The amount of information that can be displayed on screen is known as the resolution of a
display, and it is measured in pixels. The word pixel is derived from “picture element” and is
the smallest unit of measurement on the screen (when used for web graphics there are often
72 pixels per inch). Two of the most common monitor resolutions on the web are 1024
pixels wide × 768 pixels high and also 1280 pixels wide × 800 pixels high. As you can see in
the table below, the same page displayed at various resolutions provides different experiences
for the viewer.
As screen sizes get larger and display resolutions increase, there are a greater number of
discrepancies that can occur, making it even more important to design for all the displays on
which your site will be viewed and we discuss how to tackle this dilemma in Lesson 7. While
it is impossible to design a site that looks the same in every browser at every resolution, you
can still create designs that work across various devices and displays.
Understanding How Your Audience Will Read Your Web Content :
Most web users gain information they are seeking through reading. But writing for a website
should diff er from writing for brochures or other printed documents.
Web readers are more likely to “scan” stories rather than read them in full detail. Effective
content is organized, edited, and structured so it works well on a site; it isn’t merely copied
and pasted from printed brochures. You’ll discover that you want to create headings that
clearly mark the separation of a story from other content, or format text so it does not span
the entire width of a monitor.
You’ve discovered several key concepts about how the web works, the technical
underpinnings of websites, and some key design considerations. We wrap up this section with
some self-study ideas and review questions before jumping into the next lesson.
Self Study :
1 Identify three websites you use frequently and compare how well they are formatted for
the screen and note if they work equally well on your monitor. Make a list of the visual
elements that contribute to your overall experience of the site.
2 Have you had the experience where you’ve considered “abandoning” a site because of
a poor experience? If so, try to remember the elements that led to this and how your
favorite sites might do things differently.
Review
Questions :
1 What is an IP address and what role does it play in web design?
2 What elements contain structure, style, and interactivity for a website?
3 When designing for the screen, what is one of the most important considerations for
designers?
Answers :
1 An IP address is a unique series of numbers that identify the identification and hosting
address of a website (or sites). IP addresses are associated with a website’s domain name
since humans have an easier time working with names (www.agitraining.com) rather than
numbers (72.32.147.166).
2 HTML provides the structure of the page. The style is provided by CSS and the
interactivity is often provided by JavaScript, Flash, or Silverlight.
3 Designers need to be sensitive to the fact that there are users who have different size
monitors and will view content at various display resolutions.
About My 1 Marketplace
No comments