Going Responsive

what should I read, how should I go about it?

[le_gber]

Hi All,

I started designing websites back in 2001... all tables, font tags, align attributes and what have you. I moved to full CSS, table-less code a few years later.

But since then I have had people code websites for me. I have barely touched a line of code since the whole "responsive" topic became a headline and I am wondering where next for me as I have to start coding again.

I have read a couple of responsive designs books and e-books, but I wondered what where the BIG trends and where should I read from them:

- mobile first?
- 100% fluid or break points?

etc...

Any guidance would be appreciated.

[ken_b]

Here's a place to start:
10 Top Tips for Responsive Design [webmasterworld.com]

[minnapple]

le_gber

I am pretty much in the same spot as you.

Because of the state of SEO I have been forced back into coding again, and I rediscovered that I really enjoy it.

After building a half dozen sites using device detection and sending mobile users to a subdomain, I am now using screen width detection on new sites.

One by one I am converting the device detection sites to screen detection. Really not a big task.

Then . . . . I spoke to coopster last week, and he mentioned bootstrap.

So, I need to explore bootstrap as I teach myself bigcommerce, wordpress mods, etc. . . .

Some days I feel like my brain is going to explode. :}

[graeme_p]

I have some reservations about Bootstrap. It uses px rather than em measures. All frameworks also give you a choice of either inflexibility or learning SASS (or LESS). I would suggest learning how to use @media rules which is enough for simple sites.

The benefits of "mobile first" are that it avoids loading elements not needed for the small screen view and it makes you think about what is really necessary (and if things can be eliminated from the mobile design, perhaps they can go from the desktop design as well).

[le_gber]

ken, minnapple, graeme, thanks for your replies.

ken, image optimisation tip from your link is great, am going to read more on this.

minnapple, I hear what you are saying about device detection. I am sure it may sometimes be the better solution - don't believe it is in my particular case.
I heard about bootstrap too (a lot of people seem to be using it), but I hate relying on ready-made libraries... I have to use jquery and it's already bugging me a lot :)

greame, yeah I looked into SAAS / LESS but it's not applicable in my situation... I need to keep the code complexity to the lowest level so that I can easily find not-too-techie-people to update things when I am not around.

Cheers guys, keep em coming.

[dannyboy]

I heard about bootstrap too (a lot of people seem to be using it), but I hate relying on ready-made libraries.

If you're not too keen on Bootstrap, a more stripped down mobile-first grid system is skeleton:
[getskeleton.com...]

It was recently rewritten to be mobile-first. The old grid was traditional -- desktop first, then media queries from biggest (desktop) to smallest (mobile).

If you really abhor using a grid, then these articles might be of interest:

1) We Don't Need Your CSS Grid
[hugogiraudel.com...]

2) Don't Overthink It Grids
[css-tricks.com...]

All frameworks also give you a choice of either inflexibility or learning SASS (or LESS). I would suggest learning how to use @media rules which is enough for simple sites.

Agreed. If it's a small site, then just do the minimum necessary to get things running. If you do choose to learn SASS, then it'll certainly make things a lot easier down the road. For instance, SASS can automate the insertion of your media queries.

[Mroffline]

Thanks for the list ken_b.
I need to go responsive aswell.
I the last days I have gotten several webmaster tools messages from Google telling me about mobile problems.