SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    That would be quite easy. You just have to decide how you want things to site at various breakpoints and set styles accordingly.

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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..

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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"

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by madhubasu View Post
    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.

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure Ralph..will try it out...Are there any tools that can help in converting HTML elements into responsive??

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by madhubasu View Post
    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.

  9. #9
    SitePoint Member
    Join Date
    May 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by madhubasu View Post
    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.

  11. #11
    SitePoint Member
    Join Date
    May 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome...Is there a way I can chat with you??I need some guidance to becoming a successful freelancer!!

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by madhubasu View Post
    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.

    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/

  13. #13
    SitePoint Member
    Join Date
    May 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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/

  15. #15
    SitePoint Member
    Join Date
    May 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great advice..thx much..Hw has this journey been for you?

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by madhubasu View Post
    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!

  17. #17
    SitePoint Member
    Join Date
    May 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all the best!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •