A truly responsive layout can alter it’s appearance to match any device; a four column design switching to one column when viewed on a mobile, perhaps all font sizes increasing when viewed on a 50″ television. It’s all about taking a good guess at what the environment may be when viewing at a certain size screen size and adjusting the content to work well in that setting. Of course, we can’t always be right, but we can get extremely close.
One of the key problems to solve with the Podio design improvements was clarifying the shear density of information that could be on screen at one time. It became quite apparent early on that Podio’s original width of 940 pixels just wasn’t wide enough to cater for the needs of our users. By collecting feedback and diving into a stats we could see the vast majority of people were using Podio on screens averaging around 1280 pixels wide. To give a better experience to a wider range of people we would have to break out of our restrictive 940 pixel prison. But rather than just creating a 1280 pixel prison; we had other plans – A fluid, scalable, and dare I say ‘Responsive’ layout.
But why the change? As time goes on, the number of internet enabled devices increases – and with that comes an array of screen sizes, ratios and alternate resolutions. Choosing to target only one of these could be deemed foolish, and creating a new layout for each one even more so. By creating a design that could work on a range of sizes and devices we could ensure that a large number of users would receive an optimal experience matching their current browsing needs.
Creating a fluid website can be technically awkward at the best of times, especially for a site as complex as ours, but when armed with some of the hottest development talent in Europe the challenge was on to convert all of Podio’s 75 different layouts into their stretchable and shrinkable counterparts. Based on a custom 10 column flexible grid system (internally called the Podio Flexio Grid) the site can now stretch from 980 to 1440 pixels wide, only limited by the fact the reading line length is too long past 1440 pixels.
The benefits of this fluid grid can be quickly seen, just head straight into Podio. Whilst not much content has been taken away with the other design improvements (in fact, some more has been added) there is now a greater feeling of space whilst using Podio. Careful considerations in placement and negative space all add to a more structured layout, with a clearer hierarchy between the stream and side content. Overall, it just feels better.
This is all just the beginning. The Flexio grid is just the base layer for the future of intelligent design at Podio. We’ve now got the framework to continue to improve the interface based on the environment you’re in, and you’ll see those improvements over the coming months. Fancy 2 columns of widgets instead of 1, 5 columns of app items instead of 4? Optimised view for iPhone, iPad …iWatch? All that stuff is now possible, and me and the team are excited to build it and bring it to you. Keep your eyes peeled, and keep logging into Podio on different devices to see what changes.
As always, we’re keen to hear your thoughts on the new design – add a comment, drop me an email, or give me a nudge on Twitter and we can talk about the new design whilst another bunch of screen sizes are invented.