Convert an existing site into responsive

Hi

How tough would it be to make the middle area(section:banner) of this website responsive?

http://demo.geekslabs.com/gatwick/airport

That would be quite easy. You just have to decide how you want things to site at various breakpoints and set styles accordingly.

Hi Ralph

I wanna get them one above the other …U’ll notice that they are all absolutely positioned…How can I implement this for all breakpoints…

The first thing I would suggest is to remove the positioning. You don’t need that anyway, but it will get in the way in a responsive scenario. Instead of the positioning, make each element a block that has 100% width. That way, they will naturally sit vertically. Set styles to kick in at whatever width is needed. You can probably just do this once.

Thanks a lot Ralph…Just wanted to understand this “The first thing I would suggest is to remove the positioning.”: so here would I need to remove absolute positioning from the media queries and make them “relative”

No, I really meant remove both absolute and relative (i.e. position: static). position:absolute is often more trouble than it’s worth, but here you definitely don’t want it. Just make sure to organize your HTML such that the elements you want on top come before the elements you want below.

Sure Ralph…will try it out…Are there any tools that can help in converting HTML elements into responsive??

I don’t really think it’s worth trying to rely on a tool, even if there is one. It’s best to plan this out from the start, and code the layout optimally for all scenarios. The HTML on that page looks more complicated and awkward than it needs to be, which makes it harder to readjust for a different screen size. You really have two boxes there, which ideally should be at the same level in the HTML and perhaps floated. That way, it’s easy to unfloat them at a certain screen width, so that one sits above the other.

Responsive design is a bit of a game changer for the web, because it forces us to think more carefully about our page structures. When you are only thinking about big desktop screens, it’s easy to fall into the trap of pinning things to the screen with position: absolute etc., but that presents a lot of problems when you are trying to make the page more adaptive.

You are abolutely right Ralph…This was developed by a client and I did find the same issue too with the arrangement of the elements in the middle portion…Looks like you dont like much of Twitter bootstrap…Is there any particular reason for it?

Hehe, I dislike all such frameworks. You end up with a situation like you face now: wading through a bunch of code that’s hard to understand rather than creating clean, simple code that meets the direct needs of the layout. Lots of people come here with framework issues, and these are issues they didn’t need to have, IMHO.

Awesome…Is there a way I can chat with you??I need some guidance to becoming a successful freelancer!!

Hm, I’m about the worst person to talk to on that score! But these forums are a great place to talk and discuss all things web, so fire away. :slight_smile:

There are also lots of good books and tips on freelancing. I was recently enjoying some stuff on Paul Boag’s site: http://boagworld.com/

Thanks Ralph…Its just that I am a bit confused on pursuin web designing as a career in my mid 30’s…I have been a project manager throughout my life but had 2 quit due to some personal reasons…and found some solace in web desining…I started learning it from last year Nov and have been able to score just 1 project ever since…Theres too much competition in the mkt and terrible fight for pricing…Here’s my portfolio site if you wanna it check it out…www.clouditheaven.com…

Yes, it’s not easy. There have been some useful blog posts on SitePoint of late with freelancing advice. Basically, you have to be proactive, go out and meet people. One idea is to visit local businesses, get to know them and propose that they have a website—even if just a simple one.

Here’s one Boag podcast that discusses freelancing: http://boagworld.com/season/6/episode/s06e04/

Great advice…thx much…Hw has this journey been for you?

We all stumble along in this new discipline, I guess. Like you, I’ve come to it from something different, but there are lots of avenues to pursue and lots of things you can specialise in, so I guess there are lots of opportunities. There aren’t any rules, though, which can be good and bad. I haven’t really found my niche yet. Not sure if I ever will, either! :slight_smile:

:slight_smile: all the best!!