Responsive
Making web sites look good on both desktop on mobile
What does responsive mean?
The term responsive is a term of art in web development meaning, roughly, “the site is easily usable, and looks good, no matter what kind of device is used to view the site.”
That is, the site is responsive to whether the user is on a traditional desktop computer, a mobile phone, a tablet, etc.
A site is NOT responsible ff a site can only be easily navigated when:
- the screen is wide,
- the user has a mouse
- etc.
The antithesis of responsiveness is the old practice (now, thankfully, largely being abandoned) of putting things like the following on websites: “Best viewed in Internet Explorer at 800x600”. That’s so 1990s, and not in a good way.
Ways of making a site responsive
The “least you can do”, is to at least look at what the site looks like on a mobile browser.
You can, of course, get out your phone and surf the site as you develop, but if you are prototyping a webapp on “localhost”, this may not be feasible. So, an alternative is to use features of your browser that allow you to simulate a mobile device.
- In Chrome, you can use Chrome’s Device Mode
- Surely, Firefox and Safari have similar features. I might add mention of them here later. If you know what they are, fork this repo, edit this page, and send me a pull request.
JQueryMobile
JQueryMobile is a library based on JQuery for creating responsive web user interfaces.
CSS Media Queries
http://www.w3schools.com/css/css_rwd_mediaqueries.asp