Deciding on Fixed Width, Responsive Design, or Mobilized Website Design

With the increased use of tablets, smart phones, and computers with screens of varying sizes, websites with Responsive Design have become more popular. However, there are actually three predominant approaches website presentation:

  • Responsive Design. A website with Responsive Design has the ability to automatically adjust and size images for the device being used to view the website. Even resizing a browser window will result in an immediate and smooth adjustment of the site.
    • Drawbacks. Site graphics and layout may change or be removed once the site shrinks for a smaller view. While full-size websites are easily customizable, usually the smaller responsive versions don’t have as many features. For example, let’s say you’ve spent a lot of time making a nice website header, and some really cool right column widgets. Those will likely be removed as the site responsively gets smaller.
    • Example. Watch what happens as you resize your browser window while viewing this website: http://kurikomizuno.wordpress.com
  • Mobilized Design. A website with Mobilized Design immediately presents itself in a smaller and limited view with an almost app-like interface.
    • Drawbacks. Site graphics and layout are typically removed for the smaller view. While full-size websites are easily customizable, usually the smaller mobile versions don’t have as many features. For example, let’s say you’ve spent a lot of time making a nice website header, and some really cool right column widgets. Those will likely be removed as the site responsively gets smaller. If you have a long list of menu options, those won’t be easily viewed or navigated in a mobile presentation. Other strange things may happen. For example, viewing WikiPedia.org on an iPhone presents a similar yet different website design. The “Reader” feature in Safari (that allows you to copy and paste an entire article into an email) is no longer available. So, it’s necessary to switch from Mobile view to Full Site view (found at the bottom of the page) to get the Reader feature back. Other functions may not work properly in Mobile view.
    • Examples. Compare these two Wikipedia articles to see the difference between a mobilized and full website.
  • Fixed Size Design. Surprisingly, a Fixed Size Design can be the easiest to work with. Some fixed sites use plug-ins to make them Responsive or Mobile, but these can be turned off. With a Fixed Size Design, your website will appear the same on all devices. A good choice is to have content as a text column fill 2/3 of the page on the left. Then have 1/3 of the page as a column on the right with additional widgets. This makes it possible to turn a smart phone on its side and easily read your content.
    • Benefits. You can design your site how you want it to appear for all devices and it will be delivered that way. It will still be readable, and navigation will perform the same for everyone. This also makes it easier to give people instructions about how to use your site since everyone will see the same content in the same places.
    • Example. ResourcesForLife.com is an example of a Fixed Size Design website using the Twenty Ten WordPress theme.

20120204sa-design-review-improve

Advertisements

2 thoughts on “Deciding on Fixed Width, Responsive Design, or Mobilized Website Design

    • Responsive design need not cost more, necessarily. There are a variety of templates out there. Even custom designers often use a CMS ‘platform’ to build on and those have drag and drop tools as well as user definable settings for how to handle scalability. Although, I’d have to agree that a highly customized responsive site would take more time. Ideally you’d specifically tweak the site layout and appearance for each screen size and make sure it’s optimized at every level (and not just generically scaled).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s