We’ve mentioned responsive web design in a few of our blog entries in the past, and with 2013 being the year of responsive web design, we’d like to take a closer look into the concept and what’s behind it.

Why is it so important?

In the past, we only needed to be concerned with one layout and design – for desktop displays. Sites just needed to look good for monitors with large resolutions and be easily navigable by mouse.

With the progression and proliferation of smartphone technology, a website design that can accommodate all screen sizes and resolutions (in addition to being more touch-friendly) is crucial. The term “mobile” now also encompasses all types of devices with varying screen sizes, not just mobile phones. Netbooks, tablets, mini-tablets and even “phablets” (phone/tablets) all add to this gradient.

RWD aims to deliver usable layouts on desktops, laptops, tablets and mobile screensizes and everything in between.

Brand identity and general user experience are also valuable things that a company wants to cultivate. If a user visits a site on a desktop and then on a mobile, the experiences on both should be consistent. A site that looks beautiful on a desktop, yet doesn’t deliver the same aesthetic or functionality on a mobile device, fails to connect with that growing market.

Up until recently, developers were left with a few choices to ensure users had good mobile experiences:

• Create a separate template for mobile users (typically m.domain.com or .mobi)
• Create an Android/iPhone app

IKEA has 3 separate ways to present content to their users – A desktop website, a mobile version of the site, and an actual downloadable app

Each of these solutions requires developers to code entirely separate eco-systems, and managing them all is no easy task. A change in one template requires the same change to be made on the other template. App development makes things even more complicated, with different platforms, versions and updates to consider.

Responsive Web Design works to provide one, unified template to handle layout and design for all devices and screen-sizes.

So how does it work?

Simply put, the CSS3 attribute  media queries  allows developers to apply styles based on certain resolutions.

Time Magazine’s website design accommodates all screen sizes and dimensions.

If a  max-device-width  of 480px is reached, for example (that is, if a device only has a screen size of 480px), certain elements, modules, and blocks of contents and be shifted around, adjusted in size or even hidden to accommodate the new screen size.

All of this is done solely through CSS, so there is no extra library or code necessary.

Examples

Media queries shows some very good examples of how responsive design can appear:

• World Wildlife Federation
• Time Magazine
• Starbucks

We also designed and developed a responsive website ourselves!

Keeping up with your visitors

If you want to make sure your site’s visitors are able to get the full web experience you’re offering them, no matter where they are or how they’re accessing your site, it might be time to look into responsive design. Get in touch and find out how GT can help.

Part of being a hosting provider is dealing with everybody’s least favourite part of the internet: spam. Unlike most folks, we have to deal not only with incoming spam, but also outgoing spam which our servers may be sending. It’s important to handle spam complaints quickly, not only for the general good of the net, but because one server’s spamming may result in multiple servers being added to spam blocklists, affecting other hosting customers. Here’s how we keep an eye out for spam…

Monitoring Spam

There are several different ways in which we monitor and track the e-mail that originates from our network.

• Reputation: Service providers such as Senderscore and Microsoft publish IP reputation reports, based on the ratio of spam to legitimate e-mail they observe coming from specific addresses. We track and graph those scores for both individual machines and aggregated across our entire network, so that it becomes apparent if our reputation is becoming affected for any reason.


Tracking Spam Scores.

• Realtime Black Lists: RBLs are lists of known spam-heavy servers that are published online by various anti-spam groups. Getting published on a major RBL will quickly result in any e-mail you send being marked as spam. If you allow spammers to remain on your network, most RBLs will have no problem adding an entire hosting provider to their blacklist. As such, it’s important that we keep tabs on RBLs and take action as required immediately. Thankfully, we’ve only ever had to terminate service for one client due to spamming.
• Feedback Loops: Larger e-mail providers (like AOL and Hotmail) allow internet providers to subscribe to feedback loops for their IP space. This means that if a user clicks on “Report spam” in their webmail for an e-mail which came from us, we’ll receive notification about it and can investigate further.

Since IP addresses aren’t specific to a single server, we also make sure to track all of these statistics even if an IP is moved from one customer to another. This way we can make sure that a new customer isn’t allocated a tainted IP that has had spam issues in the past.

Logging and investigating spam complaints.

Managing Spam Compaints

Here are the three most common types of spam complaints we receive.

