We Love Brisbane – Website Design » Design The World

In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.

Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.

We’ll also be discussing the advantages of rearranging and resizing responsive elements in a flash, and what that means for your next project’s workflow. At this rate, we’ll hopefully be seeing the back of those pesky clearfixes in the near future!

Have you used the flex box approach to layout? Do you prefer a different method? Let us know in the comments.

Featured image/thumbnail, flexible image via Shutterstock.

1000+ Royalty Free Vectors + 50 Free Textures – only $17!

Source

thumbnail The side project series is a series of posts in which we’ll be taking a look at the best of designers’ side projects. To get things started, this week we’re going to be looking at Type Fight, a side project by designers Drew Roper, Ryan Paule and Bryan Butler.

Type Fight plays host to weekly “fights” in which two designers are asked to create a typographic treatment of the same character and then have their final designs voted on to determine whose is best. So far, Type Fight has hosted 61 guest fights between design heavyweights such as Alex Perez, Rogie King, Brendan Pittman, and Aaron Eiland, to name a few. There is also an ongoing battle between Drew and Ryan, who are now due to face off for an 11th time.

At the moment the site is on hiatus whilst currently being redesigned. However, you can still check out the old site and all of the fights that have previously taken place.

Here’s our collection of some of the highlights: