[ View Thread ] [ Post Response ] [ Return to Index ] [ Read Prev Msg ] [ Read Next Msg ]

BGonline.org Forums

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. That’s 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.

That’s 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.

I’m having a lot of fun with this. I’m 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.

Mike

HEADING_GOES_HERE

COLUMN_ONE_TEXT
COLUMN_TWO_TEXT

Mike

Messages In This Thread

 

Post Response
Your Name:
Your E-Mail Address:
Subject:
Message:

If necessary, enter your password below:

Password:
 

 

[ View Thread ] [ Post Response ] [ Return to Index ] [ Read Prev Msg ] [ Read Next Msg ]

BGonline.org Forums is maintained by Stick with WebBBS 5.12.