OT Responsive Web Design
Posted By: Taper_Mike
Date: Tuesday, 13 August 2013, at 7:16 a.m.
Responsive Web Design
There is a school of web design now emerging, called responsive web design, that is based on the concept that a single web site should work for both small screens and large.
Emphasising mobile first, the idea is to eliminate the need for maintaining two different sites, one for pcs and the other for phones and tablets. By targeting the mobile device first, and creating an effective web design around blocks that fit comfortably on mobile screens, it is easy to expand a design when a wider screen is detected.
One faction of the responsive design school advocates using ems for all measurements, where an em is the width of upper case M. See, for example, The Goldilocks Approach. For these designers, the typical block is 30 ems wide.
After first trying 35, and then 32.5 ems, I have finally settled in on 30. Thats the width of the blocks in this message.
The Goldilocks demo is quite interesting. As you drag in the side of the window, reducing its width, you can see the web page reorganize itself to accomodate the smaller space. Microsoft recently redesigned their home page this way. Scroll down past the picture at the top, and then watch what happens as you drag the edge of the window left and right.
Thats also what is happening with the blocks I am using here. On a pc, if you drag in the edge of the window, you will see the blocks change from a horizontal, side-by-side, layout to a vertical one. On a cell phone or tablet, the same blocks are always displayed vertically.
One quick way to switch back and forth under Windows, is to hold the Windows key down, and then tap left arrow for half-width, and up arrow for full screen.
Im having a lot of fun with this. Im also learning a ton. But my bigger goal is to produce a set of templates that are easy to use, and which provide a better viewing experience on both small screens and large.
Did You Say Free?
When I have hammered out the glitches, I will be sending out my templates free for the asking. Below is the one I used for this message. All I had to do was paste in the template, and then start typing.
Messages In This Thread
BGonline.org Forums is maintained by Stick with WebBBS 5.12.