Best wait screen ever!

Every website will run into issues once in a while, but it takes a bright spark to deal with the people waiting for the site to load just as much as fixing/upgrading the internals. This is why I was particularly pleased with Lowes‘ recent wait screen.

These are a series of animated clips strung together of various characters waiting in line as one or more poof in and out of the line, all to the tune of soothing elevator music. What’s nice is that it immediately takes away the frustration of not having access to what you were looking for in the first place (in my case plumbing fittings).

Somebody's Kung Fu Fighting

Somebody’s Kung Fu Fighting

Mr. Roboto

Mr. Roboto

WOW... Literally

WOW… Literally

A little bummed I couldn’t get to the plumbing fittings, but suddenly, I don’t mind as much.

Don’t worry, I’ll be posting a real update soon.

Advertisement

Mobile or Responsive? How about both

This started off as just another reply, before I realized I’m me and I don’t know when to shut up so here’s a reply in post form.

There’s little reason to be either/or in this case though.

I’ve been working on a side-project (a discussion forum basically) and been experimenting with ideas on mobile friendly pages.

It’s far from perfect, but for my purposes, it gets the job done. And I don’t claim to be a design “expert” since that’s not my forte, but I have designed for clients before.  I… er… “borrowed” a few topics from the front page of the WP support forums for the first example before switching to faux latin for the rest. Also stole borrowed the sidebar cues for the “topic” page from the support forums as well (which is running bbPress), but I’m using none of the same CSS. I think I’m done with Version 3.

I’m using just one stylesheet that makes the page adapt to any screen size between a minimum 480px to 1000px+ and the visitor doesn’t need to refresh the page.

I kept the range at that wide because there are still users of older monitors (that they don’t want to change for whatever reason or are unable) that still deserve to participate online and those are usually maxed out in the 800 – 1024 range. Tablets also fit the upper limit of that range these days.

Anyone should be able to resize the browser and see the page change styles. The “mobile” version (on the smallest window size) was designed to give maximum contrast. That’s to make it easy on the eyes since it’s pretty painful to browse a lot of sites with their tiny-weeny text and ridiculous backgrounds on a mobile device.

There’s a drive to create these “mobile specific” pages, if that’s the right term, from a lot of web designers and I totally disagree with the premise. I can understand if it’s a heavy-duty web application where one template can’t serve all platforms, but in most cases, it’s just a corporate site or blog that can just as easily be served with an adaptable stylesheet. I think it’s just narrow thinking for the most part.

It’s absolutely possible to design a site that will adapt gracefully to a mobile device while not depriving the desktop experience. Just a matter of leaving aside the junk, of which there is plenty sadly, being served to the client regardless. I wrote about that too a while ago.

Don’t get me wrong. There are very talented designers out there that go out of their way to make attractive mobile pages, but their focus should be “how much” they send to the client and not just “how pretty”. Data plans aren’t cheap after all and “unlimited” plans aren’t really “unlimited” or available everywhere a lot of times. Also a lot of mobile browsers aren’t capable of the voodoo that desktop browsers are capable of (yes even Safari on iPhone).

Sometimes designers just need to step back from their projects and go “what is it that I’m trying to accomplish here?”

The golden rule of web design always applies. The theme should fit the content, never the other way around.

Well, hopefully all that made sense. I don’t normally comment on web design choices unless they’re keeping me from browsing comfortably (like the Huffington Post which I’ve abandoned as a result), but since I was interested, there ya go.

8:00PM I’m tired and it’s been a long day so I’m off to hit the hay. Night!

New YouTube theme

You’ve probably seen a few experiments here and there on YouTube where the theme suddenly changes only for it to change back on the next video or even the next page refresh. There were even instances where the same page was showing different themes for different browsers at the same time. Looks like the YT team is going to match the service to the rest of the Google suite (like Search and Plus).

For those of you who missed the experiments, here are a couple of examples.

The new home page (as it appeared a few days ago)

New video page

 

What’s the point of HTML5 Boilerplate?

This isn’t a rhetorical question, I’m genuinely trying to understand what the point of this package is. I’m sure a lot of people have invested a lot of time and energy to it, but maybe I’m just missing something.

