I'm doing my website up as a responsive web design project. I've learned that it's best to design for mobile screens first and then when you up scale up to more complicated layouts. Which I kind of agree with to a point. But i don't seem to want to go down this route. I'm going to have to create these elements anyway even if they're hidden by CSS. Would it not be better for me to create cleaner content by getting a feel for the design in the browser then by creating a fluid design.

 

How does it work for you, going mobile first?

I recently heard it was note effective to go the mobile route first and then use @media queries to make it suitable for desktops, tablets and so on..

 

However, I've never actually tried this. Itd be nice to know what others have to say about this.

I recently heard it was note effective to go the mobile route first and then use @media queries to make it suitable for desktops, tablets and so on..

 

However, I've never actually tried this. Itd be nice to know what others have to say about this.

I'm tempted to just go with what I know but I my as well try something new with this project, Obviously media queries will be utilised either way.

I use both min and max width media queries, it's really handy. However my approach is desktop first, I personally think it's a tiny bit too early for a mobile first approach (at least for me and most of my clients).

Theres a lot of debate over which approach is the best, both sides with valid arguments. I think the most important thing is to be aware when you are coding is that it will need to scale one way or the other so it should be written in a way that makes the scaling process as efficient as possible.

 

Avoid duplicating html and using display none. Its bad for seo and users on screen readers.

I would recommend you to keep Desktop approach at starting and later you can think of about Mobile.

It really depends if you have to cater for older versions of Internet Explorer which don't recognise media queries or min-width/max-width CSS declarations. Like Teodora, for many sites I use a fixed width default for "desktop" and use media queries to provide styling for smaller screen sizes - it really depends on your audience and what you want to give them, certainly for a live client site it's something that needs considering which way you go.

 

As far as the future goes there is no such thing as "mobile", instead it's more about creating sites that adapt for viewing on any platform, device or screen size.

There are javascript fallbacks for IE to enable media querys though so i don't think that should influence your decision.

If you use an IE stylesheet, you won't need the javascript solution. Question of choice of course.

I only use Modernizr now and find it does what I need.

I don't think of it so much as mobile and desktop. I think of it as if a user was resizing their browser.

 

If they halved their browser screen, would have my site be cut of? Or do I need to adjust something so everything is still in sight?