How to start with responsive deisgn [closed]


Tags: html,css,design

Problem :

Okay, I've been doing HTML and CSS for quite a while now, and have built up a strong knowledge. However, I now want to start getting into responsive design for sites but have no idea how to start. I have built my website to be kind of responsive here:

jonk.x10host.com

I have looked into frameworks such as Skeleton.css and found no luck in finding how to start responsive design as I find it hard to start.

My main problem is that I don't know what devices to use first. I'm not sure if I should build my site fully, then move mobile first,

or build my site then move down to smaller devices.

My question:

How should I build my site for responsive design? (Mobile first?)

What Media Query sizes will I need?

Should I re-do my site with classes for rows and columns?

Should I create my own framework? Will it be easier for the learning curve?



Solution :

How should I build my site for responsive design? (Mobile first?)
It is up to you (think Bootstrap 3 and Foundation 4 are mobile first but you can choose between mobile first and normal mode in Bootstrap using specific CSS classes)

Here are some comparisons: http://responsive.vermilion.com/compare.php

What Media Query sizes will I need?
Most frameworks (Twitter Bootstrap 3 and Foundation 4) already provide default breakpoints so you can easily change their values but it is suggested to use them as they are.

Should I re-do my site with classes for rows and columns?
This makes sense as they all need some specific classes for the responsive layout so it works

Should I create my own framework? Will it be easier for the learning curve?
No, take one from the mentioned comparison, do not reinvent the wheel, the folks at Twitter did a really great job

Personally I would suggest Twitter Bootstrap 3, has a very good documentation, good support, many users ...

Here is a good guide for getting started: http://getbootstrap.com/getting-started/


    CSS Howto..

    Integrating CSS and CherryPy: How to fix the 404 “/” Not Found Error?

    How can I fix the indentation in a facebook like-box?

    How to put the text at the center of inner div?

    How to put a canvas on an image?

    How to add Css classes in TinyMCE editor Styles drop down through coding

    How to set div height to fit the screen css

    How can I have a CSS style different for IE6?

    How to apply CSS to elements that have multiple classes?

    How can I make a different CSS for the first child
    ?

    How to detect all events added on a div

    Dropdown menu. make it show onclick and not onmouseover

    How may I stack multiple html/css buttons vertically along the center of the page?

    How to get css height property of an object and add 20px to it?

    How can I use development tools to find css class of a plugin item

    How to change a span to look like a pre with CSS?

    How well do you need to know HTML before delving into CSS?

    How can i get spaces between images with the same class?

    How to CSS sandbox/reset an entire DIV area in the current page?

    resize/expanding slideshow (inside a div) overtakes content that follows below

    How do I know which CSS is overriding my background image?

    How can i remove all attributes from any css selector? To override and reset any css id selectors?

    how to redirect page

    How to render email template in a page?

    How to right align a div containing a form in another div?

    How to make css style on Google custom search engine

    Why does an absolutely positioned child expand container height and how to prevent this?

    How to Make a Picture rotate Continuously? [closed]

    How to flip background image using CSS?

    how to vertically align div opposite to each other

    How to preload css :hover background images