In the Details: Flick Intent

In Mobile Safari on iOS 7, Apple utilizes a very subtle microinteraction to reveal the search field. Usually, the search field on any given screen is revealed by swiping down to scroll past the top of the viewed content. The search field scrolls into view above the content. If you are viewing a web page, however, the top of the page could be a long scroll away. Apple detects your gesture. If you drag your finger slowly down, the page scrolls as normal. However, if you flick the page down, the page title bar enlarges to become the URL/search field. Scrolling the page up again shrinks it back down to show only the URL. The UI infers your intent in rapidly scrolling towards the top of the page, presenting the controls you would expect to find there.

Pointing Fingers

I’m really digging the improvements in the latest incarnation of Safari’s Web Inspector. Here’s another supremely useful feature.

When you select an element, all of the browser dev tools list all of the rulesets that apply to that element. The list them in order of precedence, and they indicate which declarations are being overridden. So, whenever I’m trying to figure out why a style isn’t being applied, that’s the first thing I check. It’s easy enough to find the ruleset that is taking precedence. However, the ruleset may have multiple selectors, and they could be long, complicated ones. It can be a challenge to figure out which selector is the culprit. That’s no longer a problem in the Web Inspector.

As you can see in the screenshot, all of the selectors in that big block are gray except the one, little “p”. That’s the selector that is applying padding to the element that I have selected.

I owe somebody at Apple a beer.

Designer’s Toolbelt: Safari Web Inspector

Safari’s Web Inspector was updated in the new version that shipped with Mavericks. They corrected an oversight that has long existed in all of the browser developer tools, including Firebug. If a selector uses a pseudo-class, such as :hover, it will only apply when the element is in that state. This means that in the inspector, the style would only be listed as long as the cursor was hovering over the element in the page. There was no way to actually edit the style, because as soon as you moved your cursor down to click on something, the hover state was no longer in effect, and the style disappeared from the list.

Apple added check boxes at the top of the style list for Active, Focus, Hover, and Visited. Now you can select an element in the DOM, check the state that you wish to apply, and the browser will consider it to be in that state as long as you have it checked, regardless of where your cursor is.

My job just got a little bit easier. Thanks, Apple.

In the Details: Mondo Tabs

Apple made a significant change to the tab bar in the latest version of Safari. Previously, a tab was as wide as it needed to be to display the page title. Once the page titles exceeded the width of the window, they would truncate evenly. This resulted in an empty space in the bar when there were only a few tabs with short titles. A plus (+) icon on the far right side would create a new tab, but I never used that, because double-clicking in the empty part of the bar would do the same thing.

Now, tabs expand to fill the width of the entire bar. If there is a single tab, it is the entire width of the window. Two tabs split it in half. As a result, there is never empty space in the bar, so to create a new tab requires moving the mouse all the way to the right side of the window to click that plus icon. Perhaps that’s not such a big deal, as you can also open a new tab by pressing Command + T, but I miss the double-click. That always seemed to be the most efficient method for me. I also think the extra-wide tabs look clunky, but that’s personal preference.

The other change to the bar is the addition of an icon to the right of the plus when there are multiple tabs. The icon represents a feature taken from Mobile Safari, where there aren’t tabs. It presents smaller representations of each tab and allows you to pan between them. I suppose it could be useful if you have a lot of tabs open, and you have to find a specific one by its visual appearance, rather than by its title. When this view is enacted, the tab bar goes away, and the plus icon moves up into the bookmarks bar. I haven’t found it to be a particularly useful feature so far, but it makes sense in maintaining some consistency between the desktop and mobile versions.

Another Shoebox

I have a number of software tools that I use for collection of digital information. I’ve been using Yojimbo to catalog articles that I want to keep, especially for use in my classes. NoteBook is my preferred tool for organized note taking. NetNewsWire automatically pulls down all of my RSS subscriptions, and iTunes does the same for podcasts. I’m still using Ta-da List to keep track of DesignAday topics, while Wunderlist is my to-do list. And, of course, Delicious holds links that I share with my students. To paraphrase Herb Simon, I’m not lacking information; I’m lacking time to attend to information.

I have come to love the relatively new Reading List feature in Safari. I don’t have to decide immediately whether or not I want to save an article in Yojimbo where I may never actually get around to reading it. It has also become a solution for getting things from my iPhone into Yojimbo. Whereas before I would mail URLs to myself, I now just add them to my reading list. With iCloud, the reading list gets synched between my iPhone, my work laptop, and my home desktop. I do wish the “Add to Reading List” option was available from within NetNewsWire—as it is, I must first tell it to open the page in my browser.

