Intro to Web Design

Web Design: An Introduction

Understanding the framework for how the world wide web functions and how it has developed will help you appreciate the intricacies that are often overlooked in web design. We hope that you will pursue more extensive education than what we will offer here, but this should at least lay the groundwork for any further educational endeavors you take on.

The internet, broadly, is a network of networks that are made up by a multitude of private, public, academic, business, and government networks that exist either locally or globally. These networks are created, accessed and linked through a myriad of devices ranging from computers to cell phones to televisions to video game consoles.

The origins of the Internet reach back to research of the 1960s, commissioned by the United States government in collaboration with private commercial interests to build robust, fault-tolerant, and distributed computer networks. The funding of a new U.S. backbone by the National Science Foundation in the 1980s, as well as private funding for other commercial backbones, led to worldwide participation in the development of new networking technologies, and the merger of many networks. The commercialization of what was by the 1990s an international network resulted in its popularization and incorporation into virtually every aspect of modern human life. As of 2011, an estimated one third of Earth’s population used the services of the Internet.

Map of the internet, produced by the Opte project
Map of the internet

The above image is a rendering from the Opte Project whose stated goal is to visually map the internet and its topics. The image is merely a small focused cross section of the web as we know it.

Outside of various governments which have control over the actual means of data transmission (phone lines, satellites, etc.) there is limited governance over the actual hardware, software, and other components that make up the internet. Two important governing agencies are ICANN (Internet Corporation for Assigned Names and Numbers) and the IETF (Internet Engineering Task Force). ICANN (which is headquartered in Marina Del Rey) oversees the Internet Protocol (IP) address space and the Domain Name System (DNS) while the IETF manages the technical underpinning and standardization of IPv4 and IPv6, the core products of our internet architecture. Essentially, the core focus of these two bodies is to ensure that the major unique identifiers of the various network parts remain unique. Just think how disastrous it would be for normal street level mapping if multiple houses within the same neighborhood shared the same address, much less having billions of computers worldwide unable to tell who is who, what is what, and where information should be pulled from and stored to.

Most people have a limited understanding or desire to learn about the technical framework for the web as a whole. When discussing website development it is important to have a basic knowledge of how most users experience the web and some of the simple operations that make that experience possible.

Internet users typically access the web through some sort of personal computing device (laptop, tablet, desktop, phone, etc) and a browser. That user enters a web address (also known as a URL or Uniform Resource Locator) typically in the format of ‘www.google.com’. The browser than sends a request for information to a host server (a computer that stores a specific set of data relating to that URL). Typically, the browser also communicates certain pieces of information about the user’s computer and browser that allows the server to respond with a more targeted response to the user. Once the server has received the request along with the user generated information, it sends a packet of data back that the browser than interprets and displays as a web page. The process by which the user’s request is sent to the server is called HyperText Transfer Protocol (HTTP). You’ll note that frequently your URL (the www. part of your address) is preceded by HTTP.

Most common web pages are written in HTML (HyperText Markup Language) or XHTML (eXtensible HyperText Markup Langauge). As their name implicates HTML and XHTML are client side languages that dictate to the browser how it should behave and what it should display. By client side, we mean that the instructions and display occur on the client’s computer. Some languages are considered ‘server side’ because based on the browser’s request or query, the server may generate a different or ‘dynamic’ response and the set of display instructions or responses occur on the server. An example is PHP (PHP: Hypertext Preprocessor).

The two major web server types are Apache HTTP and IIS (Internet Information Service). As of the time of this writing, Apache HTTP serves 63% of all websites while IIS serves 21% of all websites. Apache is developed and serviced by an open source community while IIS is privately maintained and owned by Microsoft. Web servers are a vital part of a solution stack (a group of software components needed to deliver a functional product).
Solution stacks are typically made up of an operating system, a web server, and a database and programming language. The two major solution stacks are LAMP stack and WINS stack. LAMP stack stands for Linux (operating system), Apache (web server as we’ve noted), MySQL (database management system), and Perl, PHP, or Python (scripting or programming languages). WINS is an acronym for Windows Server (operating system), IIS (web server as we’ve noted), .NET (programming language), and SQL Server (database management system). Various cross-breeds or hybrids of these formats are also used, such as WIMP (MySQL and Perl/PHP rather than SQL and .Net) or WAMP (Apache, MySQL, and Perl/PHP rather than IIS, SQL, and .Net). You will likely have noticed some indicators for which solution stack a website is using in some of the file extensions that frequently listed in your browsers. File extensions like ‘.php’ should be easy to correlate and ‘.aspx’ which is pulled from ASP.Net (Microsoft). It is important to understand and be able to identify earmarks of particular elements of these different solution stacks as they do impact how their respective website are developed and programmed.

Now that we’ve thoroughly confused you with all of that background info, let’s get back to a simpler focus. Previously we mentioned HTML and XHTML, which are the primary markup languages used in web development. The standards for proper HTML coding are set by the World Wide Web Consortium (W3C).

We talk a lot about how our website developments are standards compliant. Why would this matter to our clients? Major browsers like Firefox, Internet Explorer, Safari, Chrome, and mobile browsers are designed to know how to react to and display properly written, standards compliant coding. If a web developer wasn’t able to assure his clients of being ‘standards compliant’ they would not know how their end user might experience their site both visually and functionally. Improper coding can result in security issues, unintentional design flaws, poor functionality, or slow load times. All of those things combined often mean decreased returns on investment. Being standards compliant also means that we’re able to support older browsers as well, and not just newer more capable ones. Much of the world still uses Internet Explorer 6, although not as much in North America or Europe. The W3C also tries to ensure some level of consistency as HTML develops and the technology behind it changes. A standards compliant page written in XHTML 1.0 Transitional should still look good in a browser that is intended to display next generation HTML5 or something even more advanced.
But while HTML is one of the fundamental building blocks to the web, its by no means capable of standing on its own. Modern users expect visually exciting or interesting webpages with clear personalities and brand messages. That means that HTML shouldn’t be left just by itself. Look at the below pictures. The first image is a web page developed without the use of stylesheets, also known as CSS. The second, from Starbucks, leverages CSS to create a better overall experience for its clients.

See the difference? Our clients certainly will. Talented web designers know how to use HTML and CSS in conjunction with one another, to improve their users’ experience and improve the success of the site on their clients’ behalf.

Sometimes it can be difficult to describe the interaction of HTML with CSS, Javascript, PHP, and Flash.

An easy explanation that most people can quickly relate to is the construction of a new building or home. At the base of the structure is ugly exposed concrete foundations and footings, topped by bare 2’ by 4’ studs, electrical wiring, plumbing, and HVAC ducts. In many regards, HTML is this bare framework. It provides a structure around which additional functionality and design can be achieved. CSS, Javascript, PHP, and Flash are what craft a more livable environment for the home owner or the individual for whom the building is intended. They’re what takes the bare framework and translate it into a bedroom versus a dining room or office, and what dictate modern versus traditional and simple versus rich. You can carry the analogy a step further by reminding that they would never want to buy or live in a home that hadn’t been built to meet engineering or safety codes. In the same way, their business isn’t likely to thrive in a website that’s not been built for standards compliance with custom created coding and functionality.
Since there are so many educational resources out there that allow people to self-teach and self-train their own web development skills, you may find that you’re not the only one who knows the value of best practice web design techniques. But that is part of the reason that we don’t stop there.
Our marketing consultants, Hiren and the rest of our development and design team follow a unique process that allows us to take web design to the next level and it is just one more reason we stand out in a crowd.

Related Posts That May Help