Responsive website design is the name given to a website that is designed to fit into any screen size. This is a common understatement of the complexity that actually is a “responsive web design.”
For example, if you were to create a website that was a box made up on four pixels then you are guaranteed to be able to fit that website on any screen size – this however would not be responsive web design.
Responsive web design centers around making a website fit a large screen as well as a small screen, whilst keeping as much functionality as possible.
You might want to take a look at the following related articles:
- 5 Key Attributes to Make Your WordPress Web Design Magnetic
- Essential Ecommerce Web Design Tips You Should Look At
- Essential Principles of Website Color Scheming
- 5 Wrong Web Design Concepts and How to Learn from Them
- The Relationship Between UI and CRO in Web Design
A Good Example of Shrinking a Website Down to Size
Facebook use a separate website for the mobile version of their website. This website is a great example of how things should look if they are built with a responsive web design. Facebook has removed the desktop version of an advert, in favor of a smaller, slimmer, and longer advert.
It has also gotten rid of the things such as the birthday notifications that are available on the user’s wall. Editing these things out is a good thing when creating a mobile website, because it frees up space instead of cramming lots of elements into one area.
This is a good design for a mobile website, and ideally if you are creating a responsive website, your smaller version should do the same thing as the Facebook mobile website.
Three Options: Native, Mobile and Responsive
Before digging a cave in your back yard, you must know first if responsive web design is for you as there are two more which you can think about if you will pursue having a responsive website:
- Build a mobile website as previously discussed
- Create a responsive website
A responsive website can use the CSS3’s browser recognition ability to create a responsive website which will change its format to suit the type of device it is being read from.
The SEO Aspect of Responsive Website
Google recommend that you use a responsive website design that serves all of the mobile and desktop devices – all whilst using the same set of URLs. Google recommend that each URL serves the same HTML content, but that you use CSS to differ how the web page is rendered for each mobile device. Suffice it to say that if Google are publicly recommending this approach, it is fairly likely that it is SEO friendly.
What a Responsive Website Should Do?
It should keep all of the websites information on one URL. This is a relief for people who are concerned about duplicate content being spread across numerous websites. There is also the fear that if you make multiple websites that you will have to do more work in raising their SEO/SERP value. Having one batch of content that rests on one URL is a good way to concentrate all of your SEO efforts in one place.
Sometimes, a Responsive Website will not work Correctly
This was true for the election winner Barack Obama’s website. He had one that was a responsive website, where as Mitt Romney had a desktop website and a mobile website.
Barack’s website had a few compatibility issues with some mobile devices, and people complained that they could not navigate away from some pages because the navigation menu was missing. Mitt however experienced no problems on the mobile front because his mobile website had no reason to have compatibly issues.
Moral Lesson: If you are creating a responsive website, you should check your website on as many mobile devices as possible; even the variations of the same devices, such as the iPad classic and iPad mini, or the Galaxy Tab 7 inch and the 10.1 inch version.
Problems with Responsive Websites and Mobile Websites
It is widely believed that up to 28% of Americans access the Internet, primarily through their mobile device. This means that the myth the mobile Internet users do not require a website to have full functionality is a myth. People want access to everything. Some will suggest that if you remove things from the smaller mobile web design that you should put it into separate mobile website pages. This is an option but the better way is to lower the amount of information on each of your desktop web pages. The parts of your website that will not fit on the smallest screens should be moved to another URL. Once the website has been laid out it will mean that each page will be mobile compatible, without having to remove any important elements.
If you are worried about this technique making your desktop website look empty, you should increase the size of your desktop websites elements. You could also put in a more comprehensive navigation system, which is left out of the smaller mobile version. You could go even further and add unimportant elements to the pages of your desktop website, which will not be missed on the mobile website (such as affiliate adverts).
Mobile Website vs Responsive Website: Which is Better?
If you are prepared to put in the work to create your responsive website, and you are willing to de-bug it on a regular occasion then a responsive website is the one you should design. All you need to do is not make the same mistakes that have been mentioned on this article, such as scrolling navigation, and neglecting to check the websites functionality across multiple websites. With a combination of online tools, CSS3, HTML5 and experience, you will soon wonder how you ever lived without a responsive website.
The Mistake of Longer Pages by Responsive Web Designers
Some responsive web designers will create websites that have page after page on one screen–they are access by scrolling. This is a bad idea because loading them all takes time. It is also very easy to lose track of where you are on the page, and navigation becomes more difficult.
CSS Selectors for a Manageable Mobile Page
Page management for a mobile website is actually quite difficult, however if you are creating a responsive website the process of creating a manageable site is easy. All you need to do is remove the elements you do not want with your CSS selectors. This is very helpful in managing your mobile version of your website – during the initial build and for subsequent updates.
Who did it well?
The UK supermarket chain Tesco’s started out with a mobile website, which they removed and later created a responsive website. Their primary concerns were over speed and updates. It seemed that their desktop website was updated more often (and quicker) than their mobile website.
Tesco’s further aim was to allow customers to buy up to 30 items within 15 minutes. Although initial tests of their mobile website showed that this was possible, it soon became impossible within just a few months of the mobile website going online. With a responsive website they have been able to keep their fifteen minute promise.