Tag Archives: Adaptability

An issue using rem

Categorized Under: CSS Published on Authored by Leave a comment

Some time ago I came across an article by Jonathan Snook titled Font sizing with rem. Not so long story short;

In the early days of the web, we used pixels to size our text. It’s reliable and consistent. […] To get around that1, we can use em units. […] The problem with em-based font sizing is that the font size compounds. […] CSS3 introduces […] the rem unit, which stands for “root em”. […] The rem unit is relative to the root — or the html — element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that…

A pretty sweet solution, regardless of not ever having any significant issues with the em compounding dilemma, none that I can reliably recall anyway. And I’ve used it on a few projects since reading it. It is a very tidy solution to what could potentially become quite a messy problem. For organizational’s sake, at the very least, I’m really quite fond of this solution. Read “An issue using rem” in its entirety

Mobile first with a twist

Categorized Under: CSS, Design Published on Authored by Leave a comment

Frankly between the two of us, while I do see the merits in designing a mobile website first — in terms of a website’s information architecture as well as the aesthetic appeal, especially for the sake of its usability and appearance on a small screen — I’m not sold yet on whether a mobile site has to be designed first. That said, it does need to be designed at the same time. Semantics, eh? I’m hilarious, I know. But thanks for thinking it.

So what’s this “mobile first with a twist” schtick? Basically it’s a bunch of borrowed idea’s from Ethan Marcotte’s amazing little book, Responsive Web Design, Luke Wroblewski’s “equally” little book, Mobile First, (by the way, me calling each author’s book “little” isn’t a slight in the least, both book’s strength lie in their size, and that’s the point) and something I’m sure Harry Roberts wrote a little while ago but I can’t relocate now. About designing for less capable browsers first then adding on top of that base for more capable browsers — or specifically how such an approach plays with Internet Explorer 8 and below.

Anyway the “mobile first with a twist” approach is quite simply a matter of designing a website for mobile, meaning for small screens (not just visually but functionally too), then tweak it larger, with the least amount of effort and the most basic — yet responsive — CSS possible. This as your starting point. A base from which to build. The thinking is this is what a visitor will see and use who is using a less capable web browser. Read “Mobile first with a twist” in its entirety

CSS resets rediscovered

Categorized Under: CSS, Design Published on Authored by Leave a comment

It was back in January of this year that the idea for FSSFive — a WordPress theme built on/with Fluid Skinning System (FSS) as a foundation to allow components of Fluid’s Infusion to make the most popular blogging platform on the internet (more) accessible — was born. Or that was the goal. The jury is still out on my effort, which isn’t by any means complete. It was then attitudes concerning deeply engrained personal habits started to be scrutinized. Namely the use of Cascading Style Sheet (CSS) browser resets in my design process.

Essentially all CSS browser resets are, is a bunch of lines of computer code usually inserted at the beginning of the file that handles a webpage’s (or more commonly a website’s) presentation information. And it’s these rules, if you will, that serve to put different web browsers at an equalled point where a designer can start designing from. Because every web browser handles their default inheritance, sizing and spacing issues a bit differently. And it’s this useful technique that puts everything “back” in it’s place. In a consistent manner. Across web browsers.

But as I started to develop FSSFive my thinking began to change. For years I become quite comfortable, meaning I no longer thought at any length about this issue, and used the popular Meyer Reset. Which isn’t a bad thing (this isn’t a criticism of Eric’s “tool,” in fact it is praise, it served me remarkably well for over 5 years!). I just threw it in at the start of any project, as a first step, and “designed” from there without a second thought. Read “CSS resets rediscovered” in its entirety

The gamut of ever changing ability

Categorized Under: About, Adaptability Published on Authored by Leave a comment

I’ve been away from here for quite sometime attending to a whole host of issues. So in an effort to get back into gear I’ll continue my series of posts describing my computing career. This is the second post in what will be three relating the story of what brought me here. Be sure to see my post the origins of interest for the first bit of my story…

… So by April of ’97, soon after transferring to a third “rehab” hospital (which was everything but a rehabilitation facility, hence the quotes), I was no longer “locked-in” — which as I understand it calls into question my original diagnosis, seeing how it wasn’t permanent (semantics, eh?). I started to regain enough mobility in my right arm and hand to be able to use a keyboard to type and use mouse keys.

Ahhh, mouse keys. I should probably provide you some context. Picture the ways in which any computer pointing device, like a mouse, can move. Limitless, right (speaking 2 dimensionally of course)? Forward, left, right and back. Plus every direction in between. Now imagine the representation of those basic movements on a flat surface, on a keyboard say, and using the numeric keypad to represent 8 directions that device can move. The number “2” key, when pressed, moved the mouse cursor up on the screen. Number “4” moved it left. Number “6” moved it right. And number “8” moved it down. Then the number “1” key moved the cursor up and left diagonally on the screen. Number “3” moved it up and right diagonally. The “7” key down and left diagonally. And “9” down and right diagonally. The number “5” key is the mouse button. Honestly what the rest of the buttons did is pretty fuzzy. Rather than guess I should simply refer you to the Wikipedia entry concerning mouse keys for more accurate context.

And that solution served me remarkably well for probably close to, if not exceeding, two years. Mouse keys are still simple to understand and most importantly easy to use. And it got completely out of the way and let me “master” elements where mouse keys reached their limit and other solutions picked up the slack — keep in mind I’m speaking wholly as a differently-abled creative individual whose primary creative canvas has been a computer monitor for well over a decade. It’s just the nature of the beast. 8 linear directions will only get you so far. It’s much like an Etch A Sketch™, in theory, as it’s movement is rigid and limited. And must like said Etch A Sketch™ there are ways around it’s operation. Read “The gamut of ever changing ability” in its entirety