About this site

I launched this site in May of 2013. I was looking to rebrand my web design business and wanted the new site to reflect my personal style a little more as well as showcase some of the new techniques in front end web development. Browser support has been increasing for CSS3 and HTML5 and with the emergence of script libraries like modernizr, adoption has grown rapidly over the past year. This will help to create an overall faster, easier to use web. With HTML5 adoption we can provide better semantic markup. With CSS3 adoption we can reduce dependency on images and create websites which are more responsive and optimized for mobile environments. Combine CSS3 with the use of javascript and jQuery and you can start to achieve things which were once only achievable through the use of Flash.

Above you’ll see pictured what the new site looks like in mobile portrait and mobile landscape modes. I’ve never really been a fan of using a separate template on a mobile subdomain for mobile optimization (although it does have its place). Instead, this site utilizes CSS3 media queries which allow me to define different sets of style rules based on the current width of the browser. Hold the phone in portrait mode and you get a mobile optimized layout, turn it to landscape mode and you get the full site. In addition to this, and as you’ll see in the video below, I can also optimize the display for varying browser widths for enhanced viewing on a laptop or desktop.

Increasing site speed/performance

Improve user experience and conversion rates by speeding up your site.

“Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, according to a Google study. The same article reports Amazon found that every additional 100 milliseconds of load time decreased sales by 1 percent. Users expect pages to load in two seconds—and after three seconds, up to 40 percent will simply leave.” – Source: Lara Swanson, A List Apart

Continue reading →

HTML5

The goal of HTML5 is to provide more easily readable code for humans and computers through the increased use of semantic markup. Here’s a look at some of the new elements and features from HTML5.

<doctype>

Simplified doctype, language tags.

<head>

Simplified character encoding and style sheet references.

Continue reading →

CSS3

With CSS3 we can achieve a lot of cool design effects that were once only possible through the use of image creation in programs like Photoshop. We can even do some neat animations. Here’s a handy chart for referencing browser support of CSS3 properties (it’s mostly IE8 and below you have to worry about).

Create rounded corners with border-radius

.ex-round {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Box shadows

syntax: x y blur color // syntax: inset x y blur color (inner shadow)

.ex-shadow {
-webkit-box-shadow: 4px 4px 5px #282b1f;
-moz-box-shadow: 4px 4px 5px #282b1f;
box-shadow: 4px 4px 5px #282b1f;
}

Continue reading →

CSS: Pseudo Class Selectors

I’ll be covering a lot more in this blog post later on, but first I wanted to briefly go over some of the CSS pseudo class selectors I’ve been using more frequently. If you work with CSS, you’re probably familiar with these 4 pseudo class selectors: a:link, a:active, a:visited and a:hover; which have been in use for quite some time and have wide browser support. Many of the other pseudo class selectors are supported in most browsers except IE8 and below.

With wider adoption of the position/number pseudo class selectors we can achieve things in our style sheet that may have only been possible with server side programming in the past. In the below example, I have selected the 2nd paragraph within #content and applied styles to that paragraph only.

#content p:nth-child(2){line-height:20px;color:#990000;}

With the example below, I have set every 5th list element to have a text color of black. “(5*0)+5=5”, “(5*1)+5=10”, “(5*2)+5=15” etc.

ul li:nth-child(5n+5) {  
  color: #000000;
}

Continue reading →