> If you are going to redo it, going with adaptive seems pretty half ass and like it wouldn’t be worth it to do all that work when you could have just gone mobile first instead. Which if done correctly isn’t anymore work than adaptive, and actually will have much cleaner/manageable code.
I think this is the heart of the argument though. There seems to be no indication that they are going to redo it. And maybe this is just me interpreting the project incorrectly, but this is a desktop website that is not going to change but also now wants mobile support.
I don’t think anyone is going to argue is obviously much better to develop with mobile (or just ‘any device’) in mind, but the discussion is much different when your proposal to the client is “we’ve got to completely redo it” versus “well, we have some options – what is your budget and what are your goals?”
I’ve had situations like this where we just decided NOT to do anything until 6-12 months down the road when they were considering redesigning the entire site anyway because it had already been a year or two.
>I think this is the heart of the argument though. There seems to be no indication that they are going to redo it. And maybe this is just me interpreting the project incorrectly, but this is a desktop website that is not going to change but also now wants mobile support.
That’s the way I read it too.
I recently converted an existing site to become responsive and I used bootstrap to do all of work.
You just need to know what components you want to become responsive (navigation, buttons, etc.).
I suggest remaking one of your pages completely by scratch using only bootstraps components and styling.
That way you learn about spans and all the components you might potentially need.
Then for the most part depending on how your page is done you can copy all the content into your bootstraps layout for that page.
> What seems easier to you? Defining 100 ‘desktop’-specific layout properties in your css, then reset all 100 of them in a max-width MQ… or just define those layout properties in a min-width MQ? I think that sums up the reason behind mobile first pretty much.
Well, I use a very simple responsive grid system that I’ve developed. I can apply multiple classes to an element, e.g. “col-1-3″, “m-col-1-2″, and “s-col-full”. This automatically takes care of 90% of the “responsiveness”. The rest is just fine tuning, getting rid of :hover styles, etc. I find it easier to use max-width rather than min-width for stuff like this.
Not to mention, I’m designing in a desktop web browser, so it makes more sense for me to design the desktop layout first.
I could always design the desktop site, then rearrange everything so “desktop-specific” styles are applied later rather than overridden. In theory, it makes a lot of sense. But isn’t that a lot of work?
> But isn’t that a lot of work?
Nope, especially if you are using SASS (and hopefully Compass). Once your thought process shifts and you figure out all the cool ways to do it (where SASS/Compass come in), it can be super simple.
It is hard to really grasp without building a site using mobile first, a smart way to learn would be to convert an existing site you are familiar with (preferably one you built) to mobile first.
If you are using SASS/Compass and SublimeText, and were going to try out mobile first, use this snippet and mixin, super helpful. http://scottnix.com/placement-of-media-queries/
> SASS is way too fancy for me. I never really had a problem with plain old CSS.
This is like driving a beat up automatic mini van because it gets you from point A to B, but having a Ferrari in your driveway (that you could drive) but you don’t want to take a few days to learn stick shift
Trust me, SASS is exactly like a Ferrari, both are awesome and will get you laid.
All kidding aside, bite the bullet and learn SASS, it takes 2 days max to get the hang of, from there you are good to go and will be able to progressively learn as you go. It is possible it is only going to get more complex, jump on the bandwagon now! :)
@cwork I will write up a little example that I can link to after I eat. What I am getting at is it doesn’t matter where you start, you build the code mobile first. So if someone hands you a 960px PSD, you still code that up mobile first by just knowing to structure your CSS for it from the start :)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".