By: Chad Bell

Modern Techniques and Technologies in Web Design

Leveraging modern techniques in web design will not only keep your site up to up to speed with your competition, but it will also protect your investment. Let’s take a look at some of the latest technologies being used today:

HTML5

Another modern technique in web design is HTML5 and it is the new standard for website design. The previous version of HTML, HTML 4.01, came out in 1999. A lot has changed in web design since then, but first we need to understand that HTML5 is more than just a revision on the original markup; it’s a combination of new HTML , a new iteration of CSS (CSS3), and Javascript. The only thing that needs to take place to make the transition to HTML5 is to change your doctype from:

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”

To:

!DOCTYPE HTML

Some browsers have been slow to adapt the new technology (specifically Internet Explorer <v8), but all major browsers and devices have since announced that this is the new standard.

HTML5 also promotes the use of Scalable Vector Graphics. SVG are an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. This literally means that images can be generated by a line of code. The benefit of using SVG’s are not only speed (compared to traditional jpeg’s or png’s), but also that just like the name implies they can be scaled up, or down, without compromising quality or resolution.

CSS3

Cascading Style Sheet technology is used by web developers to separate content of the web pages from its design. It’s a series separate files that specifically control the aesthetic principles of your website. Style sheets have existed in one form or another since the beginnings of SGML in the 1980s, but since most modern browsers and devices are dropping support for Adobe Flash it has become increasingly important for animations and effects.

Responsive Technologies (browser and device agnostic design) have been become increasingly dependent on CSS3 because of the vast amount of powerful selectors. For example, 5 years ago you would define the width of a column by an exact number of pixels. For example, “width: 500px” is now written as “width: 50%”, or “max-width: 500px” meaning that regardless of the screen size the column would adapt to the elements around it.

JQuery (Javascript Library)

Javascript was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. More recently, however, it has become common in both game development, and rich web experiences.

JQuery is modern library of Javascript actions that are called by HTML elements. For example, if you wanted to make an element fade in on the page you could call this with a simple “.fadeIn()” within your Javascript document. Previously, this would have been achieved by using Adobe Flash, but as mentioned earlier, support for Flash is slowly fading away.