Running Site Preview
A sneak peak of a small personal site I am working on to automatically track my running, the weather, and most importantly, whether or not I can have ice cream.
Mobile Interaction for sethakkerman.com
I created a simple diagram to show how the mobile interaction differs from the laptop/desktop interaction when a user visits www.sethakkerman.com.
Website Updates - Progressive Enhancement
As I mentioned in a previous post, one design concept I have been applying to www.pseudosuede.com is progressive enhancement. As Aarron Walter states in his book Designing for Emotion, progressive enhancement is “a concept that encourages building websites to serve the needs of many, while layering enhancements atop a solid foundation to offer a rich experience for those with a more capable browser.” Typically, this means laptops and desktop computers over mobile devices. Non-mobile devices have the luxury of faster processing, faster downloading, and peripheral inputs. Both mobile and non-mobile users receive the same core content. Users with non-mobile devices only gain subtle enhancements to the browsing experience.
I applied this theory to the project thumbnails found on the index page. I like the idea that a user can be surprised and delighted while going about an otherwise ordinary task and wanted to employ progressive enhancement in that manner. As you can see in the video above, the thumbnails initially display in black and white. What the users discover as they move their mouse over the thumbnails is that the images fade in as full color versions of the originals. To give the users feedback as to what type of project they will discover after clicking the link, I have incorporated two different types of color fades. Static projects fade to a color version of the image. Motion based projects fade to a colorful short animation. Obviously, this interaction is an enhancement that simply does not translate to touch friendly mobile devices.
If the browser does determine that the user is on a desktop computer (essentially anything with hover), it swaps the color image for a black and white thumbnail, moving the color image to the “on hover” state. It also loads the short animation. By transferring the already loaded color image to a different interaction state, loading time is reduced for the rest of the page.
One thing I plan to experiment with is whether or not achieving the black and white images with the CSS grayscale filter and transition attributes would achieve the same outcome. I would need to verify adequate browser support before moving permanently to that solution. If so, I could load the page even faster on desktop computers because the only additional items that would need to be loaded would be the short animations.
Note: The above code snippet was created with CodePen.
Website Updates - Widths
Page widths were the most recently updated component of www.pseudosuede.com. I use an overall centered column of information so the pixel value referenced in this post is based on the width of that column, not the overall rendered page.
The previous version’s page width, 960px, was based on many websites I visited on a regular basis that hovered between 960px and 980px wide. That version’s update was the first time I had truly incorporated responsive page layout into my website. I finally had access to various mobile phones and tablets, so I wasn’t testing blindly on device emulators. That width felt right at the time based on the components I wanted to include. You can see that version of the page layout below.
I thought the photographs were a descent size and the layout on the page provided enough margins on the sides to let the content breathe. The one element that always bothered me from this version was the typographic measure. When viewed from a standard laptop or desktop computer, the measure seemed a bit narrow.
After some thinking, I determined that the typographic measure, and the viewers ability to read the content comfortably, was more important to me than the ample margins on the left and right. The current width of 1160px allows for a Bringhurst approved line length of 66 characters. The margins are narrower but not so narrow that the reader feels boxed in. An added bonus is that the photographs are able to shine a bit more with their added width. You can see the updated page layout below.
In addition to improving the overall component widths, I also took the opportunity to rebuild the way the pages flow from a coding perspective. Initially I had created the two column layout, when rendered in wider viewports, using a left margin for the right photographs that was slightly wider than the text line length in the left column. While this visually solved my layout needs, the natural flow of the page was a bit convoluted in the code. Since floats were allowing the text portion to fill the void left by the image’s left margin, the height of the project section was being calculated incorrectly by the browser. Fortunately for me, the image height always surpassed the text height so the issue went undetected.
In the improved version, I wanted the back end code to be as clean as the rendered layout, so I rebuilt it. The system is now built applying a percentage width for each column as well as left and right floats when rendered in a viewport width that allows for two columns. Now, when the browser is calculating the height of elements, it displays what I intended all along.
Note: All screen images were taken from a 15” MacBook Pro retina display with a viewport of 2880px by 1800px.
The Digital Calling Card of Seth Akkerman
Call me old fashioned, but I like the romanticized idea of looking a person in the eye and shaking their hand. If you’re lucky, that hand shake may escalate into a carefully executed high-five routine. Today, it isn’t always practical to meet prospective business partners in the flesh so I decided to create a digital calling card to help bridge the gap.
My most important priority was to always display the basic information and links, regardless of the device the user access the website with. To add a layer of surprise and delight to otherwise static content, I decided to give a glimpse of my recent work. As the user moves their mouse to click the portfolio or e-mail links, a different portfolio image appears in the background depending where their mouse is located.
If a user is viewing the website on a mobile device, mouse interaction is not an option for triggering the background image changes. To accommodate mobile tablets and phones, I generated code to trigger the image swap on device rotation. Some devices such as older android based phones and tablets do not have orientation detecting capabilities so those users only see the basic information and links.
Classification — Website
Client — Self-Directed
Typefaces — FF Meta Serif Web Pro, FF Tisa Web Pro
Production — jQuery
Size — Responsive
URL — www.sethakkerman.com
I am slowly beginning to update www.pseudosuede.com based on current web possibilities and limitations I have been studying lately. I have bigger goals in mind but for now I am making tweaks to improve what is currently displayed. While pseudosuede.com is responsive already, the more I read about the “mobile first” solution, the more I buy-in to the theories behind it. When I commit to that rebuild, I will also be applying some progressive enhancement theories as well. Aside from the benefits of more focused content which is beneficial in and of itself, I am interested in rebuilding the site from that approach to help with load times and overall efficiency.
One component I am beginning to push to my existing site is retina optimization. I don’t yet admit to having a bulletproof plan to accomplish this site wide but I am getting a better handle on the possibilities the more I study the existing options. I have been dissecting the websites of a few web developers that I respect (teuxdeux.com, Bjango.com, and a few others) to see how they handle retina images and my findings are diverse as expected.
For my first experiment, I simply doubled the dimensions of the image and then told the browser to render the image at half it’s actual dimensions via HTML. The image I chose was a header logo so I was fortunate enough to start with a vector image made up of only three colors. I have read that maybe the more productive route to take in that instance would be an SVG served file with PNG and/or Polyfill fallback but I haven’t yet seen that option in use aside from theoretical articles. If I understand correctly, that method isn’t widely supported enough to make it a sure bet. You can see the result of my experiment below. While the retina is obviously clearer, the file size is larger as expected and the loading time has ever so slightly increased as well. Obviously to use this method for the entire site will slow it down incredibly.
At this point, retina optimization seems like a classic case of the “fast, cheap, good” production triangle. If anyone has any thoughts or discoveries they have made regarding retina images, I would love to discuss them with you further.
Other House Cleaning
In addition to the retina test, I worked on trimming some of the fat from my project list. Some projects have carried over from my graduate studies and the honeymoon period is over. It is time for them to be retired.
Roundhand Lettering Demo