How to Arm Your Site for Every Screen and Every Platform: An Introduction to Responsive Website Design

What is 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. In plain English, employing responsive design allows you to 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 or iPhone-specific version of your website. The best way to get a feel for responsive design is to see it in action, and one of the best examples is the Lancaster University website. If you simply open the site in your desktop browser, you won’t immediately notice anything extraordinary. However, if you slowly adjust the size of your browser window, you’ll begin to see how the design adapts to the width of the window on the fly. The change is more than just a straightforward scaling effect; rather, certain key elements within the design shift and transform according to the resolution of the browser. For example, this is what the website looks at 1024 pixels wide. And this is what the website looks like at 640 pixels wide. As you compare the two, you’ll notice that in the smaller version, the two stats next to logo disappear, allowing the quick links, search bar and logo to fit into the width of the browser and remain usable. Also, the “Find a Course” box and the two information boxes are now displayed alongside “Latest News,” which preserves the usability of the tab-based navigation in the main feature. This is what the website looks like at 480 pixels wide. You’ll now notice that the primary navigation transforms from one row of six links to two rows of three links, which ensures that these links remain large enough to be easily pressed with a finger on a touchscreen phone. The quick links are reshaped into a drop-down-style menu that takes up less real estate on the screen but still allows the user to easily access these important links. The search box moves to the bottom of page, and the “Find a Course” box disappears and is replaced with a link to the course search page. On the main feature, the slider changes from tab-based to next/previous-style navigation.

Why is responsive design important?

As you can see from the Lancaster University example, adapting the layout of the site based on the browser’s resolution ensures that all content is easily accessible no matter where or how a user might be browsing. With the explosive growth in tablets and smartphones, IDC predicts that within the next four years, more people in the U.S. will access the Internet via mobile devices than via desktops or laptops. As a result, it’s important to take steps now to make sure that your website is not only accessible but easy to navigate and use on any device and any screen size in order to keep pace with the ever-changing browsing preferences of your clients and customers.

---

The Who, What, When, Why and How of Successful Email Marketing, Part II

