123.123.1234
  • Google
  • RSS
  • Google
  • RSS

wwwMuch in technology happens silently, transparently, ever-churning away in the backgrounds of our lives, working its magic. How easy it is to enjoy the product of technology, not having to think at all about what makes things tick.

We turn the key and start our car, slip the gear shift into drive, and press the gas. We benefit from years and untold volumes of painstaking engineering effort, with little thought, and who would want it any other way?

Similarly, how easy it is to type a web address and watch your browser come to life, though behind the scenes, what’s actually happening?

In this article, I’ll describe the basics of how websites work, and also how mobile websites are possible.

So you type a web address into the address bar in your browser and press Enter.

What happens?

Stuff shows up in the window, right?  Text, images, movies, etc. A webpage is painted before your eyes. But what aren’t you seeing? What happens behind the scenes?

Lots, but fortunately, all of it can be boiled down to a few items.

Before the web browser can do anything at all, before it can show you a single line of text, or a single image, it must ask for help. And help comes by way of a great listener, one that sits in the background, quietly, with little to no fanfare or recognition (except perhaps, in geek circles). Sitting, waiting, sometimes at great distances, with one single purpose: to listen for questions from web browsers and answer. This listener is a web server, and it replies instantly.

So if a web browser asks for, say, amazon.com, Amazon’s web server replies, and lots of things stream back in a blink. What’s returned is exactly what was asked for. But if you looked at this data, instead of the visual that you’re used to, you might see something like this:

<html>
<head><title>Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs &amp; more</title></head>
<body>
...
</body>
</html>

I’ve cleaned up what’s above, more than a lot! What Amazon’s web server actually replies with is far more intense! But you get the idea. What you’re looking at is a language, much like the language I’m typing right now, except it’s far more structured.

The most basic language used to create web pages is HTML. In fact, entire websites can be created using HTML and nothing else.

Most webpages begin with the HTML tag, <html> and end with </html>. Do you see the difference? The closing tag (</html>) is exactly the same as the opening tag (<html>), except for the addition of the forward slash character.

Not all HTML tags have opening and closing tags, but many do.

For example, a link (or anchor tag) is specified in HTML as follows:

<a href="http://www.amazon.com">Go to Amazon</a>

It has an opening and closing tag. In this case the opening tag is <a> and the closing tag is </a>. But there’s more. You may ask, what’s the deal with the href=”http://amazon.com” part? The graphic below illustrates the <a> tag’s component parts.

A-tag-structure

So the text that’s displayed to the website visitor is “Go to Amazon” but the <a> HTML tag has more to it.

There are many other HTML tags. There are tags used to display images, objects, tables, etc. There are even tags that display nothing, are are only recognized by the browser and/or web server, internally, for their own purposes.

So if HTML is the main language used in web pages, what are some of the others?

A couple examples are:

  • CSS
  • Javascript

Think of CSS as a styling language for HTML. For example, CSS can be used to tell the browser that the “Go to Amazon” link should be blue, or bold, and that it should have an underline when displayed. Links on this website default to red, such as the following:

Go to Amazon

Which I created with the following HTML:

<a href="http://www.amazon.com">Go to Amazon</a>

But I can change the link color with CSS. As an example, let’s change it to pink:

Go to Amazon

Here’s the updated code:

<a style="color:pink;" href="http://www.amazon.com">Go to Amazon</a>

Notice the style= attribute. This is where the CSS is specified, and as you can see, simply by adding: “color:pink;” the link is now displayed pink.

Neat, huh?

Let’s add an underline:

Go to Amazon

The code:

<a style="color: pink;text-decoration:underline;" href="http://www.amazon.com">Go to Amazon</a>

To add the underline, we added text-decoration:underline; to the style= attribute.

Let’s make it big!

Go to Amazon

The code:

<a style="color: pink; text-decoration: underline;font-size:72px;" href="http://www.amazon.com">Go to Amazon</a>

