Survival of the Fittest: Conquering Responsive Website Design

With the proliferation of smartphones and tablets today, serving the needs of mobile browsers is no longer acondary consideration when it comes to designing (or redesigning) your website. From the ground up, it’s critically important to ensure that you are building a platform that will look beautiful and perform elegantly no matter where or how a user might access it. While you can create a dedicated mobile site or app, responsive design offers a smarter, more flexible, more agile solution that will ultimately deliver a greater long-term return for your investment.

Defining responsive design

Responsive design is the concept of building a website so that the layout of the site adapts and changes according to the resolution of the user’s browser. Using this approach, you can build a single site that will look just as good on a monitor that’s 2048 pixels by 1080 pixels as it will on an iPhone that’s 320 pixels by 480 pixels and all browser sizes in between without the need to build a separate dedicated mobile version of your website. Ethan Marcotte, the forerunner in the field, identifies the three key ingredients of responsive design as follows:

• Fluid grids
• Flexible images
• Media queries

Wait, fluid what? Media what? Let’s take a step back and define these terms in plain English. Every website is developed based on a grid that governs the scale of and relative position of objects (such as navigation menus, images and text) to one another. A fluid grid has the ability to shift and reposition select elements of the site based on certain conditions in order to preserve the properly defined scale for layout, size and spacing. “Flexible images” mean that the images contained within the site’s design should scale in size and shift in position according to the dimensions of the device being used to access the site (larger images on large displays, smaller ones on phone screens, etc.) And media queries? Media queries are used to intelligently detect the size of the browser window and the device being used to access the site and bring back the correct layout for optimal viewing and navigation according to those parameters. But these technical elements only govern the mechanics of the site. What ultimately determines the success of a website that’s built on a responsive design framework is its ability to provide a user interface that’s both visually pleasing and easy to use. After all, responsive design isn't only about resizing stuff to fit within different screen resolutions; it’s about presenting users with a the best possible experience, both in terms of layout and content. With that in mind, here are five key UX/UI factors that must be taken into consideration in order to maintain the integrity of the user interface and protect the quality of the user experience when employing a responsive design framework.

Catering to the needs of visitors

Users accessing your website from different devices have different needs. For example, if someone visits your website from their iPad during their daily commute on the train, they’re only going to dig so deep. For example, while they’ll likely be interested in perusing your latest blog post, they’re not going to be looking for the bios of your board of directors or your privacy policy. You must think about each type of user that will be visiting your site and let their needs and interests dictate the way your site molds and conforms itself to the size of their browser or device.

Intuitiveness

Being innovative is a good thing; being too innovative is not. If, for instance, you decide to change the color of hyperlinks to an indistinguishable shade of black or invent new navigational conventions that perplex your visitors, you’ll send them running in the opposite direction,and the design will be a total failure. The purpose of responsive web design is to empower users to visit your website and browse freely and according to the conventions that are most natural and familiar to them, irrespective of the device they are using.

Touchability

Who can refute the fact that touchscreens are growing more popular with every passing day? Almost all major smartphones and tablets use touchscreen interfaces, and even certain laptops and desktops are being offered with touch functionality. Touchscreens needs to be treated differently. For example, in the world of the touchscreen, there is no such thing as a hover state. If, for example, you have “previous” and “next” buttons that would normally appear only when a mouse rolls over them, those elements would be unavailable to your touchscreen users. For finger-friendly navigation, all elements must be big, bold and obvious. Buttons that require users to mouse over them to get a sense of action must be replaced with style enhancements that draw attention to their “pressability.” It’s also a good idea when catering to touchscreen users to keep the navigation or sub-navigation menu to the right. Why? Because the majority of your users will be right-handed, so the menus will be more conveniently accessible if they’re on the right rather than on the top or left.

Images

