Welcome to WebmasterWorld Guest from 34.238.189.171

Forum Moderators: open

Message Too Old, No Replies

Layout with simple 600 width columns

From 1 to 6 columns

     
8:03 am on Apr 9, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member jetteroheller is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 22, 2005
posts: 3062
votes: 6


As I started 1996, the 640x480 screen was standard. So my design was with 600 pixel width.

2000, I developt my first mult-layout with javascript. The 600 width content area was the main part,
depending on screen width, I placed more or less elements left and above the content.
640 - 800 - 1024 - 1600 had been the witching points between the designs.

2015 Google told us to have smartphone friendly screens.
My approach was the zoom. The smallest layout was the 600 width with some pixel border.
Below 600, I zoomed the size to the screen width

But there had been different layout elements with
160 (the 160x600 AdSense blocks)
336 (logo, own book ad and the 336x280 AdSenes blocks)
600 content and all the other elements

Now I reduce to a general 600 width column design
The numbers indicates where from left, the column starts and ends

[10 ---------- 610]
[10 ---------- 610] [640 - 800]
[10 ---------- 610] [640 ---------- 1240]
[10 ---------- 610] [640 ---------- 1240] [1270 - 1430]
[10 ---------- 610] [640 ---------- 1240] [1270 ---------- 1870]
[10 ---------- 610] [640 ---------- 1240] [1270 ---------- 1870] [1900 ---------- 2500]
[10 ---------- 610] [640 ---------- 1240] [1270 ---------- 1870] [1900 ---------- 2500] [2530 ---------- 3130]
[10 ---------- 610] [640 ---------- 1240] [1270 ---------- 1870] [1900 ---------- 2500] [2530 ---------- 3130] [3160 ---------- 3760]

Only execpiton is the 160 column for 160x600 ads.

There are 2 600 width elements which have 2 versions.

A version with more height containing a 160x600 ad integrated or
a version without the as.

element logo and content is positioned by css.
logo always top left,
content below or right from logo.
All other elements are positioned by javascript,
just checking which column is the smallest and adding the next element to the smallest column.

Since some visitors have really 4096 windows width, a maximum of 6 columns is supported.