Grow your CSS skills. Land your dream job.

A Fully Responsive Website.

  • # September 9, 2012 at 2:35 pm

    Hey Everyone,

    I’m an aspiring designer & developer from the UK. I’m new to WordPress and the concept of Responsive Web Design. Over the weekend I have managed to build a custom WP theme from scratch and made the theme responsive. However, the site only changes layout at set break-points and is not ‘fully’ responsive like the http://www.css-trick.com website. Can anyone shed some light on what I should be doing to make my site so responsive / fluid?

    Many thanks,

    Craig.

    # September 9, 2012 at 3:29 pm

    You can always add more break points rather than just the ‘standard’ ones.

    If at 536px (for instance) wide you need the design to look a certain way then just add that as a break point.

    # September 9, 2012 at 3:43 pm

    Thanks for the quick response Paulie. I’m not sure if adding more break points would help in this instance. If you resize in a desktop browser my test site behaves in this way http://www.blog.craigbibby.com/ when I want it to behave in this way http://viljamis.com/blog/. Any other thoughts?

    :)

    # September 9, 2012 at 3:48 pm

    Can you specify what behaviour you are after. It might just be that the second site is using transitions

    # September 9, 2012 at 3:50 pm

    Try combining your break points with percentage widths for your layout components. Use google chrome’s developer tools to analyse what developers are doing with their CSS in order to produce an effect.

    Maybe consider having a look at grids such as http://cssgrid.net/ to get a feel for how some developers have implemented such systems.

    # September 9, 2012 at 4:04 pm

    Yes, definitely make the widths and side margins %’s so they’re fluid and then you’ll be able to see where you need breakpoints much easier, plus it will flow so much more gracefully.

    # September 9, 2012 at 4:14 pm

    Thanks for the responses guys. I’m looking at the same effects as Viljamis blog were it transitions gracefully and seems more fluid. My test site seems to just drop size at the break points which I don’t like. I will experiment more with %’s and see what I come up with.

    Thanks again guys!

    :)

    # September 9, 2012 at 5:48 pm

    I think the effect you’re really looking for will depend on percentage based, rather than pixel based widths for your elements.

    I’d recommend using percentage based widths and then adding max-width: XXXpx; – that way you can have a somewhat fixed width at each size but when the width is downsizing the effect of each breakpoint will be less jarring.

    Additionally as others have noted, css transitions are a cool way to change at breakpoints.

    # September 9, 2012 at 6:17 pm

    Thanks Andy. I’m not familiar with CSS transitions as yet. I will experiment with percentages & max-widths & see what I can come up with.

    I’m trying to create a very basic responsive custom theme in its most simplest form as a foundation for all future projects.

    :)

    # September 10, 2012 at 6:54 am

    No worries – have you thought about using a framework to help? I stripped out and merged the best bits of 1140px grid and HTML5 boilerplate into my own framework that I use as a base to projects.

    # September 10, 2012 at 4:33 pm

    I tried to merge the Skeleton grid system with the custom theme I built but couldn’t get it functioning correctly. Like I said I’m new to WP & RWD! :) However, I did take some ideas from the Skeleton theme which itself breaks at different points quite harshly rather than fluid transition like I aimed for. Maybe taking a different boilerplate may work. Which do you recommend! I’m trying to keep the framework I develop as simple as can be!

    # September 10, 2012 at 4:57 pm

    Mine wasn’t for wordpress, as I don’t usually use it for customer sites it’s just straight HTML/CSS with some required scripts etc.

    What I’d recommend is starting with a HTML/CSS/JS framework that you have built/modified to your liking, then I would use Skeleton to grab all the WordPress related stuff and thusly create a base them out of that.

    That way you’ll know exactly what each part does – can comment to your liking so you’ll remember later – and future wise – if something goes wrong (which it will at some point!) you’ll be able to narrow down and fix super fast.

    # September 10, 2012 at 5:03 pm

    Thanks once again, I appreciate the response.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

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