While layouts, structural elements and text can be made flexible, images require special attention. Improper alignment of images can ruin even the greatest of designs. Images need to be automatically adjusted to ensure that the website looks awesome in either portrait or landscape mode (remember: most portable devices nowadays can switch instantaneously between views, depending on the user's whims and wishes). Also, when resizing images on the basis of the screen resolution of the device, care needs to be taken so that the images do not lose their quality. If a given image contains the logo or the name of the website, it needs to be given prominence, whereas footer images can take a back seat. The best is to load the images in their original size, unless the viewing area becomes too narrow for the purpose. When that happens, it means the user is on a mobile device, and the image needs to be narrowed in accordance with the screen width. This is the very essence of how smart responsive web design works.

What to show (and what to hide)

With responsive design, we have the ability to rearrange web elements and make every thing fit on the screen, no matter how small it is. However, making every single aspect of a normal web page available to mobile users is not only unnecessary but it can render your site practically unusable on smaller screens. For mobile devices, navigation, content and functionality must be pared down significantly to focus on those features that are most useful to users while on the go. For example, while mobile users frequently comparison shop on their phones, they might not be as likely to actually go through the entire purchase process on their handheld device. Therefore, while product information and pricing is key, e-commerce options should be extremely streamlined.

A Showcase of Responsive Design

To demonstrate just how effective responsive can be, let’s take a look at a few examples of companies that have embraced this new approach in building their sites. In each example, the full version of the site is show first, followed by a version as it appears on a mobile device.

Hicksdesign

Art Equals Work

City Crawlers: Berlin

8Faces

---

Buyer Beware: Your CARFAX Guide to Choosing a Web Domain Name

After days of brainstorming and hours of searching, you’ve finally found the perfect domain for your business – and it’s even a “dot com.” Win! Before you hit the checkout button, be forewarned: the domain you’re about to purchase may a cesspool of spam and other nasties. And don’t count on your registrar to tell you that in advance. Unlike the purchase of a vehicle, used domains don’t come with a Carfax to tell you its mileage, provide insight into its value and essentially advise how well the previous owner treated his or her property. In fact, you won’t even necessarily be notified that the domain has a previous owner! So, how do you determine whether your domain is pre-owned? And if so, how do you uncover any potential SEO risks? Here’s your “Carfax” guide to buying a web domain name:

Start with WHOIS

When you register a domain for the first time, the information you furnish to the registrar is stored in a database. Except in the case of a private registration, that information is publicly available and accessible using a query called WHOIS. When used, WHOIS returns database information so that the site’s domain name, owner, creation date and expiration date, for example, can be viewed. If you’re purchasing your domain from an auction or directly from another consumer, then your domain was obviously pre-owned. However, if you are utilizing a registrar like GoDaddy or NameCheap, then you will need the WHOIS from domaintools.com to pinpoint the domain’s birth date. Enter your newfound domain into http://whois.domaintools.com WHOIS LOOKUP. If the domain has had one or more previous owners, you will see a Registrar History, NS History (Name Server), IP History and Whois History. Next to Whois History is the domain’s “birthday.” If no Whois or Registrar history is shown, then you are the first person to register this URL. But don’t get your hopes up too fast. Even new, unused domains can carry a shoddy SEO history.

Provide some context with web selfies

In its WaybackMachine, web.archive.org provides website snapshots over time. These selfies can provide contextual understanding of how your website was used as far back as 1996. This is particularly useful for understanding anchor text and backlinks.

New or used, check for backlinks

Backlinks pass link juice to a website, which can positively or negatively affect a site’s SEO metrics including PageRank (PR), Domain Authority (DA) and Trust Flow. Even domains without a birthday may have inadvertently acquired links. This is particularly common if a website’s name is close to the spelling of another more popular site. So with each domain purchase, you may be inheriting a blank slate, a goldmine or a deathtrap. As a starting place, OpenSiteExplorer.com or BulkDaChecker.com will provide a quick DA check. DA is Moz’s “best prediction for how a website will perform in search engine rankings.” Many elements, including the domain’s age and its backlinks, are factored into determining DA. And, the higher the DA the more likely you will rank highly in Google SERP. A DA of 1 (out of 100) usually suggests a site has done no link building. However, the only way to be certain is to investigate further with MajesticSEO.com (in both Fresh and Historic Indexes) or ahrefs.com – both websites offer free and paid subscription options. At first glance, the information can be overwhelming.  So, here are the tabs/pages you need to explore:

Anchor Text

The purpose of anchor text is to give readers clues about a link’s content. When a site has been spammed or intentionally implemented Black Hat SEO, the anchor text is usually a dead giveaway. Irrelevant anchors If the domain you’re interested in purchasing is cell-phone-provider-online.com, for example, “Versace shoes” anchor text does not make sense. If you happen to purchase this domain, you’ll want to disavow or manually request removal of these links. Poker, porn, payday loan or prescription anchors Usually bad company does not come alone – if you see one Viagra or Online Poker anchor text, you’ll see another. Also watch for unexpected women’s names like Lucinda and Lolita; this typically indicates pornography backlinks. Non-English anchors Unless the site previously targeted non-English-speaking customers, you should not see any foreign anchor text. Repetition of exact-match anchor When a site acquires links naturally, it is rare to find repetition of the same anchor text over multiple sites.  For example, if you sell desk chairs, one website may link to you from their content using your domain name, another will use “office chairs,” and a third may lead in customers with the word “website.”  If the occurrence of a single anchor text over multiple sites stands out to you as appearing unnatural, then it likely is – and this may have been the result of old-school link building tactics that are now being penalized.

Referring Domains

A referring domain is a site that links to your domain. On both MajesticSEO and ahrefs.com, referring domains are sorted in order by number of links for your convenience. Unnatural distribution of links As a general rule of thumb: if greater than 50 percent of your links come from less than 10 percent of your referring domains, then this is a red flag. As an example, let’s say you have 5,000 total links. Of that 5,000, 3,000 come from a single domain, another 1,000 are from a second domain followed by one, two and three links from a series of other domains. This concentration of links from one or two domains may indicate the presence of a link network or site-wide links – two things that will position you for Google penalties. Foreign top-level domains (TLD) When in high volume, foreign TLDs like .ru, .br, and .fr will point to spam. You will likely want to disavow these domains.

Follow-to-nofollow ratio

A quick check of the follow-to-nofollow ratio (available from MajesticSEO and ahrefs dashboards) will help identify if your site has accumulated comment, forum or user-generated profile spam. A link portfolio of more than 50% nofollow links is worth additional investigation. In such a case, dig deeper into the actual nofollow links to determine their origin.

Check for Google penalty indicators

SEMRush is a favorite tool among many Internet marketers. It’s known primarily for its support of keyword research. However, with a little deductive reasoning, you can use those same tools to identify if a site has been penalized. Here are the dates you’ll need from the exercises above: From WHOIS:

• Use domain birthday (creation) as your starting point
• Note dates where there were changes in domain ownership

From the WaybackMachine:

• Note any redesigns or periods of maintenance

From Moz:

• Note dates of major Google algorithm changes

From the SEMRush.com home page, enter your domain. In the traffic viewer, select “2 years.” A normal traffic pattern for a website will appear similar to sine wave with natural dips for seasonality and having an upward-and-to-the-right trend. If your two-year view does not show enough data to see this, expand to “All Time.” Dips in organic traffic are expected when a site is down over along period for maintenance, for redesign or for change in ownership. If in addition to these natural changes you still a significant drop in organic traffic, Google may have penalized the site. And while there is no way to confirm the penalty without access to the site’s original Webmaster Tools, traffic patterns have historically proven the best litmus test – rapgenius.com is a recent example.

Is the website safe?

Worst than penalties is malicious content. A site marked for hosting malware will have been blacklisted by search engines, Internet browsers and the like – and is therefore not a domain you should invest in. Use Google’s Safe Browsing to determine if your future domain has been sited for hosting malware in the last 90 days. To inspect, replace yahoo.com in the link below with your domain. http://www.google.com/safebrowsing/diagnostic?site=yahoo.com If you decide to take on a site with a soiled SEO history, get ready for many rounds of research, link removal requests and inclusion requests. Based on your findings, you’ll have to determine if it’s worth it. If it’s the domain of a lifetime, then maybe it is.  But if not, there are many more domains out there, and with a little bit of time, you can find the right one for you.

---