Im going to start learning responsive design, it seems to make sense.

 

How would you recommend i start, i know my way around css, and html.. but i aint good or anything.

 

 

 

And does anyone recommend i use a framework like bootstrap?

I posted this link in another post a few days ago but I believe you should take a read before you jump straight to using a framework - you layout might not require one.

 

Link:

http://css-tricks.com/dont-overthink-it-grids/

Yo!

 

From my experience, I would say do things from scratch if time allows it and you want a thorough understanding of the bits and bolts of markup and styling. I've used most of the main frameworks and can say they are pretty decent to use in terms of time, budget and sometimes a lack in skill - i.e. if you can't write JS, it can help.

 

With that in mind, it depends on what you want to learn and what your goals are. The first step on your quest would be to look at this http://alistapart.com/article/responsive-web-design and scout around the forums and you'll find posts like rbrtsmith's one he mentioned.

 

Re: Grids - I'm a big fan and use them for everything I do. Personally, I recommend getting used to a grid system to see if it suits your needs/style - e.g. 960gs to start out, or you could try frameworks like Skeleton, Foundation or Bootstrap. Their grids are excellent but are made specifically by the needs of the framework.

 

I'd recommend semantic.gs as I always do. I don't use it now, but it taught me how to make a reasonably good grid of my own that doesn't have the labelling that Bootstrap or Foundation has - you customise to how you see fit. That said, you might find grids aren't suited to your workflow - but it might be worth a try.

 

Good luck!

YO!

Thanks to both of you, seems like the right place to start,

I have already download the boot strap framework and am playing around with it,

 

But i dont understand the css and i think building something from bottom-up would be the way to go in that regard.
going to start building something in the grid format, seems like alot of people are doing that

Have a look at this tutorial I did a couple of weeks ago for a ceash course in HTML5 and creating a responsive page template. http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/

Have a look at this tutorial I did a couple of weeks ago for a ceash course in HTML5 and creating a responsive page template. http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/

 

Page not found Try this: http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/

Edited April 18, 201313 yr by 4li4s

Page not found Try this: http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/

 

Sorry.

I think a lot of the time people over complicate responsive grids when they are in fact very simple.

 

A simple two column layout both half wide you just set their widths to 50%, float left.

A two column layout one 1/3 and the other 2/3 would be the same but widths of 33.3% and 66.6%

 

HTML

 

<div class="col-1-2">Content</div>
<div class="col-1-2">Content</div>

<div class="col-2-3">Content</div>
<div class="col-1-3">Content</div>

 

CSS

.col-1-2 {
    width:50%;
    float:left;
}
.col-1-3 {
    width:33.3%;
    float:left;
}

.col-2-3 {
    width:66.6%;
    float:left;
}

 

And then if you want to add padding etc without breaking the layout just change the box model so the width of the block won't be affected

 

CSS

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;       

 

 

I think the grid frameworks certainly have their place but if you have a simple layout there just a bit overkill IMO

 

I think the grid frameworks certainly have their place but if you have a simple layout there just a bit overkill IMO

 

Agreed. I simply use grids (as opposed to frameworks) based on print and now the web, etc and always works for me in how I like things structured. If you do use a grid, you can use a semantic one like the one I suggested and it eliminates the need for bloat that frameworks have.

 

If you don't use a grid, the above works perfectly fine. Just remember the old formula, target / context = result (can't input the conventional divide symbol on my keyboard!) and you'll be laughing

I have just completed my first site using skeleton as I did not want all the features which came with foundation or bootstrap.

 

I am still learning about responsive web design but a framework/boiler plate/grid system in my opinion is useful to make responsive websites.

 

I found lots of tutorials about the different frameworks and I feel that it is important for you to get a better understanding of CSS as I found that using a framework where I was used to coding my own layouts has lead me to have to override some of the default style sheet.

 

If you want to use a framework you should have clear goals about what you are trying to achieve. I used skeleton as 4li4s recommended it to me as a lightweight framework which has minimal styling.

 

It is definitely the way to go about learning Responsive web design. If you have minimal knowledge of css I would advise you go for a framework which has a large user base for support as I have learned a lot from the documentation of the different frameworks.

Edited April 18, 201313 yr by chris paris-haines

i wouldnt call my css skills basic, just not good... lol
Problem is, i didn't know what i was looking for in the style sheets, they seemed a little complex, found i had no control and when i did, i change more then i bargain for.

But i am giving myself two weeks to build my own responsive website, simple of course and then im posting here for everyone to see.

 

But in the interest of time, im thinking that frameworks might be the way to go once you got a handle on it.. am i wrong?

Frameworks have their uses, but what I have found is some are more complex than others. If you are just wanting the responsive grid functionality you are probably best going to a grid system rather than a fully fledged framework. I have found this forum very useful when I have got stuck so dont be afraid to ask for help.

I made an xhtml css website but it's not mobile responsive.

Is there any way to solve this problem without making a whole new website?

Some codes I can add to existing page that is SEO friendly?

Or you can advise some free or at least cheap xhtml css responsive template'

@@xmind - please start a new thread and don't dig out ancient threads.