Home » google

Tag: google

The Content-Driven Design Process

Content-driven design is the process of using the content that you have to determine the design and layout of the site. For decades, it has been the normal order of things to create a great-looking design based upon demographic keywords (mood, feeling, industry, etc.) and then create content to fit that space.

Though there is nothing wrong with this, per se, it leads to a lot of frustration between designer and company. The designer works hard to create a strong design only to see compromise after compromise until his design is no longer recognizable. The flip side is that the design is so great that no one wants to compromise it with the content. Therefore, the company isn’t always able to say what it needs to in order to reach the target customer.

In comes content-driven design. Start with the content first and then let that lead the direction, feeling, mood, etc. of the design. It’s a more harmonious way to design for the Web, ensuring that both the design and the content work together instead of against one another.

There are two parts to content-driven design: content and design.

Continue reading

Speed Test Case Study: Upstairs Hair Affair

Q: Why care about how fast a website loads?

A: One of the major ranking factors in the Google Search algorithm is how fast a page loads.

Page load times also can negatively affect the user experience of your site. If it doesn’t load quickly enough, visitors will abandon the page.

Here is a speed test case study for one of my recently completed projects: upstairshairaffair.com.

pageLoadCaseStudy1This speed test is made using the tool at pingdom.com. What I really love about this speed test is that I can see how the page load speed performs over time.

Before we get into how we helped this client bring her load time down from 6s to 1s, it should be noted that the design and development of a website are only a part of the speed equation. In a test like this one, you will quickly see that your hosting server also plays a huge part in the load speed of pages. The more photos, videos, or interactive elements you have on a page, the slower the load times, as well. A good web designer will keep this in mind when developing a site. The site here consistently comes in at 1-2 seconds across all of the pages on the site. The fastest page to load is actually the image gallery, so it’s possible to have media and still load a page quickly.

In this image, we can see that I first tested the site at the end of October. It took 6.65 seconds for it to load the home page. After a complete redesign of the website, including a switch to the fantastic Site 5 hosting servers, the load time came down to under 1s (see image above). That’s a full 5s off of the original home page load time!

pageLoadCaseStudy3This image gets to the heart of the speed issue. It wasn’t like I went through and hacked out every image or process on the website. I didn’t strip it down to nothing. In fact, there is a larger hero image on the front page now than before! What happened is that the size of the page increased but the request count decreased. That, with a quicker response from the server, saved this site a lot of time loading. Choosing simplicity over complexity and focusing the message of the page greatly decreased the loading time of the site. It also allowed us to put heavier content on the front page without making any sacrifices.

pageLoadCaseStudy4Finally, here is the overall page speed score from this test. It went up almost 10 points from the time I checked the page load time in October.

Conclusion

So, what does all this mean? There are several takeaways from this case study on page load speeds.

  1. A good web host is vital to a fast website (I recommend Site5.com)
  2. It is possible to have media and interactive elements without slowing page load to a crawl
  3. If you simplify and focus what is happening on each page, it will greatly decrease the page load time
  4. Simplifying processes, not necessarily elements, on each page will speed up a website