Made JoymonOnline.in responsive without bootstrap

Background

Now a days 'responsive web site' is not an separate requirement. Whatever site we are developing, it must be responsive. But it was not the case with my personal site www.JoymonOnline.in . It was developed long ago when there were not much mobile users. It still uses ASP.Net using Web Forms and there are my own reasons to do so which is explained in one of previous post.

It was difficult to keep my personal site as desktop only. Whenever the url is shared people immediately open in their mobile and looks like is this really belongs to an Application Architect who blogs about JavaScript, HTML5, AngularJS etc...Soon the decision to 'make JoymonOnline.in responsive' has been taken as one of the 2016 goal.

Analysis

The biggest decision was whether to move to ASP.Net MVC or AngularJS along with this effort. Another factor was whether to use any library or framework for making site responsive such as bootstrap. Now a days most of the app including enterprise apps are using bootstrap to make the site responsive.

Since the earlier experience with third party libraries were not good, the decision was to be brave and do it by knowing what is meant by making a HTML page ersponsive instead of just following Boostrap's guidelines. Another decision factor was this is one of opportunity I will be getting to make site responsive without bootstrap. In my day job, Bootstrap seems the default.

Though we have to do from scratch which may take some time to settle down its worth doing atleast one site responsive without Bootstrap to know the basics. Then its easy to approach Bootstrap.

Responsive site without bootstrap

As everybody knows, the secret is media queries in CSS3. I could get a nice article explaining how to make the site responsive in simple steps without Bootstrap. Just followed that and the site became responsive in 2 days.

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Responsive Fonts / Typography

This is still a to do item. Though currently font size is not changing its readable in small devices, There are some good articles in internet which explains how this can be done. Its better to follow modular scale if there is not much design background or we are not sure how to decide the font sizes.

Testing for responsive

There are many sites to validate our site for its performance, code quality etc... But I didn't see much automated sites for testing responsiveness of web sites.

There are some sites which loads our site side by side in different device sizes which helps us to understand how our site looks in devices. But I would recommend the F12 browser tools for testing.

http://responsivedesignchecker.com/joymononline.azurewebsites.net

http://mattkersley.com/responsive/

Let me know if you find any bugs related to responsiveness in my site www.joymononline.in