Content Discovery Smackdown: Hootsuite vs. Buffer vs. KloutContent Marketing Minds: Ingredients of the Tastiest Content [Nutrition Label]From the Corn Field to the Digital Era: Content Marketing Starts with TrustContent Marketing: Is 2014 Really Shaping Up to Be the Year of Video?
Your Customers Aren’t Listening! How to Create Consumer Dialogue that Converts4 Tools for Nonprofit Social Listening and Reputation ManagementThe Promising Role of Social Listening in Treating Health IssuesThe Importance of Social Listening for Brands
- Public Relations
Facebook Testing a Way for Users to Buy Products on the Platform7 Website Tips to Attract More Shoppers to Your PagesHow eCommerce, Augmented and Virtual Reality Will Redefine the Retail ExperienceSearch Query Analysis to Increase eCommerce Website Conversions
- Content Marketing
Technology & Data
Social Startups: Bizible Connects All the Dots from Marketing Contributions to RevenueCreating the Perfect Profile for Your Social Media Marketing EffortUsing GPS and Localization for Social AnalyticsAnalytics and Prospect Intel: Discovering Your Ideal Prospect
- Big Data
- Tech & Innovation
3 Security Risks You’re Taking Every Day While Using Social MediaShould the President Have the Power to "Pull the Plug" on the Internet?How Safe is Your WordPress Website From Hackers and Other Malicious Attacks?
- Software & Tools
- Small Business
- Social Organization
Celebrating the Grand Re-Launch of Social Media Today! SBH Podcast Episode 8Why Should You Care If Your Employees Are Thought Leaders?Beyond Engagement: The Art of Managing Social-Media Risk in Employee Advocacy
Why All-in-One Social Media Management Systems Don't Cut It for Social Customer ServiceWhat You Should Know About Customer, Digital, and Contextual ExperienceSurging into Q3: How to Make It Better Than Q2Is How You Serve Your Customers Costing You Business?
Join us September 15th in Atlanta for The Employee Advocacy Summit and learn how to unleash the power of your employees.
Post your event here and we'll share it with our community. If one of our members is featured, we'll promote as well on their profile.
- Marketplace & Webinars
The SMT Marketplace
Your resource for exclusive content and insights from Social Media Today, and opportunities to reach our community of professionals.
The Social Business Book Club brings you books, discussions, and insights from today's to business thought leaders.
Join interactive talks and and panel discussions with leading thinkers and practitioners on social media and networked business, or browse the catalogue of recorded sessions - all completely free.
Reach Social Media Today's community of marketing and communications professionals in an editor-approved context with a native advertising package.
Not All Responsive Web Design Is Created Equal
Posted on February 22nd 2013
If you’re considering a website redesign or planning to build a website for the first time, it is my hope as a designer that you have some understanding of what Responsive Web Design (RWD) is and why you need it. RWD is an amazing way to design your website that makes it possible for visitors to access your content anywhere, anytime, from virtually any device. Many web designers agree that this is the best method to ensure your website is best suited to the mobile customer.
However, amidst this constant conversation about RWD, it’s easy to forget about the basic rules of web usability. Too many web designers out there have become so consumed with responsive design that usability is being sacrificed along the way. It’s not enough just to ensure your website is responsive, it also must be easy to navigate on any device.
Let’s take a look at some of the basics of web usability techniques for ensuring your site is completely device inter-operable.
Usability Trumps All
First and foremost, you have to always remember that your website exists for the purpose of human interaction. Your website is not being accessed by a mobile device, it’s being accessed by a person holding a mobile device – and that person is there for a reason. I see far too many web designers creating über trendy websites that just don’t translate well on mobile devices. As a designer in this mobile world, you still have an obligation to to follow the first basic law of web usability: “Don’t Make Me Think.”
This isn’t a new idea; in fact Steve Krug introduced the concept in his book, Don’t Make Me Think: A Common Sense Approach to Web Usability, in 2000. Krug warned web designers everywhere that despite the rapidly changing world of web design, one thing would never change: the purpose of websites. Even the most beautiful responsive sites still have an obligation to get the user to the information they desire without making them think. This is the difference between a visitor looking at your website and saying “Oh these are the products” (not thinking) versus “Where do I start? Why do they call it that? Where do I click?” (thinking).
Navigation is Key
In a mobile design, one of the most important aspects of usability is the navigation system. Mobile screens are smaller, and your content will be organized differently than on a desktop, so you need to make sure that your navigation is clear enough to allow your visitor to access the content they came for. Often, simply resizing your navigation links as the screen gets smaller will make your navigation menu far less effective. Small-sized text can be difficult to click and read on mobile devices and will frustrate your visitors.
Designers have found two ways to elegantly deal with this predicament. One method is to introduce a drop down or “select” menu in place of the full navigation menu once the screen size is mobile.
Here are a few examples of this method on a cell phone sized screen:
An additional way to tackle the navigation issue is to place your navigation menu behind a menu icon. As we interact more with mobile, we’ve come to recognize this symbol as the “menu” symbol.
Microsoft has incorporated this on their responsive site...
...and so has Starbucks:
Both ways can be equally effective, as they make the site easier for your mobile users to navigate.
Another major aspect of web usability and one of Krug’s biggest pushes in his book is making things look clickable. On a desktop, this often means having the mouse change from the pointer to the hand when the user brings the mouse over a link. The “hover” function is a huge part of desktop usability, but on a mobile device, we lose this functionality completely! When everything is a touch screen, the user is only able to interact when they physically touch the screen.
To accommodate this huge change, many responsive web designers are making links look much more like buttons. This is also a major trend in App design. If your website requires a great deal of clicks or in this case “touches,” you should consider large graphics with wide surfaces and exaggerated shadows that mimic the look and feel of real buttons. This realistic design style will help users easily navigate your responsive website, guaranteeing they never miss a link. These two sites show how giving your links this look can make them appear more clickable:
It’s all About UX
Web usability is all about meeting your user’s expectations and giving them the ability to find the information they want. One of the main purposes of a responsive website is to mimic the experience of the same website on a desktop. That said, it would be physically impossible to show the user everything they need to know about your site on the first screen of a smartphone.
The notion of designing “above the fold,” so-to-speak, is dead. People are accustomed to scrolling on their smartphones and tablets, so it’s ok to take advantage of that space. It would be a big mistake as a designer to completely fill the small screen version of your website with micro text and clutter. Notice how the The Next Web has simplified their content on a small mobile screen without sacrificing the look and feel of the website.
Without a doubt, responsive web design is the future, but just because a site is responsive doesn’t mean it’s good. Too often, designers think about responsive designs merely in terms of the device without considering the way the human using that device is going to interact with it. Your website needs to be both beautiful and useable. Responsive design is the future, but we can’t let our infatuation with the design itself sacrifice the integrity and usability of the site.
So go ahead and make your next website a responsive one, but please think about usability - don’t make me (or your customers) think!