How to make a mobile website responsive – create user friendly website

How to make a mobile website responsive – create user friendly website


With mobile phone and tablet searches on the rise, websites must be compatible on those devices.

If you view a responsive website on your phone, you will notice all the content displays nicely in one column.  But if you view it on a desktop, you will see two columns. So, what does this means?  It means the the website has a responsive design.

It is a trend that people are using now to make their websites more mobile friendly. And of course there is no reason why you shouldn’t have a design like this today. So, with no a further ado, let’s find out how to make a mobile website responsive, but let’s learn why first!


Why Responsive Web Design?


People access the internet from so many types of devices today. With that said, it is important for a web page to function on any of them. With the growth in popularity of tablets and smartphones, more people than ever are using devices with smaller screens to surf the web.

The goal with responsive design is to have one site with various elements that will respond correctly on different sizes of devices. No need to make several versions of the site anymore. Unresponsive website may affect search engine rankings.


What to Keep in Mind…


Smartphones and Tablets can be used in landscape or portrait position.

Remember, most users do not appreciate any site that causes them to take additional steps to use it.  Also impacting the problem is the fact that many smartphones and tablets can be used either in landscape or portrait position.

Hence, if your site has been designed to be responsive, the smartphone and tablet screens should properly display the website for users. In this way, users will find the content easily navigated.

Smartphone users may be able to swipe over their screens to view all the columns, but it’s best to make sure they don’t have to.

Images should automatically resize so they wont’t appear distorted

Websites that are responsive in design have fluid grids. The elements of each page are proportionately sized, rather than being sized by pixels. The page design must also allow for touch screens as well as mouse users. Touchscreens users must be able to see the areas on the screen where they need to make their selection.

If I have confused you with all this terminology, don’t worry.  The solution is much easier than you might thing.


How to Make a Mobile Website Responsive?


What method you choose is going to depend on the time you are willing to invest and amount of money you want to spend.

Here are couple of options you can consider…

  • Get a Responsive WordPress Theme

This is the easiest solution for most people. Since more and more people use WordPress to create websites, it’s becoming a more popular choice.

A responsive theme already has the code in place out the box.  Thus, as soon as you install it, you are done! Accordingly, if you created your site with WordPress, just search for a theme that is already responsive.

If you don’t want to buy a theme, you can use a plug in called WP Touch.  It works for most themes and uses a standard layout or design for all websites.

The downside to using a plugin is it may not work with all WordPress themes.

  • Using Media Queries (CSS3)

If you don’t have a responsive theme or you have an HTML / static website, you can add media queries to you existing design. Sounds complicated, but that just means you have code in a style-sheet that tells the browser how to display website in different resolutions.

Below is an example of a media query you could add to your style-sheet.

@media screen and (max-width:480px) {

#sidebar {display:none;}


The above query simply tells the browser not to display the sidebar on devices with a maximum width of 480 pixels. Where did the #sidebar syntax come from, you ask?  You would use the name of the ID that is used on your style-sheet (css file)

  • Use Selective Website Themes Besides WordPress

Not all website designs are developed the same.  So, that being said, some themes are mobile friendly while others are not.  It is your responsibility as website publisher to make sure that your website operates on any mobile devices.

By making sure that your site works regardless of what device it is accessed from, you ensure that you will not miss any potential customers. In addition, this will make search engines bots happy.


Genuine Thoughts on How to Make a Mobile Website Responsive


If you use WordPress, you can find your stylesheet under Appearance >>Editor.

Your site may call it #leftnav. Or maybe your header is labeled # header.

How to get started if you are reading this article and you do not have a website of your own, yet? To build a website is not as complicated as it used to be back in a day.  You can build a website in five minutes.  Click and type a potential domain in the box below to build a free SiteRubix website.

However, building a website alone is not enough.   Your number one goal is NOT to find what you can sell on your website. You should focus on learning the right techniques on how to get relevant customers to your website and have them take some type of action once they land on your web page.


How and Where to Start?


So, how and where to start? First think of your interests, build a website, attract potential people to the website and then monetize.  To get all this accomplished you need a foundation,  you may need a mentor to guide you in the right direction.

An online entrepreneur network community is what you need, really!  With that, you learn from the best and that pushes to do your best.  By joining forces with most successful online entrepreneurs you get access to online certification courses, free keyword search tool, free live training classes and much more.

Here is just a little bit of what you learn from online entrepreneur classes…

Online Entrepreneur Classes sample

So hopefully you get a basic idea of how to make a mobile website responsive.  In addition, if you need help getting started, get in touch with me and I will be more than happy to help.

As always, I want to hear your comments/feedback.  Will be more than happy to answer any questions you may have.


-Thank you for reading!


Please follow and like us:

2 thoughts on “How to make a mobile website responsive – create user friendly website

  1. Hi I just finished reading you article it was very easy to read I really enjoyed reading it thanks for sharing this wonderful article

Leave a Reply

Your email address will not be published. Required fields are marked *