The DT Blog

We try to keep you up-to-date with the latest trends in web development and graphic design, while also writing about our hobbies or trips from time to time.
If you enjoy what you've read, give it a like or a share!

Behind the Scenes Look

After several years, I've finally updated my website.  As is often the case, "The cobbler's children have no shoes."  However, I finally got around to recreating my website.  The truth is I've been wanting to get in some practice with responsive layouts.  I didn't really think it was fair to experiment with my clients' sites.  So, I decided to try a little bit with my site.  While you are here, why don't I tell you a little bit about what responsive layouts are, and why they are important?

Definition

By definition a Responsive Layout responds to the screen on which it's viewed.  But technically that's not true.  The layout of a website responds to the code.  It's always been that way; it will always be that way.  Sometimes it responds to different codes, but it's still the code that the makes the rules.  The difference is that with a Responsive Layout, the code itself responds to screen on which the website is viewed.  See the way this site looks at different widths.

 Responsive Layout Example

Comparison

Odds are that doesn't sound like a big deal to you, but to us designers it's somewhat of a paradigm shift.  We've always battled with how to code websites knowing that there is a wide range of screen sizes, widths and resolutions out there.  When mobile usage came along, this became a even greater issue because the variance was so vast.  One might view a site on a desktop with a 1920px width screen or a phone with a 480px width.  That's a big deal!

So, we moved to a more adaptive format that allowed us to specify which code to use when.  Of course, there were some inherit problems with this as well.  It would probably be best to compare and contrast the three different layouts and what they each offer.

Responsive

Responsive Layouts read the screen resolution and direct the appearance of the website based on what it finds.  If you code it correctly, you will have a fluid and beautiful, percent-based design on any screen.  The problem is that there are thousands of resolutions.  So, you don't really know exactly how it will look.  There are even some full-screen monitors with lower pixel widths than some tablets.  So, testing such a layout becomes somewhat of a chore.  The great irony is that with Responsive Layouts there is less code but more coding.

Adaptive
Adaptive Layouts create different sets of code based on a few different states.  Most of the time you have desktop code and mobile (read phone) code.  Each code specifies an exact pixel measurement that is rendered on a screen regardless it's size or resolution.  Therefore you knew exactly what it looks like on a phone; you knew exactly what it looks like on widescreen laptop; you even know exactly what it looks like on a full-screen monitor.  The problem, of course, is sometimes it looks bad.  You either have to take into account full-screen low resolution monitors or accept the fact that your layout will not be able to adapt quite as well as its name suggests.

Static
Static Layouts don't adapt or respond to much of anything.  They just kind of sit there.  They are usually designed with only one screen width in mind, and anyone else is just plumb out of luck.  Why, in this mobile age, would anyone want to use a Static Layout?  Static layouts are really the only way to display static applications like say ... Flash.  How many times have you gone to a flash site that only covered a quarter of your screen?  Yeah, that's because the layout is static.  Unfortunately, the world is dynamic!

The Importance

Actually, that is the importance.  The world is dynamic!  You can be stubbornly static and get left behind.  You can be passively adaptive and keep up with the world around you.  You can be proactively responsive and anticipate needs before they arise.  The choice is yours!