The Web Guru's MicroRuminations

So these guys seemed to be doing a good thing. But their latest blog entry is in 2010. What’s been going on with HTML emails for the past 5 years? Why are they such a mess? Why is no one trying to fix this? Why oh why is Gmail so terrible at this?

For websites that aim to communicate a specific message, controlling the user is key. Not the kind of control that a harsh dictator might insight, where you give the user no choice but the one you want, thereby inconveniencing them. Rather the subtle control akin to a manipulative advisor, or that of a good story teller, who starts by drawing you in and then holds your attention captive.

In controlling the user’s flow through your site, you control what they see, when, and where. The message can unfold like a story before them, piece by piece. Admittedly this is much easier to do with a smaller site, which is perhaps a good excuse to consolidate as many pages as possible (within the realms of reason). In general the fewer choices the user has, the less likely they are to jump off the train that you want them to ride.

More often than not in development, it’s the little, stupid stuff that messes up.

I can’t count how many times I’ve spent hours pouring over documentation and help forums trying to solve a problem, only to figure out it was a mis-matched variable name, missing comma, or some other stupid simple syntax error.

These tiny details are what make design and development good, up from alright. When designing, paying attention to the spacing between things, the raios, and the sizing of elements is how you go the extra mile. For development, indentation, concise logic, and proper syntax is the way to stand yourself up high.

At least for now. While working on a recent project, we were trying to incorporate several videos into the site.

The primary problem is that different browsers support different formats for videos. And this problem compounds with the knowledge that different video formats end up with different sized videos (due to different compression styles). So a video that loads quickly in Google Chrome might take considerably longer in Safari.

We resorted to two file types in the end. Thankfully the HTML5 video element supports multiple sources. Webm seems to be fairly widely supported (everything but Safari), reasonably compressed, and quick to load. To patch the hole with Safari we resorted to .mpv files, which is a subset of MPEG-4. The site in the end worked excellently in everything but Safari. The mpv files were just too big and took far too long to load in.

Nothing in nature happens suddenly, certainly nothing pleasant. Explosions, lightning strikes, quick and deadly strikes from predators are some of the only things that strike quickly and without notice. Just about everything we enjoy in nature has a fluid transition from one stage to another.

Flowers bloom gradually, the wind coaxes water to ripple, even creatures move with a grace and fluidity that’s marvelous to watch. This is one reason why robotic movements to this point have always felt “wrong,” or inhuman.

To that end, the web should reflect this fluidity as much as possible. Items shouldn’t appear or disappear suddenly as if from nowhere. Much of the UX and UI concepting done has to do with transitions and animations that respond to a user’s input. Through animation we can very effectively provide feedback to an interaction.

CSS3 Transitions are the simplest and least-complicated way to make these things happen in the realm of web design/development. Consider implementing these next time you’re using a hover effect anywhere on a website. Navigations are an excellent use of transitions.

The web moves at an alarming pace. Techniques that are the latest and greatest today, are outdated and even harmful tomorrow. This is why it’s so crucial for anyone in the web industry to be in constant contact with the current state of things. I myself am always learning more about the web, what it’s capable of, how to achieve things, and what the latest best practices are.

An interesting conundrum appears though with the pace of the web’s development. It’s nigh on impossible to publish a book about “current” design trends on the web for the simple reason that by the time the book is on shelves, it’s no longer current. This is why I personally don’t suggest buying a book about web design, but rather seek out online services like codecademy to learn things.

I’m currently working on a project that required me to create some animated imagery for demonstration sake. They’re reasonably simple demonstrations of how Chinese Chess pieces move and attack. However, in my attempts to make life easier by using Photoshop’s new(ish) animation tools, I was dismayed to learn that there are no Easing options available between keyframes.

This means that all movements feel jerky and unnatural. Compared to real life where things accelerate and decelerate (which is what easing simulates), all the photoshop is capable of is sudden darting animations like the one below.

I certainly hope that someone at Adobe HQ has put in a request for easing in future editions of Photoshop, elseways I’ll be picking up After Effects again and slowing down the workflow process I’ve come up with.

I’ve just finished creating my school’s Senior Show website, which is quite a doozey of a site, with 43 people loading 5 portraits and 3 work samples each inside a single huge page controlled by Fullpage.js. This naturally causes a pretty big load time, which is uncool at best, and undoubtedly bad for driving traffic to the site.

In an effort to curb this load time, I implemented a technique known as Lazy Loading, which is to say that I made the site only load what content was necessary at the time, thereby spreading the load time out considerably, rather than setting it all to go at once.

The results were instantly recognizable, but the way I implemented it was only applicable to images. The site still loaded slowly because of the video content that was there as well. Even though the videos weren’t being told to play until they were needed, our best guess is that the browser was attempting to load in some of each video beforehand.

Time is money.

This is my final semester of University here at The University of Akron. As such I have more work to do than hours in the day and could easily spend 25 hours per day working on everything. I could avoid sleeping, avoid social life, and avoid my recreational hobbies for the sake of getting things done a little faster.

But I believe that free time, sleep, and social gatherings do more for my well being and long-term health than any all-nighter ever will. Allowing your brain to relax and assimilate information besides what it is you’re working on can only ever improve your functionality when you do start working again.

Besides the obvious scientific reasoning behind why sleep is beneficial to brain health and learning, this opinion has been around for a long time. People say to “sleep on it” when a tough decision is at hand. Or when reaching an impasse, the common advice is to go do something else for a while, then return to the problem. Our brains aren’t meant to constantly churn away at top speed. They need rest and relaxation just as much as our bodies do.

