Responsive Design

How does Bryce Web Group respond to the responsive design trend?

What is Responsive Design?

Linked here is a good article on what responsive design actually is: http://www.webdesignerdepot.com/2013/06/must-know-facts-about-responsive-design/

Essentially, "...this design approach is based on the principle of making websites of all sizes provide the most optimal experience to the user — no matter what they’re using to view the site."--Marc Schencker

What does BWG do about Responsive Design?

All our HTML is equipped to potentially be responsive; however, your website graphical design may not be responsive.  For example, your website can look good on most screens; but may not play well with small screens.  Technically, a responsive design would shrink in width for smaller screens.  Your design may cover most screen resolutions; however, does not compromise content width for small screens as a responsive design would.

What will my site look like?

If you take your existing website width, and continued to shrink it down, or stretch it out, you'll have an idea of how it might look. It will most likely not look as "pretty" because it has not been designed specifically for all screen sizes.  In most cases, a responsive design adjusts a site width for smaller or larger screens, to allow the design to "respond" to the resizing which generally requires the content area to stack vertically on small screens, creating long scrolling.  To avoid long scrolling, as this can be irritating to the end user, you would simply remove callouts, ads, and other extraneous elements from the left or right side, and focus more on the content area.

A Quick Example

To the left is a quick mock up of a non responsive graphical design, edited to be responsive on a small screen.  This is a conceptual representation - it would not literally look like the graphic provided.

You should have realistic expectations of the consequences of making a design responsive - it essentially means your site will look and act differently on different devices.  The smaller the screen, the more focus should be put on important content and functions.

Responsive design is not a magic trick or cure all.  It is a well thought out compromise of your website aesthetic and functionality, depending on screen dimensions.  This requires that every part of the website be modular enough to resize, stack, stretch, shrink, etc.

What Will Change?

Homepage banners, for example, tend not to be responsive, and cannot be responsive, due to a static width - a compromise would be to stretch or shrink by width, or crop by width - all of which may disrupt the original intention or appearance.

The number of items displayed horizontally will vary on each device.  Vertical stacking may be more or less, depending on the device.  

Isn't This Just a Mobile Site?

In summary your website will look remarkably like a mobile site on smaller screens. The design must be intelligent enough to essentially take a full screen of content, and reduce it down to what will fit on a phone screen, potentially a maximum of 320 pixels in width.

Is this result superior to a mobile site?  Not particularly, because it is inevitably less optimized for a small screen than a design specifically for a mobile site.  Responsive design is a compromise in aesthetic.

If you had a specific design for every screen size, you would have a mobile site (small), a tablet site (medium), and a full site (large).  Responsive design is a script and style based solution to optimize for each screen size by starting with a full site design, and fitting it into every screen size through scaling, stacking, and hiding elements.

How Do I Know if This is For My Association?

Bryce Web Group can create a responsive design test page, which retrofits your existing website to fit small screens automatically, without changing anything else on the website (no redesign).  If you are convinced you want the website to be responsive, and you are fully satisfied with your current design, it will likely take approximately 10 support hours to retrofit your site to be responsive without a redesign initially.

This does not mean every single page will appear and function perfectly when screen width is lost. That would require testing and tweaking every single page. The website would essentially give you responsive design capability that satisfied most pages and conditions.

 

Final Thoughts

Our mobile solution is optimized for small screens, so if you want to maintain a specific aesthetic for large and small screens, then we would recommend that route.

Responsive design covers large and medium screens very well; however, on a small screen at best you would end up with something that looked and worked like a mobile website; except with a page load the size of a full website, costing end user bandwidth, download time, and additional rendering lag from browser processing.

Some customers have requested semi-responsive designs - better meeting the medium and full screen device audience with approximately a 30% width flexibility.  For small screens they used our mobile solution, which guarantees proper rendering down to 320 pixels for small smart phone screens.  Our mobile sites are fully responsive in width and fit all small screens in the best way possible - for example, if you rotate your phone, the website will fit the screen width in full.

Most customers prefer complicated designs with specific end user focus and marketing, which requires significant compromise when rendering on small screens.  Currently no customers have taken the leap to a fully responsive design website.

We are happy to provide a responsive design website, or retrofit an existing website with responsive design, for any customers who are willing to commit to the project and compromise in aesthetic, which will vary on each type of device.

LAST UPDATED 5/30/2013
Contact this Author: < Nicholas Bott > nick@brycegroup.com

Comments