Responsive Web Design AFTER Desktop Site Created?

[StephBertha]

Hi there,

I know the best way to do a responsive site is before the desktop site is created, but I wound up doing the opposite.

The site is coded with fixed values, but I just started learning Bootstrap.

My question is… is it worth it to spend the time learning more Bootstrap and recoding the site with Bootstrap or am I ok with coding the responsive CSS with fixed values?

[Ilya]

It depends, bootstrap is awesome once you master it, and it is easy to understand. However I don’t like using it, just too much unnecessary code (my opinion). You can get away with fixed values if you use media queries, I guess. So you can change your website slightly for common screen resolutions, like desktop, tablets and smartphones. However if you wan’t to truly master responsive design I suggest you plan out your templates with flexibility in mind, so less fixed values. Of course it is perfectly normal to use fixed values in some parts.

[will_wallace85]

Without seeing your site it’s a bit difficult to comment, but I think the easiest way to do this would be keep your defined width on the main desktop site, but re-encode the inner content to be more fluid. Then you can start your first break point at your current baked in width and go from there.

[Kitty Giraudel]

Always doable. But can be very complicated.

[StephBertha]

Hi Ilya,
Yeah, I understand about the code bloat. I noticed that too. I’m certainly working towards planning out my templates with flexibility in mind. Bootstrap has certainly gotten me in that mindset!

Hi will_wallace85,
Hmm… interesting! By the way, my site is http://www.barstoolcomforts.com/

Hi JoshWhite,
Sure, the site is http://www.barstoolcomforts.com/.

Perhaps one of you guys could give some pointers based on my site. Would be appreciated :) I’ve done some responsive, but not on a big site like this.

[contentJones]

This is a challenge. You might be able to set all/most of the elements to 100% width at a lower screen size. But that would be incredibly time consuming and may not work very well.

I’d suggest re-coding it with a fluid grid. Bootstrap would be great for that.

PS – You might be better off using an ecommerce platform like shopify.com, using one of their mobile templates. ecommerce is extremely hard to design for mobile.

[MBM]

> @contentJones PS – You might be better off using an ecommerce platform like shopify.com, using one of their mobile templates. ecommerce is extremely hard to design for mobile.

I’ve been looking for an alternative to free platforms like prestashop which is an absolute pig to configure and couldn’t find any I was happy with so have developed my own which uses paypal as a gateway. There is no back-end. You generate button code from within PayPal and add it to your website. The advantage if you have complete control over design.

[Paulie_D]

>Perhaps one of you guys could give some pointers based on my site.

I’m no expert but in terms of ‘basics’, your site is OK until we get down to less than the 1000px range because that’s the wrapper width.

What do you want it to look like at say 768px, 480px or 360px.

Since you haven’t designed it to be responsive you will have to go with adaptive. The vast majority of users **don’t** resize their browsers.

Once you have decided how you want things to look bring in the media queries and start moving things about.

[will_wallace85]

What Scott said. Start with your site at the width it’s currently set for, work locally and just grind it out. It’s gonna take time, but you’ll get there.

Personally, I like pulling things into photoshop to get a Birdseye view of where I want things to move around before I just start coding, but that’s a personal workflow prefence.

[KeithPickering]

Is my workflow weird or something? I ALWAYS design desktop first, but I use fluid widths for literally everything. This makes it really easy to scale it down for smaller screen sizes.

Am I missing something? What benefit is there to mobile-first design?

[CrocoDillon]

> What benefit is there to mobile-first design?

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.

[Paulie_D]

>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.

[NghiQuach]

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.

[KeithPickering]

> 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.

[KeithPickering]

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?

[Author]

Posts