Scrolling down to the bottom of Wordpress.org will reveal a small and simple phrase: “Code is Poetry.”

At first you might scoff and wonder what that even means. But if you take a moment to think about it, it’s actually rather profound. Smashing Magazine put out an article a while back that explains just how similar Code and Poetry are.

Looking up “poetry” yields this result:

literary work in which special intensity is given to the expression of feelings and ideas by the use of distinctive style and rhythm

Code most definitely has distinctive style, and that style varies depending on the language being written. Which is not unlike the varying styles between different kinds of poetry.

The rhythm of code is also undeniable, whether by nature of its monospace typography, or simply the monosyllabic nature of the individual words, there is a cadence to code that is always there. Beyond that, the formats and syntax for a block of code repeats itself throughout the entire coded document, creating a rhythm.

The expressions and feelings in code are much different than in poetry, as they serve a different audience. In poetry we manipulate words and grammar to evoke images in the minds of the readers. With code, the goal is to evoke images and functions in the computer executing the code. The goal is similar, the audience is different.

Search Engine Optimization is a topic broad enough to have its own professionals dedicated to only it. But it applies to web designers and front-end developers a fair amount as well. The reasoning behind this is pretty simple.

You can make the most awesome website in the world, but if it doesn't show up on Search Engine results, no one will ever see it.

It's a very good idea to familiarize yourself with some basics of how you can design and build a website to be Search Engine friendly.

Seeing as how I am a Senior at the University of Akron, I'm currently in the market for a web design job post-graduation. There's a lot of opportunities out there, but there's one line I keep seeing on job requirements.

"Must be able to create Pixel Perfect websites based on mockups." or something along those lines.

Pixel Perfect is an illusion, a falsehood, a contradiction, and an impossibility.

The web is no longer pixels, there are no standard sizes that become "the page." Everything is fluid. The designer cannot control what size device their website is viewed at, nor can they choose to ignore a large portion of the browsing population by only catering to a certain screen size.

The idea behind a "pixel perfect website" is pretty understandable. If print design has standard sizes, so must web right? Surely 960px wide is a standard "website" width. Why should I bother scaling it up for higher resolution screens, or down for people who have multiple windows open? Why even bother with tablets or mobile devices?

It's a very understandable line of thinking. The problem is that it's a line of thought that is a few years behind its prime. Today, there are no standard sizes for the web. There are some theoretical breakpoints, but even those aren't ideal. Everything has to be viewed on all devices, because if a user comes to your website on their phone and runs into a frustrating experience, they won't be back.

The web is fluid now. There is no way to successfully constrain it to certain sizes. Pixels are out, percentages are in.

This shot doesn't look like much I know. But to me it represents an awful lot of thought and planning.

When I worked at Flashstarts over the summer I fell in love with the whiteboard. Since then I've made an effort to always include a white board in my creative process. They're so clean, simple, and always eager to soak up ideas in a collaborative way. Some ideas flow easily when you are using a pen and a page, but with a marker and an erasable medium, I've found that my brain just opens up.

I expect this is because the whiteboard's very nature allows anything at all to be considered for a time, then promptly discarded when it's discovered that the concept won't fit in. Rather than a piece of paper which grants permanence to all ideas equally, a whiteboard is in a constant state of flux, always wanting to be pruned, improved, and refined.

Perhaps the best feature of a whiteboard is that it is multiple-user friendly. It's extremely easy to have multiple people erasing, sketching, writing, and doodling at the same time. Everyone in the group can see the ideas as they emerge, and thus everyone can comment on them, improve them, or vote to discard them.

Just after my post about truly responsive images, the Responsive Imaging Community Group (RICG, the driving force behind the new <code>picture</code> element) has officially released a Wordpress Plugin that implements their system by default on all images in a Wordpress blog.

As a designer who develops everything for Wordpress at the moment, this changes everything. Assuming it works (I haven't gotten a chance to try it out quite yet), this makes the backend of what I do so much easier. I'll no longer have to create janky loops and call for every image's url by hand. Now I just have to call in the plugin's php codes, and everything will just fall into place.

Flat design will die.

I'm as much a fan of clean, simple, and minimalistic design as the next designer (just look at my own website), but I am not a big fan of flat design.

Design is all about communicating a message to the viewers in an effective way. Most often this is done by relating the content to imagery and typography that compliments the message, thereby creating a cohesive theme for the message to sit within. This is where the problem with flat design arises.

Nothing in our world is flat, even the smoothest surfaces we come into contact with have subtle variations in light and color across them. The stark colors that make flat design so recognizable simply don't exist in the real world. It thus follows that they do not relate to many (if any) real-world messages.

I believe this current obsession with flat design is an overall industry reaction to the beginning days of the web where the more obnoxious textures and gradients you could use, the cooler your website was. I imagine that web designers that operated in those dark days are haunted at night by their past creations. Those nightmares probably spawned the idea to radically disown the texture entirely, and instead adopt large swaths of bright, minimal color paired with simple type.

This is all not to say that there is no reason to ever use Flat design. As with textures everything has a purpose. I believe that there is always a best answer when the questions of a design are asked. For extremely simple and easy to use applications, flat design drives home the simplicity and ease-of-use. However, for larger and more complex applications, a flat design would serve only to deceive the user into a false view of simplicity.