The third of five blog posts about what we learned while redesigning our own website. You can read the first and second posts.
You’ve probably said this before as you were starting a new project and staring at the pile of work ahead of you.
That’s what it was like for one of our developers when we handed our new website over to him for coding.
You see, it was our most ambitious website project to date.
In fact, it was a lot like climbing a tall mountain:
- It was demanding. It required more templates—and thus more time—than any website project we’ve done before.
- It was unfamiliar territory. It included new features that required research to implement.
- It required specialized tools. In this case, that meant the right snippets of code rather than ice axes or crampons.
Here are a few examples of key features that made the climb even steeper (and the end-result even sweeter):
An overlay menu takes over the whole page when you click on MENU. The menu is transparent, allowing you to still see the page you’re on. (Check it out—it’s on the top right-hand corner.)
- Obstacle #1: Getting the overlay menu to fit on all devices—from desktop to mobile to tablets—while still showing all of the main navigation, and showing it in a font that’s large enough to read
- Approach: Using CSS for background opacity and CSS3 media queries to detect the height of the user’s screen so the font sizes accordingly
When you roll your mouse over the employee photos on the TEAM page, an animated GIF appears. (Take a look—it’s fun.)
- Obstacle #1: Getting each GIF sized according to the right dimensions while still maintaining a decent image quality
- Approach: Optimizing the images by compressing them as much as possible without sacrificing image quality
- Obstacle #2: Getting the page to load as efficiently as possible, which was difficult due to the large file size of the GIFs on the page
- Approach: Storing the GIFs out on a Content Delivery Network (CDN) to distribute bandwidth and allow the GIFs to download in parallel to other files
The homepage plays an HTML5 video with scenes from our office. (Watch the video—it’s a cool effect.)
- Obstacle #1: Getting the video to size consistently from device to device
- Approach: Making the video responsive so it can expand or shrink to fill your screen
- Obstacle #2: Some mobile devices and browsers don’t support HTML5 video
- Approach: Displaying a still photo as the background image when on a mobile or tablet device, or when a slow internet connection speed is detected
A quality website is one that’s user-friendly for both humans and robots. Some behind-the-scenes code helps us optimize for the bots.
- Obstacle #1: Structuring the site’s code to help search engines better interpret content
- Approach: Using applicable schema tags (also known as rich snippets) to indicate certain types of content, including local, person, and blog tags
Reaching the Summit
Luckily for us, the developer made it look easy. And the view looks amazing.
Even if you don’t understand coding and how it works, you can appreciate the unique features that developers help make possible.
It’s those unique features that make your website stand out—and that help you ascend to the top of your industry.
Next up: We talk about testing and implementing
our new website.