Website Fundamentals - Web Technologies - Responsive Design - Web Browsers A great place to start if you are interested in web designing or research on the internet

1. Current Web Design Practices

2. The Internet and World Wide Web domain
name
• All Internet connected computers have an address known as aTCP/IP address.The
TCP/IP stands forTransmission Control Protocol/Internet Protocol
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.

3. 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

4. The evolution ofWeb andWeb 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
• 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.

9. Understanding User Interface & User Experiene

12. Web editors versusWYSIWYG tools
• HTML and CSS use text as their foundation. Because of this, even the most simple
text editor, such asTextEdit on the Mac or Notepad on the PC, is capable of
creating web pages.
• These basic text editing tools, however, lack features that help with web design
and development such as checking code syntax, organizing your site folders, and
uploading fi les to web servers.
• In addition to text editors, there are also fully featured web editors and design
tools, such as Adobe Dreamweaver and Microsoft Expression Web.These are
WYSIWYG tools (“WhatYou See IsWhatYou Get”) that provide a visual layout
environment, code editing, along with website management tools.

13. Get used to different
browsers • Try making yourself use a different browser every day for a week or
so.
• Try alternating between, say, Mozilla Firefox, Google Chrome,
Opera, and Internet Explorer, particularly with sites you visit every
day.
• You may even find that different browsers are better for different
activities.
• OnWindows computers, I prefer Chrome for most of my daily use:
reading my Gmail account, posting toTwitter, and managing my
Web sites.
• On Mac, I prefer Safari (whoseWebKit engine is also used in
Chrome).And on all computers, I rely on Firefox forWeb design and
development.
• Because Firefox is open source, people have built many excellent
Web design add-ons for it, such as Chris Pederick’sWeb Developer
Add-on that’s will be discussed through this course

14. Many Browsers, Few Engines, OneWeb
• Mozilla Firefox is also what is known as an open-source browser: Firefox’s source
code is openly available to everyone. It is also developed and tested by a large
group of volunteers and a smaller group of paid individuals working for the Mozilla
Foundation.
• Opera, like Microsoft’s Internet Explorer and Apple’s Safari browser, is a
proprietary browser, meaning that most of its code is kept secret and is developed
almost exclusively by each company’s employees.

15. RENDER ENGINES
• The good news for adventurous readers of the Web is even better news forWeb
designers: mostWeb browsers use one of three rendering engines:
1. Mozilla’sGecko engine
2. WebKit engine (used in Apple Safari and GoogleChrome)
3. Microsoft’sTrident engine.
• In many respects, browsers based on Gecko and KHTML/WebKit generally display
Web pages very similarly. Firefox and Chrome, for example, tend to display pages
the same way; although depending on the operating system (Windows, Mac OS X,
Linux), each browser will have access to different fonts
• TheTrident engine, which tends to be the most unpredictable, is used in Internet
Explorer and AOL Explorer.

16. According to the website Counter.com, over 50 percent of users have monitors
with a resolution of 1024 × 768 pixels.
Thirty percent have 1280 × 1024-pixel monitors.
This does not mean their browser window opens to that size; in fact, their browser
window usually varies from 800 × 600 pixels to 960 × 600 pixels.

17. Various forms of website viewing is
available today
• The goal of every Web writer and designer should be to capitalize on the
differences and needs of a wide range of readers to make each unique view as
great as possible.
• (That means abandoning any attempts to make all experiences of aWeb site
exactly the same.)

18. Understanding different forms
of web viewing
• It is important thatWeb writers and designers appreciate just how differently a
page may appear under certain circumstances.
• Understanding these differences from a reader’s perspective will make you a
much more effective writer and designer when it comes to creating pages that
work optimally in many different browsing environments

19. Images for theWeb display according to their actual pixel dimensions so
coordinate those with your layout.
Different photographs will look best at different compression rates

20. The written content of your site is crucial to your site being found and
accessible. Even if you are a photographer or a visual artist, search
engines index and allow people to search the writing of your page.
Image searches aren’t image
searches at all, but rather searches
on “captions, descriptions, and
other contextual information.”

21. Conforming toWeb Standards
• Web standards are guidelines issued by the World Wide Web Consortium (W3C), an
inter national organization of people associated with technology companies and
universities.
• Does it stifle creativity? Discussion

22. Why we needWeb Standards?

23. Ghost from the past
• HTML tables to design pages. Used for their intended, structural purpose, HTML
tables are good for one thing: marking up tabular data.Tables for layout present
significant accessibility issues and make a page harder to repurpose or redesign
later
• Frames and framesets. Another accessibility nightmare, frames are artifacts from
an era before Web servers could easily include content shared over multiple pages
• Invisible GIF image spacers. Often used in tandem with HTML tables.
• “Save As HTML . . .” in a word processor. Just because the option is there doesn’t
mean it should be used.
• Adobe Flash for site design

24. InWeb design its all out in open
Web pages in HTML and CSS are all open source: go
to your favorite Web browser and choseView > Source
Advances inWeb design fall under the umbrella term of “Web
standards,” a term promoted by a grassroots movement formed in 1998 called the Web
Standards Project (WaSP).
WaSP, a group of influentialWeb designers who had had enough of browser-based
design practices, pressured Netscape and Microsoft to adopt theW3C’s specifications
for the Web’s many languages and protocols in the design of their browsers.

25. AWAY FROM CORPORATE CONTROL
• The idea behind Web standards is that no one company or browser manufacturer
controls XHTML, CSS, or any otherWeb language.
• At the same time, all browser manufacturers should support those standards in
their browsers (and all modern browsers do, to varying degrees).
• That means aWeb page can be authored in a browser neutral way, and designers
can be relatively certain that their pages will display and function acceptably in
any browser.
• Note that “acceptably” is very different from “exactly the same,” which will be
an important distinction when you begin to work with CSS.

26. In the heated battle between Microsoft and Netscape in the 1990s known as the “browser wars”
the term “recommendation” had limited influence.
Representatives from both Netscape and Microsoft served on the committees, or “working
groups,” that wrote theW3C “recommendations” for XHTML, CSS, and other key standards.
Yet both companies often ignored the standard specifications that they had helped to write.
The trouble is that what the WaSP calls
“standards” are actually issued under the term “recommendations” by theW3C.

27. YEARS OFTIRELESSACTIVISM
WaSP changed all of that through years of tireless activism.
With the stable releases of Internet Explorer 6 (IE6, in 2001) and Netscape
Navigator 6 (NN6, in 2002), both leading browsers provided viable support for
W3C standards, including XHTML and CSS, among other standards.
Web designers could begin to design and writeWeb pages to the
“recommendations” of theW3C

29. WEB STANDARDS:ATHREE-PART
APPROACH
• Jeffrey Zeldman describes these components as structure (XHTML), presentation
(CSS), and behavior (JavaScript).
• PLAY MEDIA ON JEFFREY ZELDMAN AND WEB STANDARDS