Welcome to WebmasterWorld Guest from 18.212.92.235

Forum Moderators: not2easy

Message Too Old, No Replies

Going Responsive

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

     
5:02 pm on Feb 20, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2003
posts: 1550
votes: 0


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.
5:55 pm on Feb 20, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 5, 2001
posts:5858
votes: 104


Here's a place to start:
10 Top Tips for Responsive Design [webmasterworld.com]
6:25 am on Feb 22, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 24, 2000
posts:1748
votes: 5


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. :}
6:58 am on Feb 23, 2015 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts: 2834
votes: 148


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).
9:10 am on Feb 23, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2003
posts: 1550
votes: 0


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.
2:54 am on Feb 27, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 15, 2003
posts: 83
votes: 0


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.
10:35 am on Mar 3, 2015 (gmt 0)

New User

joined:Mar 3, 2015
posts:12
votes: 0


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.