New Rules for 2012?

Get Started
1

I’m about to design a website for a cardiologist. Any news rules for 2012 that I should know of? :smiley:

2

What kind of rules were you thinking of? One of the latest trends in web design is to make your layout ‘responsive’ to various media (i.e. not fixed width, but able to adapt to different screen sizes and browser capabilities).

Also, make sure to wash your hands before/after coding, as you never know where that keyboard and mouse have been. :shifty:

3

Don’t rely on JavaScript, make it accessible and Shun HTML5, I believe were mandatory requirements of 2012.

4

I think you mean “shim HTML5”. :lol:

5

No shun… well… to be honest, a string of expletives we really can’t use on these forums; the type of things that if you said them at a truck stop the truckers would go “Hey, watch your mouth, there are mechanics in here.”

If I were to post what REALLY needs to be said about HTML 5, the entire thing would end up looking like this:

**** ******* *** ******** ********** *** ****** **** ******** *************** *******!!! *** ******* ***** ****!!!

… by the time the censor was through with it.

6

How should I go about making sure the website is adaptable to different screen sizes?
I was told to stay away from HTML 5 for now.
Thank you!

7

You get the most flexibility layout by using percentages for width (and fonts declared in % or em). The second most flexible layout can be achieved by using percentages and declaring a minimum and maximum width.
Finally, you can use @media-queries for %/em/px width layouts, though @media-queries are not as widely supported across legacy browsers and mobile devices.

8

Semantic markup with just a few simple DIV as hooks, then progressively enhance it with fluid layouts – tends to be easiest. Using the new CSS3 ‘media queries’ with a little tiny bit of scripting assistance for older browsers can let you reformat the layouts to best fit the constraints of the different screen sizes.

One of my demo rewrites for another user here does a great job of showing how it works in action:
http://www.cutcodedown.com/for_others/sculley/template.html

Three different layouts for three different widths, while fluid on each – within limits. I have a general “screen.css” which is loaded for all of them, and contains the widest layout’s widths, then I load two additional sheets with media queries:


<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="mediumScreen.css"
	media="only screen and (min-width:752px) and (max-width:960px)"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="smallScreen.css"
	media="only screen and (max-width:751px)"
/>

The latter two sheets are really short, and just override a few values here and there:

mediumScreen.css

#homeContent {
	padding-right:157px;
}

#samples {
	height:400px;
	margin-top:-200px;
}

#samples .thumb1 {
	top:0;
	right:16px;
	width:125px;
	height:116px;
	background-image:url(images/homePageThumb1_small.jpg);
}

#samples .thumb2 {
	right:16px;
	top:132px;
	width:125px;
	height:113px;
}

#samples .thumb3 {
	right:16px;
	top:261px;
	width:125px;
	height:123px;
	background-image:url(images/homePageThumb3_small.jpg);
}

smallScreen.css


h1 {
	float:none;
	margin:0 auto;
	background:none;
}

#pageWrapper {
	min-width:256px;
}

#homeContent {
	padding-right:1em;
}

#samples {
	display:none;
}

#content {
	margin:0;
}

#sideBar {
	width:100%;
	margin:0;
	padding-top:8px;
}

#mainMenu {
	display:none;
}

#footer span {
	display:block;
	white-space:nowrap;
	padding:0;
	margin:0;
	border:0;
}

#footer p {
	margin-bottom:1em;
}

#footer ul {
	text-align:center;
}

#footer li {
	border:none;
}

#footer ul a {
	display:inline-block;
	width:30%;
	padding:0.5em 0;
	text-transform:uppercase;
	font-weight:bold;
	vertical-align:middle;
}

Pretty simple, and pretty powerful. It also helps to declare your max-width in EM’s for large font users, notice in the ‘normal’ screen.css this on the outermost wrapper:


#pageWrapper {
	min-width:752px;
	max-width:68em;
	width:95%;

The min-width is to prevent layout breakage when too narrow on legacy (pre media query) machines, the 95% gives us a pretty bit of background showing at the sides on wider screens, and the 68em max-width gives 924 max at 96dpi (thanks to the 85% font-size on body), and 1156px max-width at 120dpi.

though in hindsight, that means small font/96dpi users would never see the third widest width layout… oopsy.