Welcome to the Reset

Design Pattern: Continuous Scrolling

A few weeks ago I was reading a blog post of a software engineer and user interface designer which I found to be interesting, so I decided to look at other articles he had written to see if it was worth bookmarking it. I soon noticed most of my opened tabs were of his posts so I began to bookmark them and figured I would go back to his blog at a later time to continue were I had left off. However I wasn’t that lucky because his blog used the design pattern: continuous scrolling.

So now I was faced with the following options:
a) Close the window, return to the site another time and start all over.
b) Deal with the continuous scrolling, clicking on posts which seemed relevant and scroll to the very end.

I choose option b with no indication of how far I would still have to scroll, I reached the last post written in 2008.

While continuous scrolling does provide a “smooth” experience allowing for information to load without having to force the page to reload the elements on the page again it’s main downfall is that there is no natural pause (With the exception of if the scroll isn’t automatic but invokes an action from the viewer - such as a view more link which would have the content load below the existing content allowing the viewer to continue to scroll).

In the case of a blog I wouldn’t recommend using continuous scrolling - at least if you’re going to do continuous scrolling allow for a method to “bookmark” a location.
When attempting to view the blog with javascript disabled, I was only able to view up to a certain point with no way to view more. Also since the sidebar didn’t scroll with the rest of the site I ended up not seeing the archives link - however the archive link was split up in category rather than date and didn’t include all the posts so in my case it didn’t pose as much use as I would of hoped.

Tumblr on the other hand offers a friendly archive which does use continuous scrolling. Since it’s grouped by date the jump to month does allow someone to return back to a section. When viewed without javascript while the jump to month is no longer available however pagination is which prevents the experience from being obstructed.

Having old code come back and haunt you

Can’t believe it’s March already, man time flies. Recently I had to work on a site which I did about a year ago… and haven’t touched since. :/

Needless to say, I’ve stopped using my CSS Reset in favor of using normalize.css and it’s been awesome. I know why I choose to use a CSS Reset back in the day, made perfect sense then but not anymore. When I did my CSS Reset I was also developing applications not using a CMS so I had control of my markup and if someone edited added some markup expecting something - they were surprised to see that it wasn’t what they thought they would get. For example - I felt that just because the markup is <emphasis> does not mean it has to be italic, after-all depending on the design it might be a different color, weight, etc. and the same goes for <strong>. Well when I did my Reset it was also back in the xhtml days and I didn’t use <b> or <i> in my sites normally nor did I use them as a hook. However with html5 giving <b> & <i> new semantic meaning I might use them again.

Now if my reset was used on a CMS that wrapped text around <b> by default nothing would happen, which depending who you are might be fine. However let’s say that I made it that using <b> would bold whatever is in it, ok. Well Sometimes I later discovered when not having control of my markup was if something was like so <b> <span> Lorem Ipsum </span> </b> it wouldn’t be bold because my css reset had <span> set to normal.

I shake my head every time I remember that discovery. I remember reading about how a lot of people had removed :focus from their websites because they had used Eric Meyer’s Reset and I had checked my CSS Reset and was happy to say I luckily didn’t make the same mistake because when I created my CSS Reset, I had used different pieces of different resets. I also remember when I was in college and had fellow students use my CSS Reset as a base - after I discovered font-weight issue in my CSS Reset, I can only hope they’ve either moved away from using my CSS Reset or they never use it again.

Suppose the point is - I had my old code come back and haunt me and I can’t wait for the day where the site get’s a complete recode so I can remove my reset from it.

Usability

The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.

Extending Awkward Showcase

2012 has been a busy year, so busy that I just now noticed I didn’t post anything in the month of January. Recently during a scrum in the dev pit at touchstone group, someone mentioned they were going to need some jQuery help. So the plugin being used was Awkward Showcase and what was needed was to call a custom function on every slide transition. Awkward Showcase has an option to call a custom function however it is only called once on first load. So rather than hard coding the function inside the plugin I took the time and extended the plugin to have an option to call a function when the slide changes.

Now looking back, I can’t honestly think of a time where someone might want to do this - then again I’ve thought the same thing only to find myself trying to find some link or code because suddenly I’m building a site in which the design calls for it.

Shortly afterwards our QA tester noticed how the fade out transition looks horrible in IE8 so I went back and started patching up the plugin. Now I’m sure that in a month what I did will make me shake my head and ask ‘what the heck was I thinking?’ but as of right now I’m glad with what I’ve accomplished. I’ve published the forked code on Github.

On the note with using the custom function on slide change - it sadly has to be in the form of a string - for example if the function you want to call is LoremIpsum() you would type ‘LoremIpsum’ in the custom_transition option… which looking back at it - I think I should call the option something else because custom_transition makes it seem something else… Maybe something like custom_slide_function… Oh well maybe when I update it next time.

The New York Times: When features break normal behaviors

Feature Creep is a nightmare for many. Some features are useful and when it doesn’t push a project back and improves the experience then it’s okay to have them.

One day I was on The New York Times’ website and I highlighted some text to act as a marker while I replied to someone on messenger I noticed something. A small tool tip popped up with a question mark and as I hovered over it - it stated ‘Lookup Word’. Clicked the tool tip to have a small pop up window open with the definition. At first I thought it was something the web browser had done but then I noticed it happened in other browsers and realized that the developers for The New York Times’ had added this feature that when you highlighted some text you could get the definition of the word. - Pretty Useful.

But then I noticed something - When I right clicked the highlighted text, I couldn’t copy it because it undid the highlight and thus prevented me from copying the text.

This feature which seemed useful to me broke normal browsing behaviors - Now we have a problem. Without the feature I could of copied the text and searched for the definition myself - but now I can’t copy this text.

But Wait… You can copy with keyboard shortcuts..
Yes I can use keyboard shortcuts, but the problem with that is not everyone knows keyboard shortcuts - for example - do you know from right off your head what Command+Option+Control+8 on Mac OSX does?

What if I wanted to copy a whole paragraph? - Well that works. As soon as I highlight four words I’m able to copy the text. So it doesn’t break my normal behaviors all the time… only when I highlight three or less words, then I have to use the keyboard shortcuts..

Not a bash on The New York Times’ site - I thought it was useful and granted most of the time I will use the keyboard shortcuts but it is a risk to make such a move. From what I’ve noticed when it first was released a lot of people complained and even went as far as blocking the script using ad-block and I’m assuming that since it’s release it’s been adjusted. It would be nice if at some point they made it so I could still have my normal right click behavior but no one’s perfect and hopefully they will find a way to keep the feature because I do think that they were focusing on their readers when they added this feature.