With all the focus on tablets, different smartphones and amazing navigation concepts it’s easy to forget the most important task in your responsive web project.
Your single most important task in every responsive web project is content. It’s even more important than in a non-responsive web since real estate is even more valuable on a smart phone than on a 27 inch iMac screen.
Focus on what’s important
If it’s not important enough for the small screen of an iPhone, it’s not important enough for your web site. That awesome JQuery carousel that you drooled over on your giant screen didn’t have the desired effect on your iPhone, did it? You might be thinking of hiding the carousel for mobile devices. Well, if you might consider that, you might want to consider removing the carousel completely.
Always remember that nobody will ever read everything your write on your website. You’ll be lucky if even one visitor read all the content on even one single page. Most people will only read between 20-28% of the words so keeping that in mind, you might want to embrace those 20-28% and make the best of it.
So what is responsive content? Responsive content (as I like to call it) is content that adapts to the current device, and works on the current device. This means that all your copy should be written in a way so that readers on a smart phone won’t get sore thumbs from scrolling all day. Keep it short. Keep it focused. Keep it simple.
So when writing for the web today or tomorrow. Don’t think about what fits on your screen. Think about what fits on your phone screen.
When to know what to do
Of course it’s always good start to check your statistics on Google Analytics to learn how much mobile traffic you receive and what pages people are reading before making drastic changes to your web content.
- CSS Media Queries for Mobile Devices
Writing CSS for different devices can be a pain in the ass. With Media Queries it’s easier, if you know how to pin point a specific device.
- Easily create image sprites for retina displays
With the launch of the new iPad all websites instantly became pixelated and ugly. All your neat images and sprites and stuff is now rubbish. You’ll need to remake it all. In twice the width and height.
- How and why to prevent WordPress to add image dimensions
WordPress will automatically add image dimensions, width and height, to every image you place. While this can be good in many cases, responsive design sometimes works best when no dimensions are set.