Techgage – Responding to Changes On The Internet

Not too long ago, Google made an announcement that mobile should be at the forefront of webpage design. Gone are the days of squeezing desktop based Internet browsing onto a 3-inch screen. To further this point, Google decided to make the rather controversial decision to effectively penalize sites that do not scale well on mobiles. Techgage was one of those sites in the cross-hair… but not anymore!

After a couple months of toying around, late nights, tears, blood, and one or two new bald patches, Techgage is now the proud owner of a ‘responsive’ website. Before we get into the nitty-gritty details, we’ll quickly guide you through what’s changed (and what hasn’t). First impression is, nothing should be different for desktop users, although some things will have been jiggled around a bit. However, if you feel so inclined, go grab the edge of your browser and begin to shrink it… notice what’s happening? Yup, it’s responding to the changes in the browser (or more precisely, the viewport).

Those of you with tablets, and most importantly, mobiles, are the ones that will notice the biggest differences. No longer will you need to zoom in and out in order to see what’s going on. That pesky side bar, gone. It’s all about the content being easy to read and navigate.

We still have plans to further improve things, such as a much needed gallery slider, as well as making menus more accessible on mobile. We are still hard at work to refresh some of the more dated parts of the site, such as the archive section. Those of you that despise light will be in for a treat soon as we roll out a new, dark theme.

We have introduced a couple other features as well, to further help those with poor connection speeds and data caps. First of all is the introduction of Lazy Loading. This prevents images from being downloaded until they are visible on the screen. This may result in a short delay with slow Internet connections before an image is visible. On top of this, a new feature within responsive design is the ability to scale images using the new <picture> element. This means that downloaded images will be similar to their visible size, rather than a downscale of a much larger image.

With the features out of the way, it’s time to bring up some of the details and explain how this was all achieved.

So what is Responsive Design?

You may have heard the term ‘responsive design’ thrown around a fair bit recently, so we’ll first give you a quick rundown of what it is and what it relates to. When developing for mobile websites, there are typically two paths to choose from. Building a specific, mobile version of a website with some clever source file swapping and media queries, or the responsive design approach. The former is fairly self explanatory, you build a website with a specific size in mind, typically mobiles of around 320×640. The catch comes with tablets, which version of the site do they see? Inevitably, web developers have to create a third website for tablets.

Responsive design gets around this issue of different levels, by building a website for all sizes. This means as new formats are introduced, the site can adapt without having to build a whole new profile. However, there are plenty of drawbacks, the most infuriating of all is a lack of absolute control over placement. Where you lack control, you gain in scalability. Content can be made to always fit the screen, regardless of its size. Elements are declared as proportions, percentages and relative ratios, rather than fixed widths.

Responsive design is not new though, and has been around some of the more bleeding-edge sites since around 2009. The reason it’s beginning to take off in such a big way recently, is due to the maturity of CSS3 and HTML5. What used to require a rather uncomfortable amount of JavaScript, JQuery, AJAX and pretty much any other web language, can now be done almost entirely with CSS3 media queries. It’s not perfect, but it’s getting there.

@media screen and (max-width : 800px) and (min-width : 500px){
.content ul.index > li{
width: 49%;
display: inline-block;
clear: none;
list-style-image: none;}
}

Because responsive is not perfect, and in fact relies on imperfection, there may be bugs with various layouts. While we have tried to cover as many devices as possible, we can’t test them all. With that, if you do find any issues, please get in contact or leave a comment below. If you don’t like certain aspects about the new layout on your mobile device, also let us know and we’ll try out best to accommodate. With that, enjoy the new responsive layout!