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..

    Show unordered list's bullet points when display:table

    How can I get this element to clear the image so it sits in middle off the page on top of the background

    How to Change Font-family using JQuery's .css() function?

    how to change attribute of table cell based on contents when table rows created by while loop with PHP

    How to invert colors using CSS on hover

    how to drag and drop css file in eclipse?

    How do I get this dropdown to be on top of the other elements

    How to style a list so that it looks like a table, with various line height?

    How to create DRY CSS when using transform & keyframes

    How to use ExtJS stripeRows with RowExpander plugin in IE8

    How to fit the content of the site in any resolution CSS

    How to define a CSS fontface?

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • How to locate which css include is used for an element

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How to show hidden part of an image which is inside a fixed height div, using just the CSS?

    How to label ABC in a HTML button and Click events

    How to render thin fonts more smoothly in CSS 3 on Windows?

    How to make an iFrame window scrolls with overflow:hidden?

    HTML, CSS. Show the second node first before the first node in MOBILE site

    How can I properly add CSS and JavaScript to an HTML document?

    How to show color only to the first li?

    How to remove CSS attribute such that HTML attribute will take effect again?

    How to place text at the bottom when there's predefined height!

    QuickSand Script not showing correctly in IE 7

    how to get background image present in other folder with css?

    How to add focus on label css style

    How can I set a floats width to the left over space?

    CSS and HTML: How to create an Expanding DIV On Click?

    ckeditor - how to get custom-css with id to work?