As Rachel discussed last week, it was very exciting for us to update our company’s web design to something more bold, fresh, and current. Finally being able to devote the necessary time to our own website was a refreshing and exhilarating process.
Another area that demanded a lot of our attention was the build. With almost any redesign, the ultimate goal is not only to improve the look and feel of the website, but also the underlying code. In the same way design elements can become outdated, certain coding practices can be improved as new technology is developed. Several of these new development techniques that were utilized in our Internet marketing agency’s redesign were responsive web design, HTML5 and CSS3, and icon fonts.
Responsive Web Design
As I’m sure you are now aware, everyone is talking about responsive web design (RWD), why it’s great, and why you need it. It’s kind of taken the web development world by storm. If you have no idea what I’m talking about, here’s the definition from Wikipedia:
“Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”
Now, if this is the first you are hearing of it, you might be thinking, “Hey. I’ve seen ‘mobile websites’ for years. Why is this new? Leave me alone, jerk.” Well, you’re right. Mobile websites have been around for years, but not responsive websites. (Also, you’re sort of mean for calling me a jerk.)
The main difference between mobile websites and responsive websites is the way devices are targeted. A mobile website, for example, might target an iPhone, Android, or even something as specific as an LG VN270. The telltale sign of a mobile website is in the domain. One example is http://en.m.wikipedia.org/—note the “m”, signifying mobile. I’ve even seen sites with more specific subdomains, like http://iphone.domain.com and http://android.domain.com.
There is technically nothing wrong with this method (sometimes, actually, there might be a good reason why you would want this) however with the advent of responsive design, an entirely new way of targeting devices was made available to developers. Instead of worrying about specific devices, we worry instead about viewport dimensions. This amazing new technique completely ignores what type of device is being used to view the website and instead focuses on what size viewport (or, screen) the device has. The main benefits of this are as follows:
- Since we no longer care what the device is, we don’t have to worry about maintaining a script to keep track of and target new devices (i.e., tomorrow Amazon comes out with the Kindle Blaze HD X7, which is some weird size no one has ever seen before).
- Since we are using viewport dimensions instead of mobile-detection scripts, we can spend our time designing layouts that will work on any size device—all devices that are available today, and any new device that might become available in the future.
- Also, since we aren’t using mobile-detection scripts, we can serve responsive designs to desktop browsers as well (actually, this is how I primarily develop and test websites as I am building them). If you are reading this article on a desktop or laptop computer, you can see what I mean by simply resizing your browser window and watching as the layout CHANGES BEFORE YOUR VERY EYES. I know, it seems magical.
If you are on a mobile device, or just don’t feel like resizing your browser, here is an example of how our Internet marketing agency’s new website adapts to several popular devices:
HTML5 & CSS3
Technically, responsive design is all made possible by a CSS3 technology called media queries. When it really comes down to it, HTML5 and CSS3 are the ones responsible for all this amazing stuff.
Whether you realized it or not, you’ve been using HTML and CSS every day for years. These are the languages that web developers use to write code—and, in turn, your browser uses to interpret and display websites. HTML5 and CSS3 are the latest specifications for these languages, and essentially this just means that they are the “newest versions”.
Tag, you’re HTML5
While there are a host of cool things available in HTML5, unfortunately most browsers do not support these features yet, so we’ll just have to wait to use them more frequently. What we can use, however, are the brand spanking new HTML5 tags, such as:
article, aside, figure, footer, header, hgroup, nav, section
If you aren’t a developer, you probably couldn’t care less about this. But I guarantee, if you are a developer, when you found out about these new tags you shed a single tear and did 17 backflips. Essentially, these new tags don’t affect anything on the frontend and are only used for increased semantics—but it’s an awesome increase.
Face to face with @font-face
After media queries, the next-most notable CSS3 addition might be @font-face. This allows us web developers to embed custom fonts in your web browser, opening the door to an almost unlimited array of typefaces. For years, the only fonts we could use on the web were a handful of web-safe selections. Arial, Helvetica, Times New Roman, Palatino, Verdana, Geneva—if these typefaces sound familiar, it’s probably because you’ve seen or used them on the web at least a billion times.
Another spectacular addition to the developer’s arsenal are icon fonts. Building on @font-face and its ability to embed custom fonts, icon fonts can also be used in any web browser, but instead of displaying letters, they display—you guessed it—icons.
There are 2 main benefits of these guys:
- Using a font to display icons instead of images cuts down on the total filesize of your site and increases page speed (this is especially important for mobile devices).
- The visual style of the icons can be changed very quickly and easily, which reduces development time and increases overall happiness.
A great example of these advantages is on our new Solutions page. Here, as you hover each solution, you’ll notice that the icon changes color and increases in size. This was done completely through CSS and did not require any additional trickery.
With our redesign, we really tried to leverage icon fonts as much as possible and, believe it or not, almost all the icons used in our new site are fonts—not images.
Next week: “A Prager Redesign, Part 3: The Optimization”