Photo by axbom
As smartphones have come to dominate the mobile marketplace, and tablets have begun to steal marketshare from traditional laptop and desktop computers, it has become necessary to create websites which can adapt to various screen sizes as small as three inches and as large as 30 or more inches.
In general, there have been two approaches to solving this dilemma of size and space. One group of designers has committed themselves to so-called “adaptive” design which uses multiple fixed-width columns and generally doesn’t share the same base of code between all sizes and shapes of a website’s design. Another group of designers has dedicated their own efforts to “responsive” design which actually uses multiple columns to make just one design work on devices of all sizes. These designs don’t adapt to screen size by containing separate versions of the template itself, but instead respond to the screen size by determining the page width, number of columns, and appropriate design for the user’s current situation.
Frameworks and Columns — Plenty of Columns
The typical website design is one that contains between two and four columns of content, sometimes used in varying places throughout a design. Most seasoned web designers long ago transitioned to a grid-based design format, so these columns are relatively inform in their width and height throughout the site’s design. While this is fine for strictly desktop and laptop browsers, it is not okay for mobile devices which have room for exactly one column in portrait mode, and maybe two columns in landscape mode.
Responsive Design Turns Web Design Upside Down During Development
The unique thing about responsive design is that those web professionals who employ one of its many frameworks actually begin by designing for a single-column mobile layout first. After all, the biggest reason behind taking a website from adaptive to responsive design cues is to pull in smartphone and tablet users without forcing them to install a mobile application, scroll left-to-right, or zoom in on a full-size webpage. For this reason, a responsive design made of ten columns is almost always designed with its single-column format squarely in mind; designers should then scale up their designs to tablet-sized screens, laptop screens, and even larger desktop-style screen sizes as they continue work within the twelve columns which are typically a feature of any responsive design framework.
The Key is Instant Response to Environment Changes
A website that perfectly utilizes a responsive framework will adapt to sudden changes in its environment, and resizing a web browser window will show off its capacity to blend with larger or smaller viewing sizes. A good responsive design is one that is not constrained by smaller screens, nor made to appear awkwardly compact on larger desktop displays. It’s quick, efficient, and employs the latest HTML5 and CSS3 technologies to turn a standard, static website into one which which is both aesthetically pleasing and highly usable across the board, no matter the user’s data connection or screen size. It’s a truly innovative way to break free of static limitations and pixel definitions, instead embrace the fluidity of the modern web.
What experiences have you had with responsive design? Learning the ropes? Been at it for a minute? Let us know in the comments.