in Design

How to Make Your Existing Website Mobile and Tablet Friendly


Consumers online – like consumers everywhere – are befuddled with the sheer amount of information that finds a way into their conscious (and sometimes unconscious) minds. For marketers, making a splash or to come across as unique is certainly difficult. Marketers almost wish that they were natural attention seekers.

As if the onslaught of information wasn’t enough, the growing use of smartphones and tablets add to the increasing opportunities for businesses to expose their content. Today, there are even more ways to approach the already loaded information base that consumers will gain access to. As a result, what shows up at the touch of a customer’s touch-screen has to work flawlessly. Pages should load fast, text and images should be fluid to resolve to appropriate screen sizes, and much more.

Businesses with websites now have to figure out ways to at least make themselves available where their customers are, which is everywhere. From a strict web site design point of view, customers are available on desktops, laptops, and mobile devices (smartphones and tablets).

How do you make sure that your website shows up appropriately across all screen sizes and devices? How do you develop websites that work on every device, today and tomorrow?  What does it take to be presentable while making your websites work for you? Can a mobile website function just as well as a traditional, more robust desktop version? Apparently, yes.

Here are some tips to turn any website into a completely responsive design so that it’s ready for the mobile devices and tablets:

Mobile is where your website (also) has to be

Mobile is a revolution – the only difference is that it’s a dramatic revolution that happened gradually. According to a Techcrunch release, which alludes to ComScore statistics, more than 100 million U.S mobile subscribers are using smartphones already. This is a 13% since October 2011. A Nielson report revealed that more than 66% of Americans aged with between 24-35 own smartphones.

Guess what? That’s just U.S. Then there’s an entire world of consumers with busy thumbs on touch screens. For web designers and for businesses, mobile website design (responsive design) is going to be a staple faster than ever.


Responsive design has an actual need

Responsive web design isn’t going to help you get awards for creativity. It’s not going to make most people say “wow” – at least, not the way you are used to. Yet, responsive web design is actually going to make users browse the right way; it’d help them find something on your website quick and easy.

Follow what Aurora Gatbonton teaches with her blog post on Whittle your work down to specifics, right from the word go: decide on the screen resolutions, break up pages into smaller portions or chunks, keep the design simple, throw in options to visit the full-page website (just in case), keep the navigation basic, keep user text inputs minimal, etc.

Change your present site into a responsive one

For all the talk about website design, it could be that you might already have a website and you could be looking to turn that website into a responsive one. You might not you’d not want to start from scratch again. In that case, you don’t really have to reinvent the wheel. Vandelay Design has this great blog post on How to turn any site into a Responsive Site, which features tools, plugins (forWordpress-based sites), jQuery plugins, frameworks, and lots of other cool stuff you can use.

If you already have a website, chances are that you can turn into a responsive design.


Strip it all away

Too much is bad, especially for mobile –based websites and applications for iPhone and Android. Web designers just won’t get it; business owners wouldn’t find a compelling need for it. It’s easy to say, “keep it simple” and it would just be almost impossible to implement. Not to mention the guts it takes to do just that.

Look at what Steve Jobs did with the first iPhone. Blackberry phones were popular for the keyboard-enabled, super-fast emailing function that those phones were wildly popular for. Out comes with Steve Jobs with the iPhone that was actually made for “sophisticated dummies”. The iPhone came with the popular features stripped off entirely: Physical keyboard and video. The iPhone had nothing but a superbly solid iOS to operate and a spectacular, industry-shattering UI.

Simplicity in design is the hardest thing to achieve for businesses and web-designers. Try it to experience the challenge.


Use HTML 5, Mobile JQuery

Ethan Marcotte first coined the term “Responsive Web Design” in his seminal article at A List Apart, and it’s been the hottest thing that ever happened to the web. Technologies such as HTML5, CSS3, and Mobile JQuery were developed for optimizing websites for mobile phones and tablets. jQuery mobile framework, for instance, follows the mantra of “write less, do more”.

The latest jQuery Mobile version allows you to develop touch-optimized web frameworks for smartphones and tablets. The framework provides a unified, HTML5 based user interface system for helping designers or developers build websites for all sorts of screen sizes – all of this built on the rock-solid, extremely popular jQuery UI foundation.


Learn from examples

We have  a great list of 30 examples of responsive web designs  that you should actually take your time to coast through simply because when you look at these designs, you get “inspiration”. Now, that’s something you can’t pay to get. As you peruse through each of these exemplary designs, something strikes at you, deep inside.

One of these designs is going to jump out at you. You could somehow see a connection with that design. Further, it could just be the kind of design you might want to create. Whether you are a designer, business owner, or a marketer, you got to be drawing inspiration from these sources when you aren’t working.

Clearly, your website now needs to show up on multiple screens and devices. The responsive designs that will show up on mobiles cannot have excess baggage. You’ll have to focus on creating practical, functional, fast-loading, and responsive pages for those designs.

How are you going to do it?

Author Bio:

Pete Juratovic is the Strategic Director and founder of Clikzy Creative, a website design company in Washington, DC. Clikzy Creative also offers fashion website design, search engine optimization, and many other services.


Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.