Modern Techniques in Web Design

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:


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:




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.


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 San Francisco Based Web Design Agencymodern 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.


How Are Websites Designed?

Website Design Process: Mockup Designs

We know that one of the most exciting steps to building a website, for both designers and clients, is the Mockup Design process. After all, we can talk about to the functionality and graphics with words all day long, but most of us are visual learners.

In order to deliver a product as important as a client’s website, the appropriate time and resources have to be invested – internally as well as by the client. Internally, website mockups are brainstormed, designed, reviewed, and refined by the design and development teams. Once this is complete, clients are given the opportunity to provide feedback. Successful collaboration between the designer and client is highly dependent on the effectiveness of their communication.

Zen-Den-Web-Design-Magento-eCommerce-ThemeSo whenever possible, we present website mockups to our clients in person. This makes it possible to conduct a full walkthrough of the website’s design and functionalities, and to see and hear client reactions first hand for instant feedback.

Step 1. Click on the link(s) to view the mockup in a web browser (IE, Chrome, Firefox, or Safari).

Step 2. In your web browser, hover over the mockup design to display the magnifying glass icon and left-click once with your mouse to expand the image to 100% (full-size). 

Step 3. View the mockup design.

The team at Zen Den Web Design works closely with clients to create a visual identity that is unique to their business. Our custom designed logos and graphics help businesses of all sizes and industries establish their identity, gain visibility, and ultimately boost sales.