Adding font-size:72px; to the style= attribute changed the link’s height to be 72 pixels tall.

So you can do lots with CSS. The great thing about styling HTML with CSS is that it allows us to change the style of any HTML element, without changing the HTML itself. In our examples above, we’ve included the CSS statements within the HTML tag itself. This is called inline CSS. But web developers usually move the CSS to its own file.

So what you really end up with is something like the following:

HTML:
<a class="amazon-link">Go to Amazon</a>

CSS:

.amazon-link {
color:pink;
text-decoration:underline;
font-size:72px;
}

The HTML and CSS are contained in separate files, but work together.

This approach is powerful because it allows the styling of HTML elements without touching the HTML itself. If you decided to become a web developer today, you’d love this feature, because you could open a CSS file for a given website and change the ALL links on the site to pink with a simple one-line edit!

So these are the basic concepts behind HTML and CSS. HTML is often used to specify the actual elements of a webpage, where CSS is used to style those elements. These two alone are a powerful duo. If you simply programmed websites using these two languages, you could go far.

But what about mobile? How do website developers make websites automatically adjust their HTML elements, depending on the screen width of a device, such as a phone or tablet? How are HTML elements formatted for these narrower screen widths.

CSS again comes to the rescue. More specifically, CSS3 (CSS version 3).

Both HTML and CSS have evolved over the years, partly to accommodate more complex webpages, but also to provide support for the numerous new devices that’ve become prevalent in our everyday lives. Phones and tablets are two examples of these, but think of the new smart watches that are appearing on the market, from companies like Apple (the iWatch is a good example). These devices present additional challenges to web developers. It’s much different formatting elements for a watch-sized screen than, even, for a smartphone. The watch screen width (and height) is VERY small. Perhaps only a few words can fit! And so, what should they be? It could even be that different types of information should be displayed on a screen so small, since you have so little space to display it.

What mechanisms are used in CSS3 to format HTML elements for smaller screens? We’ve already seen that CSS can change the color and size of an HTML element, but it can do much more.

Consider our basic pink link:

<a style="color:pink;" href="http://www.amazon.com">Go to Amazon</a>

Assume for this example that we decide that the color pink is okay for links displayed on a desktop computer or laptop, but might not be such a great color for mobile screens. We decide that black is much better for mobile, but only for mobile. How would we do it?

Normally, we might do something like this (not taking mobile into account):

HTML:

<a class="amazon-link">Go to Amazon</a>

CSS:

.amazon-link {
color:pink;
}

But for a mobile-friendly approach, we’d enhance our code to the following:

HTML:

<a class="amazon-link">Go to Amazon</a>

CSS:

.amazon-link {
color:pink;
}

@media (max-width: 320px) {
    .amazon-link {
    color:black;
    }
}

The addition of the @media block, called a “media query,” is what does the magic.

Essentially, this media query tells the browser to make the link black if the screen width is up to 320 pixels in width, but no larger.

And so, if the link were displayed on a smartphone with a screen width of 320 pixels or less, it would be displayed black. Otherwise, it’d be pink.

This is one example of using CSS3 media queries to alter the styling for a HTML element, based specifically on the screen width of the device. On a mobile-friendly website, there are usually many such media query styles, allowing the reformatting magic to just happen.

Some other things you can do with mobile-friendly media queries:

  • Display or hide HTML elements
  • Move elements to entirely different locations on a page
  • Cause an element to “stick” to a specific screen location, or make it “unstick.”
  • Change the size of an element to be larger, so that it’s more visible. This can apply to text, images, and many other things.
  • Remove or add padding.
  • The list goes on and on!

I hope, in a basic sense, this brief description has helped you to understand the behind-the-scenes operations where websites and web pages are concerned, as well as how mobile-friendly (smaller screen sizes) are handled.

We work with these languages every day at CNY Mobile Web, and can incorporate them into your current website, making it rearrange itself and resize on mobile, magically, keeping your visitors happy and coming back again and again.