• Hacked account: A customer’s e-mail account has been compromised (by malware, unsecure wifi, or another security problem) and is now being used to send out spam. In these cases, we’ll immediately change the password and remove all e-mails from the outgoing mail queue. We’ll then follow up with the customer to advice them to run a fresh virus scan, enable encryption and make any other changes that may prevent this from happening again.
• Website forms: This is usually caused by “refer a friend” style forms which allow a user to enter an e-mail address or comment to a page without having CAPTCHAs or login requirements to deter spammers. Usually, rectifying this requires involvement from the customer as it requires site development, so we’ll clean out what we can and then contact the customer.
• Malware: Occasionally we see a website that’s been compromised due to outdated or buggy applications, in which hackers have uploaded a script to send spam. In these cases, we immediately start forensic examinations to track down which script gave the hackers access, and isolate what files they may have changed or uploaded. Once we feel comfortable that we’ve found everything, we’ll move the suspect files into a secure location, and then start restoring known clean files from backups. Customer involvement is also important in making sure that the initial attack vector is closed by upgrading or removing the scripts that were used to gain access.

Additionally, we have some customers who send messages to mailing lists but are being flagged for spam complaints. In these cases, we work with the customer to make sure that all e-mail addresses are double opt-in and have proper unsubscribe links and headers. If the customer isn’t interested in being a good netizen and making sure users actually want to receive their e-mail, we will remove them from our network.

Keeping Our Network Spam Free For Our Customers

We’re committed to helping our customers develop and build their online presences and reputations. Making sure spam doesn’t get in the way of that development is just one of the ways we do that. Read more about the other advantages that come with hosting with us.

Giving a new website a unified and coherent visual style is crucial to creating both an engaging and informative web experience. In this post, GT software developer Alister West gives some insight into the role style guides play in ensuring that a site’s visual elements are uniform and attractive.

When moving onto a new web project I always look to create a quick website style guide (SG). An SG is like a front-end cheat-sheet for a website. Having a quick reference for key elements means more time getting things done and less time fiddling around. An SG can cover anything and everything, from CSS class naming conventions, to which DocType or JavaScript libraries to use. For most projects, though, I usually whip up a quick and dirty SG aimed at formalizing a site’s major elements with the intention of getting front-end content done efficiently, while retaining site consistency.

Branding Guidelines

Traditionally SGs are created for brand protection, and are more focused on building an overall sense of design and experience, rather than just layout and styling. Brand guidelines are made with both internal departments and external partners in mind, creating a consistent style across a range of teams, projects and media.

To get a sense of how SGs operate in tandem with branding in the upper echelons of development, take a look at these SGs: Adobe, Apple, Blackberry, Skype.

Various style guides

During a website redesign process, design agencies will usually produce an SG as a deliverable on a website redesign. These are great, but a design reference can become quickly out of date as the site evolves. What you need is a quick SG for developers getting things done on the ground.

Website Cohesion

In the case of small sites, you probably don’t have large archives of design references. But the reasoning and motivation behind creating corporate brand guidelines and designer-site style-guides are the same. Consistent fonts, layout and colouring help create a more cohesive site. A new page should still feel like part of the site and a new side-bar should fit in naturally. Reusing existing styles and layout helps the look and feel of new features fit in.

After using a few SGs I grew to love them and you will too.

Make Your Own Style Guide

Creating a site SG is easy! Most WordPress themes have a ‘preview’ page which is essentially a SG. For example the popular theme zBench has a comprehensive list of most HTML tags as well as including main section blocks.

The zBench theme’s elements.

A site will typically have only a few types of pages (home, list, detailed, search, etc.), and it’s easy to mock-up a few layout options. You don’t want to do too much – you want it to be useful without taking up too much time. It should cover typography (fonts, sizes, spacing), layout and colouring with a focus on the areas you will be working on. Don’t forget to include common types of web-specific styles, like a:hover and a:visited.

CSS frameworks like Blueprint have good demo pages where you can quickly become familiar with their main elements. The aim of SGs is the same. See what you want before you implement it.

A sample Blueprint page.

Nothing To Stop You

Having an SG handy will get you up to speed on a project’s elements quickly so you can dive straight into your new project. Confidently create new elements and add functionality, knowing that you don’t need to create specific CSS styles. Do as little or as much as you want, but the most important thing is to create a reference you will use.

Useful Links

Here are some helpful links to get you started on your own style guide:

• Smashing Magazine: Designing Style Guidelines for Brands and Websites
• Using Style Guide To Design A Website
• Simple style guide example from zBench