And I did read the “Why it is good” section on the project site, but still couldn’t figure out why all of this shouldn’t be known to a designer to begin with as it seems to me that this stuff is a collection of Googlings or stuff that can be resolved by browsing the spec page for a bit. And browser quirks aren’t something that will trouble you if you keep to sane uses of CSS and HTML; a lot of problems can be avoided when following the rule of Less is more.

Cross-browser compatible (IE6+, yeah we got that.)

IE6 is dead. Supporting a dead or dying browser makes no sense at all and, realistically speaking, any “advanced” feature you’re trying to push via HTML5 on your site will be thoroughly broken on it anyway.

Browsers that matter (I.E. ones you want to push your flashy new site on) will likely have other issues besides how well it renders every pixel on screen. Besides that, “cross-browser compatible” is usually a byword term for “not accessible” so in essence there’s a lot of mutually exclusive stuff pushed with the package with regard to accessibility.

HTML5 ready. Use the new tags with certainty.

Modernizr allows you to do this already and most browsers (even the old ones) simply treat a lot of the new architecture tags like <article>, <section> or <nav> as just a div by default.

Video and audio are the sticking points for most HTML5 sites with media and while you can do embedding fairly easily, the hard part is the codec standard (which none of the major vendors are agreeing on) so that leaves the embed tag you choose a non-issue compared to the codec headaches.

Optimal caching and compression rules for grade-A performance

jQuery caches dynamically loaded scripts as does Modernizr and most web hosts already have mod_deflate enabled for HTML, CSS and JavaScript.

Best practice site configuration defaults

Less is more. See above.

Often times, if you’re struggling to make a layout look exactly the same as a mockup, you’re writing more markup and not effective markup. CSS and HTML only get complicated when you try to do things that are best left doing with images rather than pure markup.

Mobile browser optimizations

Less is more (2). See above.

Also, modern mobile browsers are fully capable of rendering a page meant for a full screen; Mobile browsers have a zoom feature. The issue isn’t the rendering, it’s the data plan. Worry more about “how much” you’re sending to the mobile device rather than “how” it’s rendered.

Progressive enhancement graceful degradation … yeah yeah we got that

Less is more (3). See above.

Browsers that will render HTML4 will render HTML5 without issue for the most part. CSS 3 with conditional 2.1 or older may help with older browsers, but what will really help a visitor is a helpful reminder (if they’re on IE 6) that they’re using a dangerously insecure browser and should upgrade right away. Let’s be more concerned with our civic duty to protect the web and its users than how pretty our sites look for a change.

IE specific classes for maximum cross-browser control

Less is more (4). See above.

There’s a line in Star Wars Episode IV: A New Hope by Princess Leia to governor Tarkin

The more you tighten your grip, Tarkin, the more star systems will slip through your fingers

Sensible control is a better option than “maximum” control. You want your site to look good (“perfect” is a dream until we all start using the same browser; at which point I’d rather not be developing for the web) so think about this… what is it that you’re trying to accomplish with your site? And does your preoccupation with perfection keeping you from accomplishing it?

Handy .no-js and .js classes to style based on capability

Less is more (5). See above.

Sensible use of CSS 2.1 and 3  will get a great deal of the same functionality as JS. I’d much rather see designers become familiar with 2.1 first as there are a lot of basics that get skipped that lay a good foundation. You would be amazed at how little markup you actually need to get a good result.

Also, JS gets ignored by three kind of visitors :

  • JS Disabled, but capable – Aren’t interested in being bothered with ads or other flashy nonsense and will likely be interested in the content rather than presentation. Be concerned with the quality of the content and just make it available without hurdles.
  • JS Incapable – Usually screen readers, text only or other such specialty browser. CSS is only applicable for accessibility.
  • Bots – Don’t need CSS anyway.

Again, here is a good case for using sensible CSS rather than clever CSS.

Console.log nerfing so you won’t break anyone by mistake.

This is vendor specific stuff that shouldn’t be encouraged too much. Firebug is fine and all, but if something “breaks” something else, it’s usually a result of poor encapsulation.

Also… Less is more (6). See above.

Never go wrong with your doctype or markup!

Never underestimate a novice developer’s ability to break the unbreakable. I remember Adam Savage of the Mythbusters once giving a presentation and mentioned how surprised he was that actors were able to break welded steel on certain stage props (back in his prop making days) by merely handling them. If there’s a way to break it, they will find it. Also of note, Less is more (7) and the less markup you have, the less you will likely break it.

An optimal print stylesheet, performance optimized.

If your HTML5 layout can’t be made printer friendly with the following :

body { color:#000 !important; background:#fff !important;}
aside, footer { display:none !important; }

You’re doing it wrong or doing it too complicated.

Also… Less is more (8). See above.

iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.

Less is more (9). See above.

As mentioned before, mobile devices today aren’t the text only readers of yesteryear. When multi-touch is becoming commonplace, your chief concern should still be bulk, not pixel perfection.

Fun fact: A pixel is not really a pixel on a mobile screen.

.clearfix, .visuallyhidden classes to style things wisely and accessibly.

Never been a fan of hacks. You can bash IE all you want, but there are ways to get around it without resorting to too much CSS witchcraft. And since Less is more (10), you automatically improve accesibility by simply not piling too much on the browser to begin with and taking a browse at the above linked spec page for HTML5 and CSS3 at w3schools.

.htaccess file that allows proper use of HTML5 features and faster page load

Also guarantees to break any CMS. There are some things in the default .htaccess that do make sense like denying access to hidden folders or log and other such special files, but then there are other things that are completely pedantic or just plain asinine. Like forcibly rewriting http://www.example.com into example.com. Honestly what’s the big deal?

And measures like setting session.cookie_httponly makes sense if you don’t use JavaScript to manipulate cookies on your own web application. This is a classic case of more security not necessarily being better than just better security. You should be vetting your application for SQL injection and XSS vulnerabilities and not handicapping yourself. Security is a process, not a destination, and the .htaccess isn’t something to be casually played with. You’re better off not having a .htaccess file there at all and instead a link to the OWASP page so anyone who downloads the package can familiarlize themselves and understand what it is they’re doing rather than copy > pasting.

And then there’s this :

# Force the latest IE version, in various cases when it may fall back to IE7 mode
#  github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it’s installed for a better experience for the poor IE folk

This may be a secret to a lot of people and you may not know this about IE users, but please believe me when I say this, it’s completely true. Most IE users DON’T GIVE A SH!# ABOUT WHICH JS ENGINE THEY HAVE!!

If your site needs a JS engine swap to make it work better on IE7, then it’s more poorly designed than IE7.

Also, did I mention Less is more (11)? See above.

CDN hosted jQuery with local fallback failsafe.

I’m fairly certain that the Google library or the one hosted by Microsoft are unlikely to be unavailable unless you’re hosting your site in Iran or China (do they block ajax.googleapis.com?) Other than that, this is a 3 second fix for anyone using Modernizr or jQuery.

Think there’s too much? The HTML5 Boilerplate is delete-key friendly. :)

Enter-key friendly will always leave less cruft in your code than delete-key friendly.

Here’s all you need to start with HTML 5 (add more as necessary) using just the bare essentials to get going.

A basic index.html file

<!DOCTYPE html>
<html lang="en-us">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<title>Site title</title>
	<script type="text/javascript" src="lib/modernizr.min.js"></script>
	<script type="text/javascript">
		var spath = "lib/";
	</script>
	<script type="text/javascript" src="lib/loader.js"></script>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<div class="page">
		<header>
			<div class="title">
				<h1><a href=".">This is a site</a></h1>
				<p>Some sorta description</p>
			</div>
		</header>
		<article>
			<section class="column two-thirds">
				<h2>Section header</h2>
				<p>This is where your main content goes.</p>
			</section>
			<aside class="column one-third">
				<h3>This can be the sidebar</h3>
				<p>Put your links and stuff here.</p>
			</aside>
			<footer>
				<p>Copyright and stuff here</p>
			</footer>
		</article>
	</div>
</body>
</html>

You can download Modernizr here. Using modernizr, here is the loader.js file (gets the basics downloaded including jQuery, validation and jQuery UI).

if(!window.jQuery)
Modernizr.load([{
	load: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
}, {
	load: "https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"
}, {
	load: "https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"
}, {
	load: "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"
}, {
	load: spath + "yourlib.js"
}]);

You can add more of your own libraries as necessary, but yourlib.js can be just a jQuery specific code file.

$(function () {
// More of your stuff here
});

And here’s a usable style.css that you can run with.

/* Default */
body
{
	font-family: "Segoe UI" , Tahoma, Sans-Serif;
	font-weight: normal;
	font-size: medium;
}

@media screen
{
	/* Reset */
	body, div, header, article, section, aside, footer,
	p, h1, h2, h3, h4, h5, h6, ul, li, blockquote,
	form, fieldset, legend, input, textarea, select,
	table, td, th, hr
	{
		margin: 0;
		padding: 0;
		border: 0;
		line-height: normal;
	}

	body
	{
		font: normal 86% "Segoe UI" , "Myriad" , Tahoma, Sans-serif;
		color: #333;
		background: #fff;
		margin: 0;
		padding: .7em;
	}

	div.page
	{
		width: 80%;
		max-width: 1200px;
		min-width: 800px;
		text-align: left;
		margin: 0 auto 1em auto;
	}

	/* Headings */
	h1, h2, h3, h4
	{
		font-weight: normal;
		padding: .4em 0 .1em 0;
	}
	h1
	{
		font-size: 230%;
		color: #a33;
	}
	h2
	{
		font-size: 150%;
		padding: .4em 0;
	}
	h3
	{
		font-size: 140%;

	}
	aside h3
	{
		border:1px dotted #aaa;
		border-width:0 0 1px 0;
	}
	h4
	{
		font-size: 130%;
	}
	h5
	{
		font-size: 120%;
	}
	h6
	{
		font-size: 110%;
	}

	/* Page segments */
	article, header, footer, hr
	{
		clear: both;
	}
	header
	{
	}
	article
	{
		width: 100%;
	}

	header:first-child
	{
		margin: 0 0 1em 0;
		border: 1px dotted #aaa;
		border-width: 0 0 1px 0;
	}
	footer
	{
		border: 1px dotted #aaa;
		border-width: 1px 0 0 0;
	}

	aside
	{
		background: #f8f8ff;
		box-shadow:3px 3px 3px #ddd;
		border-radius:3px;
	}

	hr
	{
		background: #a33;
		height: 1px;
		margin: .5em 0;
	}

	/* Paragraphs */
	p
	{
		line-height: 140%;
		padding: 1em;
	}

	.column p
	{
		padding:1em 0;
	}

	section p
	{
		padding: .2em 0 1em 0;
	}
	aside p
	{
		padding: 1em !important;
	}

	form p
	{
		line-height:normal;
		padding:.2em .5em .5em .5em !important;
	}
	header p
	{
		padding: 0 0 1em 0;
	}

	footer p
	{
		font-size: 90%;
		color: #000;
	}
	blockquote p
	{
		padding: .4em 0;
	}

	/* Block content */
	blockquote
	{
		background: #f5f5ff;
		border: 1px dashed #aaa;
		padding: .4em 1em;
		margin: .5em 0;
		border-radius:.5em;
	}

	/* Columns */
	.column
	{
		float: left;
		margin: 0 2% 0 0;
		padding: .2em 0;
	}

	.half
	{
		width: 47.4%;
	}

	.two-thirds
	{
		width: 64.7%;
	}

	.one-third
	{
		width: 31.3%;
	}

	.one-fourth
	{
		width: 23%;
	}

	.one-fifth
	{
		width: 18%;
	}

	/* Images */
	img
	{
		vertical-align: middle;
	}
	a img
	{
		border: 0;
	}

	/* Links */
	a
	{
		color: #a33;
	}
	nav a
	{
		color: #a33 !important;
	}
	h1 a, h2 a, h3 a, h4 a
	{
		text-decoration: none;
	}
	h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover
	{
		text-decoration: underline;
	}

	/* Pager */
	nav.page
	{
		font-size:120%;
		padding:1em 0;
		clear:both;
	}

	nav.page strong, nav.page a
	{
		font-weight:bold;
	}
	nav.page a
	{
		text-decoration:none;
		font-size:90%;
	}
	nav.page a:hover
	{
		box-shadow:2px 2px 2px #ddd;
	}
	nav.page strong
	{
		font-size:120%;
	}

	/* Tags */
	aside p.tags
	{
		line-height: 200% !important;
	}
	a.tag
	{
		padding: 7px 3px !important;
		text-decoration: none;
	}
	a.tag:hover
	{
		text-decoration: underline;
	}
	a.x1
	{
		font-size: 11px;
	}
	a.x2
	{
		font-size: 12px;
	}
	a.x3
	{
		font-size: 13px;
	}
	a.x4
	{
		font-size: 14px;
	}
	a.x5
	{
		font-size: 15px;
	}
	a.x6
	{
		font-size: 16px;
	}
	a.x7
	{
		font-size: 17px;
	}
	a.x7
	{
		font-size: 18px;
	}
	a.x8
	{
		font-size: 18px;
	}
	a.x9
	{
		font-size: 19px;
	}
	a.x10
	{
		font-size: 20px;
	}
	a.x11
	{
		font-size: 21px;
	}
	a.x12
	{
		font-size: 22px;
	}
	a.x13
	{
		font-size: 23px;
	}
	a.x14
	{
		font-size: 24px;
	}
	a.x15
	{
		font-size: 25px;
	}

	/* Lists */
	ul, ol
	{
		margin: 1em 2em;
	}
	ul li, ol li
	{
		margin: 0 0 .3em 0;
	}

	/* Form elements */
	header form
	{
		float: right;
		margin:3.5em 0 0 0;
	}
	header form legend
	{
		display: none;
	}

	fieldset
	{
		border: 1px solid #a33;
		border-color:#a33 #ddd #ddd #ddd;
		box-shadow:3px 3px 3px #ddd;
		margin: 0 0 1em 0;
		padding:.3em;
	}

	.column fieldset
	{
		min-height:15em;
	}

	legend
	{
		font-size: 130%;
		padding: .2em .3em;
		margin: .2em 1em 0 1em;
	}

	input[type^='button'], input[type^='text'], input[type^='password'], textarea
	{
		border: 1px solid #999;
		border-radius:.3em;
		background: #fff;
		color: #575757;
		padding: .4em;
	}
	.column input[type^='text'], .column input[type^='password'], textarea
	{
		width: 90%;
	}
	input[type^='text']:focus, input[type^='password']:focus, textarea:focus
	{
		border-color:#a33;
	}
	textearea {
		font: normal 100% "Segoe UI" , "Myriad" , Tahoma, Sans-serif;
	}

	input[type^='submit'], input[type^='reset'], input[type^='button']
	{
		cursor: pointer;
		background: transparent;
		font-size: 120%;
		color: #a33;
	}

	label input:not([type^='checkbox']), label textarea
	{
		display: block;
	}
	label span
	{
		font-size: 75%;
		font-weight: bold;
		color: #a33;
	}

	input.error
	{
		color: #000;
		background: #fcc;
		border: 1px solid #a33;
	}

	label span
	{
		font: bold 75% sans-serif;
		color: #a33;
	}

	label.error
	{
		padding: 2px;
		color: #fff;
		background: #f33;
	}
}

@media print
{
	body { color:#000 !important; background:#fff !important; }
	aside, footer { display:none !important; }
}

/*
Chocolate? This is doo doo baby!
- Dave Chappelle
*/

I do know that HTML5 Boilerplate is doing a very good job of promoting HTML5 Boilerplate.

All in all, it seems to be a solution to a problem that doesn’t really exist. Or maybe I’m wrong.

Basic: The community version

A little while ago, I created a theme called “Basic” for corporate-ish websites and I’ve been getting requests for a community version; basically a version that would accomodate a blog/forum. I decided to reuse 90% – 95% of the original backend JavaScript to the discussion forum mockup (which I’ve renamed “Road”) including a lot of similar functionality. Except this time, I’m going for a more “component” oriented layout that I can easily turn into tabs. I created a simple tab plugin in jQuery to turn page elements into tabs with minimal overhead and I’m reusing a slightly modified version of the code formatting plugin in the topic page example .

Community index

 

Community tag browsing

 

Most of the changes really went to the topic view page. I made some changes to the code format snippet and moved the user info and avatar away to the side for clarity. The darker colors were partly inspired by the Sublime text editor (thanks to Shannon for mentioning it) as I found it easier to read large blocks of code on a darker background although I’m still not doing any syntax highlighting.

Forum topic view

 

Haven’t change much of the backend code of the add topic form, but I have changed the styling and streamlined things a bit.

Reworded instructions