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.
