Design 1 Design 2 Design 3

Ozean Media | Custom Web Design & Development Tricks

Presentation counts on the web, and to illustrate that point, we created three different designs for this site. Pay attention to how each aesthetic makes interacting with the site feel like a completely different experience. (Go ahead, cycle through the different designs right now.)

Kind of cool, huh?

Want to know how the three different designs are being swapped out? Like a magician too passionate about his craft to keep his tricks a secret, we'll cast aside the illusion and show you what's going on "behind the scenes".

HTML, CSS, and PHP

Modern websites are composed principally of two main technologies - HTML (Hypertext Markup Language) and CSS (Cascading Stylesheets). The purpose of HTML is to describe the meaning of a document, while CSS describes a document's appearance.

Our swapping trick here is accomplished through some clever use of CSS, as well as another server-side scripting language called PHP. We'll show you how it works.

What we're doing - (CSS) Cascading Stylesheets

HTML describes the meaning of a web site - it contains the literal text of a page, like the words you're reading right now. If you look at well-written HTML, it is extremely human-readable, looking more like plain English than code. (Want to see the HTML for this page? Right-click and select "view Source" from the context menu.)

A style sheet is a document that instructs a browser how to render a given HTML page. Multiple style sheets can be attached to an HTML document, and by switching through them a web developer can make what looks like many different web pages out of only a single page of HTML. This was famously illustrated by the CSS Zen Garden. CSS looks much more like code than plain English, because CSS contains no content that humans were ever meant to read. (Want to see the stylesheet for this design? Click here.)

So, if you haven't guessed it, all we're doing here is actually pretty simple. We're just loading in different stylesheets for the HTML pages that make up this site.

How we're doing it - PHP

OK, maybe it's not that simple. The next obvious question, then, is "how are we aware of which design you've chosen?" The answer lies in a scripting language called PHP. (Interestingly enough, PHP is a recursive acronymn that stands for itself. PHP stands for PHP - Hypertext Preprocessor.)

Look up in your address bar. If you've chosen a style other than the default (or chosen a style then chosen the default again), you'll see ?style=designN appended to the end, where N represents 1, 2, or 3. All of that stuff beginning with the ? to the end is called a query string. Query strings can be used to pass variables to PHP, and that's precisely what we're doing.

When you click on one of the links that changes the design of the page, you're changing the query string that is being passed to PHP. On the server-side (meaning, before you're able to view the page), PHP determines which design you're trying to view, and loads in the appropriate stylesheet.

The end result is what you see here - three websites in one. Cool, huh?

We also take this chance to remind you, do not let our Gainesville, FL location fool you. We digitally travel all over the world! In fact, we have done work throughout Florida in cities such as Jacksonville, Orlando, Tampa, & Miami. In addition, Ozean Interactive Media has performed work for clients throughout the southeast United States including Georgia & Alabama.

Contact us today!(352) 376-0505 Finally,GO GATORS! (you just knew we had to slide that in, especially with our advertising agency being located in Gainesville,FL!)

Please enjoy our web site! After all, it was designed & developed for the web especially with you in mind!