Grow your CSS skills. Land your dream job.

Responsive Web Design AFTER Desktop Site Created?

  • # May 5, 2013 at 9:33 pm

    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?

    # May 5, 2013 at 10:37 pm

    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.

    # May 6, 2013 at 2:08 am

    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.

    # May 6, 2013 at 3:19 am

    Agree it would be easier if we could see the site in question. I’ve found that it isn’t always a massive problem to go in afterward and convert it. The problem is when someone uses 50 million container divs and a boatload of absolute positioned elements. Those become awful to work with.

    # May 6, 2013 at 4:09 am

    Always doable. But can be very complicated.

    # May 6, 2013 at 2:04 pm

    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.

    # May 7, 2013 at 1:45 am

    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
    # May 7, 2013 at 8:58 am

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

    # May 7, 2013 at 10:01 am

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

    # May 7, 2013 at 1:20 pm

    > Since you haven’t designed it to be responsive you will have to go with adaptive.

    I was just about to say this.

    Basically the breakpoints will be pretty massive shifts in the layout instead of a fluid grid. Paulie is 100% right in that users don’t sit there and resize the browser window. Designers do that.

    I’m assuming that since you are working on it you have full access to the website. I would first start by pulling the whole thing down to your localhost and start with a breakpoint and then just start tearing into the CSS.

    # May 7, 2013 at 10:26 pm

    I was mildly curious to see what people would say on this post.

    As someone who always goes the mobile first approach, converting it isn’t hard at all. It does however take work, but personally I would use SASS, Compass and a grid framework (Susy) for it to do the heavy lifting for the layout. Working locally with a copy of the theme and breaking out the layout (only the layout structure) into a separate file so it can be used as a reference and start on making the responsive layout from there. Worry about all the internal elements afterwards.

    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.

    > Since you haven’t designed it to be responsive you will have to go with adaptive.

    To me that sounds ridiculous and a perfect recipe for code bloat.

    # May 7, 2013 at 11:39 pm

    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.

    # May 8, 2013 at 3:41 am

    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?

    # May 8, 2013 at 4:49 am

    Mobile first is really the way you set up the CSS, personally I rarely start with the actual mobile site when it comes to coding.

    You might already set up the code that way, if you are doing mobile-first correctly, the code ends up sooo much cleaner and useable, it is more a shift in thinking than anything. I was one of the people who didn’t get it at first, until I stuck it out and built a layout that way, then the “ah ha” moment happens and everything becomes so clear. :)

    min-width FTW.

    # May 8, 2013 at 5:16 am

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

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".