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?
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?
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.
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!
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.
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.
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!
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.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".