Responsive Website Design
What is responsive website Design?
Not many people use the traditional website design method any longer as it does not make much sense to with the range of ways to browse the internet including smartphone, tablet and various size desktops.
Responsive website design essentially allows a webpage to define which size screen is being used to view the website and to adjust the design according to pre-defined arrangements for those dimensions.
The responsive design does not require a new website to be built for mobile phones, tablets and desktop monitors but reforms the same design to suit the media. This solution saves time for the developer and it also means that there are no duplicate content issues with the multiple websites that would be required.
Below are a few of the considerations which needed to be overcome when beginning to create websites in the responsive format.
Using Media Queries and CSS Transitions
By adding transitions to your css, the jump from one size browser to the next is a lot smother and there is no sudden jumping from one pre-defined browser design to the next.
Responsive Data Tables
Using tables in responsive design can prove tricky for the user who will have to choose between a zoomed out table with tiny text or a zoomed in table which requires scrolling left or right. By using media queries, a modern responsive table can be presented neatly and easily readable on all formats.
Navigation Menus in Responsive Design
When viewing a webpage on a mobile phone, it is likely that the navigation bar used on a typical desktop size page will struggle to fit on a smartphone screen without the problems of zooming out and the links becoming tiny or having to scroll left and right.
Transforming your navbar into a drop down menu presents the available options to the user in a much more user friendly format.
Using Available Space
Media queries ask about the size of the screen currently being used and provides the appropriate CSS to display a webpage that fits correctly. Media queries provide a solution to using a % for the size of a particular <div> where the percentage is too small to be useful. Using media queries, you provide an appropriate instruction depending on which result is returned.
References:
https://en.wikipedia.org/wiki/Responsive_web_design
http://www.w3schools.com/html/html_responsive.asp