Email marketing: it’s not the newest, shiniest weapon in your business growth arsenal. But there’s no denying that it’s still a highly efficient and cost-effective way of communicating with your existing customers as well as new prospects. But don’t let the low barrier to entry lull you into a false sense of security. There are certain fundamentals you must follow if you want to create a campaign that captivates and motivates versus one that is ignored and condemned to the trash folder. In part one of this series (http://www.famefoundry.com/11041/the-who-what-when-why-and-how-of-successful-email-marketing-part-i/), we examined the quality of the recipients to whom our campaigns are sent and solidified a strategy for when and why to send them to ensure that we do not overwhelm those recipients with messages that are unimportant or unnecessary. Now, we’ll turn our focus to the remaining two fundamentals of email marketing success: what we will say and how that message will be delivered.

The How

No matter which email marketing platform you use to create and send your campaign, all include templates that provide designated areas for content that can be easily edited. The issue with these templates, of course, is that they are, well, templates. As a result, when you use them, you run the risk that your emails will look nearly identical to others that your customers receive, and simply adding your logo is not enough to create real differentiation. As a result, used as-is, they can make your marketing campaigns look cheap and unprofessional. This is why customization is a must. All of these email templates are built with HTML, the same programming language used to construct websites. Behind the scenes are code and images that can be edited to create a more custom-tailored look and feel. Due to the highly technical nature of making modifications within the HTML code, this is probably not something you should DIY but rather entrust to your web development team. They can shape and refine these pre-existing templates or even create a completely unique template design from scratch that integrates seamlessly with all elements of your brand’s visual identity (i.e., your website, printed materials, etc.) and sets you apart your competitors. Whichever approach you choose, this represents a relatively small one-time investment that will pay great long-term dividends as you use your branded templates time and time again. Ideally, you’ll want to establish a few different email layouts that can be used for various purposes, such as newsletter-style content, major announcements and perhaps service alerts or other time-sensitive notifications. The template formats you require will of course depend on your business needs, but by having a few on-hand to choose from, you can ensure all of the email communication that you send reflects well upon your brand.

The What

Subject, subject, subject

No matter how beautifully designed your email might be, that design isn’t worth the pixels it’s transmitted on if your message goes straight to the trash unread. Your subject line is the make-or-break factor that will determine whether the recipient will grant you even just a few seconds of their precious time and attention. A line that’s boring and unimaginative provides zero motivation for them to give your message a second glance. One that’s too over-the-top screams “SPAM!” and is just as likely to be ignored. Subject lines that are too long, written in ALL CAPS, filled with exclamation marks or intentionally deceitful (e.g., including “Re:” to make the email appear as if it’s a direct reply to a message from the recipient) are guaranteed to work against you, so avoid them at all costs. Effective subject lines are neither vague nor dull. If you received an email with the nondescript subject line “News Update,” would you read it? Neither will your customers. Similarly, the subject line “April Customer Newsletter” explains what the email itself is, but it offers no insight into the content of its message. For my own company’s email newsletters, we have eschewed these types of easily disregarded subject lines in favor of more descriptive ones that tease the content. In doing so, we have achieved much better open rates. One way to boost the success of your subject line is to frame it in the form of a question, such as “Are you considering a move to the cloud for your business?” or “Do you know the reasons companies usually struggle with a move to the cloud?” Those two subject lines are ones I actually tried recently along with a more straightforward one – “Challenges of Moving Your Business to the Cloud”. While all three saw relatively good open rates, the two that posed a question to the recipient well outperformed the other. Start paying attention to the emails that land in your own inbox. Which subject lines catch your eye? Which do you gloss over without a second thought, and which ones prompt you to hit the “delete” button immediately? Soon you’ll begin to discern which types of lines are most effective, and you can apply these techniques to your own campaigns.

Inform, don’t overwhelm

Now that you’ve formulated an attention-grabbing subject line that will motivate your recipient to open your email, the next challenge you must conquer is the content of the email itself. All too often, companies try to communicate too much via their emails, with the end result being that the recipient is too overwhelmed to fully process and take action on the information being conveyed. Many email newsletters fall into this trap, with company announcements, blog articles, product highlights and more crammed into a single message. In an attempt to make sure the recipient has access to every piece of information that could possibly be of value to them, the e-newsletter becomes a scattered mess that lacks organization and direction. Additionally, this information is usually presented in full within the body of the message itself, instead of prompting the reader to click a link to access the full text via a web page. As a result, the number of ideas coupled with the depth of their presentation spells doom for the campaign. A quick scan of the message is enough to turn the recipient away because they have no desire to invest the time necessary to sort though the barrage of content to find the one or two bits of information that might be of use to them.

Be a tease

Avoid this “much too much” trap by editing and teasing your content. Include no more than three key ideas per newsletter. Sure, you may have more than three things to say, but you must be ruthless in your selection process, and save the rest for another missive or another medium. Next, present those three (at most!) ideas in the form of short teasers. A title, a short intro to the news item or article being highlighted and an accompanying image are all you need to pique your reader’s interest – along with a link prompting them to read more on your company’s website. By doing so, you’ll ensure that your email newsletter offers a clean, visually appealing presentation that can be scanned and processed in a matter of mere seconds. If a reader is interested in one of the three key ideas you’ve presented, they have the option to easily obtain more details for themselves. Of course, this approach has the added benefit of driving users to your website and increasing that site’s exposure to new audiences. When I suggest this “click to read more” approach, the reaction I most often receive is that readers “don’t like to click a link” but rather want to read the article in their email message. I have no idea where this belief came from, but it is false. Users are more than comfortable with clicking links, especially if it comes from a trusted source (see Part I for the benefits of using a carefully curated email list of customers who know who you are already). The Internet is driven by clicks, so do not be afraid to embrace this behavior! By mastering these five fundamentals of successful email marketing – the who, what, when, why and how – you can help to ensure that your messages are a welcome presence in your recipients’ inboxes, that they are read and, most importantly, that they motivate your customers and prospects to take the action you desire.

---