The one problem is that, just like my other collections, the reading list is collecting items to be read faster than I am reading them. I can’t keep up with it. I throw an article in their with the secure knowledge that I won’t lose it, but just like shoeboxes of old photographs, they sit in my internet attic collecting dust. I just purged a number of items from it, and it’s still 57 items long. What I really need is some kind of feature that encourages me to read the items in the list.

Where the Rubber Meets the Code

With Lion’s adoption of iOS scrolling behavior comes rubber-banding. That is the little bounce that occurs when you reach the end of the scrolling content. You can actually push or pull the content past its end before it snaps back into place, just as if it were attached by elastic. It’s a nice little effect that clearly communicates, but I’m not happy with its current implementation in Safari.

Using CSS, it is possible to fix elements of a page so that they do not scroll. This is commonly used for navigation and branding elements, allowing them to remain accessible and in view as the content is scrolled. A background image can also be set not to scroll with the page content. I’ve used these capabilities extensively in the website I designed for my church. Unfortunately, Safari does not handle fixed elements consistently.

As a webpage without fixed elements is “stretched,” a gray background is revealed with a drop shadow, making it appear as though you have pulled the top of the webpage down, revealing the back of the browser window underneath. However, a fixed background image doesn’t move, so even with the drop shadow, it looks more like the gray area is being pulled down over top of the background image. Furthermore, any elements set to a fixed position do move with the rubber-banding. This combination breaks the optical illusion completely—it just looks hokey.

I’d prefer that they leave all fixed elements fixed, but if they are going to move them, they should move all of them.

Designer’s Toolbelt: IE7.js

This JavaScript library has been around for several years, but don’t let its name fool you. While it can be found in Google’s repository under the name IE7.js, it has been regularly updated with more recent versions titled IE8.js and IE9.js. But, I’m getting ahead of myself. Just what, exactly, does it do?

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG [sic] work correctly under IE5 and IE6.

Consequently, IE8.js will make previous versions behave more like IE 8, and IE9.js will make all previous versions behave more like IE 9. To see the list of selectors, properties, and elements that are enabled, take a look at the demo page. I’m using it to get IE6 to cooperate with the :hover and :active pseudo classes.

Designer’s Toolbelt: CSS3 Extenders

I’ve been learning a lot about CSS3 recently and wanted to share some resources. The following is a list of CSS3 extenders that help deal with the varying levels of support by browsers and browser versions. Many of them even provide JavaScript solutions for Internet Explorer. The descriptions are taken directly from each website.

Selectivizr
Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

eCSStender
Extensions built with eCSStender greatly simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work… even in IE6.

Modernizr
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies. Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them. Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false. Lastly, Modernizr also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

cssSandpaper
The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3 in IE (which doesn’t support it in IE natively) but in other browsers which implement their own vendor-specific variants of these properties.

Sass
Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

LESS
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

DIE6

Friends don’t let friends use Internet Explorer 6. And neither should acquaintances. Educate others about moving off of Internet Explorer 6.

This statement was pulled directly from a Microsoft website: The Internet Explorer 6 Countdown. You know it’s bad when the company that sold the software is working this hard to get people to stop using it. I applaud them for doing so, as it has been a huge thorn in my career. Unfortunately, due to their very slow adoption of new technology, the military is still using IE 6 in some instances and will be for several years. There is a browser-based application I’ve been working on for over a year now that will primarily be deployed using IE 6.

Microsoft’s site says, “Now that we’re in 2011, in an era of modern web standards, it’s time to say goodbye.” The bad news is that IE 8 doesn’t support CSS3, and IE 9 is only in beta. It’s depressing to think about how long it may be before I can take advantage of the stunning improvements already supported by Mozilla and Webkit.

Blame the Browser

He was sure it was a JavaScript problem. We had two tables (that we knew of) that were displaying a disabled scroll bar when it wasn’t needed. The rest of them we had checked were fine. Actually, I should say that a div was displaying the scrollbar. You see, we have tables in which the body must scroll separately from the header. So, I implemented it such that the header and body are actually two separate tables. The body table is in a div that gets a max-height set by JS, based on the height of the window, and has overflow set to auto. The developer that was assigned to fix the bug was looking for a problem in the div sizing logic. He couldn’t find anything. Then I took a crack at it, searching for differences in the CSS. The scroll bar was only showing up in IE, of course, so Firebug couldn’t help me. I was stuck using IE’s built-in developer tools. I compared the broken table with one that was working and compared both of those to my original prototype. The styles being applied were identical. We had spent hours trying to figure it out, and were no closer to finding a solution than when we started.

Finally, I started comparing the tables themselves. It occurred to me that the buggy one incorporated row spans, while my prototype and the working table did not. I removed the row spans and voilà! The scroll bar disappeared. We spent all that time assuming that something was wrong with our code. I should have known it would be a quirky IE bug.