Responsive Development – From Zero to Hero!

February 25, 2017 ,

What is Responsive Development?

Responsive Development is, by definition, the act of developing a site providing an optimal experience on all screen sizes by adapting the content to the size of the device it renders on, from desktop computers to mobile phones. You can read a more elaborated explanation of the concept on Wikipedia.

The image below will help you understand:

responsive_gif

Image courtesy from blog.froont.com

Does my website needs to be responsive?

No, but it should.
The reality is that on today’s world a big part of the visitors of your site are coming from a variety of sources and devices and they should see your content properly.

Also, following the latest Google developments and the introduction of what the community is calling the “Mobilegeddon“, sites that aren’t mobile friendly will not perform as good as the ones that are.

For what is worth, we should embrace the future and by developing using sustainable, proper methods you’ll have a better, more prepared site to deal with future devices.

Can I make my site responsive by myself?

Sure you can, that’s what Viewlike.us is for.

By principle, you should be able to make your site responsive by applying proper CSS rules. Using percentages instead of fixed width will help you improve your site’s readability, however there are other items to consider:

  • How big is the text?
  • Are the visible area defined for mobile devices?
  • Does the links have enough space to be clicked on touch devices?
  • Do you still have content bigger than your screen?

Desktop or Mobile first?

There’s no clear answer for this as you should be able to provide a good experience for both platforms.

The best advice we can give is to start developing on the platform you think you’re users will be coming from preferably. The principle of Desktop to Mobile conversion and vice-versa is illustrated below.

mobile_first

 Image courtesy from blog.froont.com

From where should I start?

You can start right away writing CSS and improving your website, but we recommend you to use CSS Frameworks.

What’s a CSS Framework?

A CSS Framework is a piece of code you add to your site that already contains the basic rules you need in order to produce a responsive website. Look at it as a template that allows you to build your structure without having to worry about width’s and height’s because the Framework will do the work for you.

We recommend you to take a look at those: