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!

Advertisement

Battle Damage!

After years of faithful service, my sunglasses sustained the first flesh wound. The silver bit from the left side had fallen out, probably after some rough handling on my part during a recent trip. I don’t remember the brand since I got these so long ago (I don’t even remember the year or the shop where I bought them), but I do remember they’re not Ray-Ban.

The silver bit from the side is gone.

I don’t believe in holding on to things beyond their time if they’re not used, even if they hold sentimental value, so I’ll give these away soon. Meanwhile, I stepped into a local eyeglass shop and bought a new pair.

Slightly bigger than the old ones and these are D&G

Why is it so hard to find a decent pair of sunglasses these days? I mean I know that taste is subjective, but there are some styles that really shouldn’t go out of style no matter what and many more that shouldn’t come into style in the first place.

These were the most similar to the old pair and the least offensive to my sensibilities. Also they felt solid and seemed the least likely to fall apart in a year. Luckily, the branding is also small so it won’t be visible at a distance.

Wish the logo wasn’t there in the first place, but oh well…

I don’t really like any overt branding in the products I buy since I think the product itself should be the selling point, not the name. Speaking of which; why do designers feel it necessary to brand their products loudly? Ray-Ban, Dolce&Gabbana, Gucchi, Police, Oakley etc… are all guilty of this, but D&G seems to be the absolute worst when it comes to loud branding. You wouldn’t want to see a giant “Armani” on a back of a coat, so why cover the entire arm on a set of sunglasses with D&G?

Well, here’s to (hopefully) a decade of future service.

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

Basic: A simple theme for corporate-ish sites

When I say corporate-ish, I mean totally serious and devoid of any shenanigans that may offend your boss… or you, if you’re that type of person. Deadline: 1 hour.

I was going to make this post before, but I just didn’t have the time. This was another design partly inspired by need and part by reader request. I got an email this evening by somone with a very similar need so I figured I’d post it here for anyone else to pickup.

“Basic” would fall into the simple-but-not-simplistic category of designs in that it’s got the bare essentials only, similar to the Simply theme, but with even fewer bells and whistles and yet is still clear, functional and usable. While it can be used as-is, it’s really a learning tool ment to be taken apart and reassembled with any additional hacks by the user. I also left out a lot of older cruft from pre HTML 5 designs as much as possible and the CSS also reflects more v.3 usage.

Basic: Front page

 

While creating this theme, I realised how similar the header is to the asp.net tutorial pages, especially the article header below the top links. This was purely coincidence since this was meant to be a bare minimum theme and Microsoft has a reputation for being terribly unexciting.

Header uses the same font and sizes

 

But since it looked similar at this point anyway, I decided to add a matching breadcrumb navigation…

Since we're this close. Why not go all the way?

 

The difference of course is that the HTML and CSS in my version are completely different. I.E. Simpler and straightforward. In the MS example, they’re using a paragraph with actual backlashes and s to denote seperators. This is way overkill and pointless so in my example, I’m using the <nav> tag and a <ul> list.

The backslashes are added via CSS “after” and “content” :

nav.crumbs ul li:after
{
	content: "/";
}
nav.crumbs ul li:last-child:after
{
	content: "";
}

Since most modern browsers support this anyway, and the fact that these are not inline links, but list items, it pretty well does exactly what a navigation list is meant to do.

The breadcrumbs are shown on the corresponding “topics” example page.

Basic with breadcrumbs

Borrowing from the Discussion Forum mockup where I had placed the new topic, login and registration forms on the same page, I included them on the bottom here and used an expandable “component” function. Basically takes any container with a “component” class and turns the elements inside into widgets with the first <h2> element inside as the handler instead of using jQuery UI tabs or accordion.

The JavaScript is otherwise the same as the forum mockup. Here’s that “component” function :

function initComps() {
	$('.components').children().each(function(i) {
		var b = $(this);

		// First element is usually the title/handler
		var hd = b.children('h2');

		// All other elements need to be wrapped up
b.children(':not(:first-child)').wrapAll('</pre>
<div class="blockct"></div>
<pre>');
		var ct = b.children('.blockct');
		var lnk = hd.append(' <a href="#" rel="showhide">(show)</a>');

		// Find the toggle link in the header and assign the control
		hd.children('a[rel="showhide"]').click(function (e) {
			ct.slideToggle();	// Toggle contents

			// Change link text
			$(this).text(($(this).text() == "(show)")? "(hide)" : "(show)");
			return false;	// Don't return
		});

		ct.hide(); // Initially hide everything
	});
}

If you think the opener to this post is odd : Not that I’m calling my boss boring…

…but I can’t think of a way to finish that sentence.

Bart Simpson

Simply: The HTML5 version

A little while ago, I created a simple, stripped down theme for blog/personal site use. Over time, there were some requests to streamline things a bit and recently I’ve been getting more and more requests to rewrite it in HTML5.

So here is that version in the 5th iteration by request :

Simply: The HTML5 version.

I’m not sure if this is “better” than the XHTML version other than I had the chance to make a few fixes and clean up some things. I still have a few doubts about how much HTML5 will improve the actual browsing experience in general. If anything, HTML 5 seems to be encouraging more and more code bloat in that web designers are squeezing in more and more client-side scripting with no regard to efficiency.

And in reply to the following :

Do you have like a border-radius fetish now? Looks like you’re putting it in practically every element in your newer stuff.
– Max.

Yes.
Yes I do.