2011: Design Less Restricted
While the Internet itself is still relatively young, it changes a little bit every year. In 2010, design for mobile devices boomed, typography emphasis flourished and many other aspects of web design took leaps forward as well. But now that 2011 has come and 2012 is nearly upon us, what’s coming next?
The Death of Flash
Adobe Flash was once a widely used tool thanks in no small part to its easily implemented interactivity, but its best days may be behind it. HTML5 and CSS3 are quickly becoming its replacement. For those not affiliated with Adobe, this is largely an exciting and welcome change because it will allow for more cleanly produced designs and the reduction of load times.
There are many reasons for the move from Flash. One factor is the implementation of CSS3 transitions and animations. These make it easier to create moving backgrounds, growing buttons, fading objects, and many other flourishes. Additionally, many JavaScript libraries are also growing in use, and allow for a more rich and interactive user experience. A prime example is that of jQuery. The jQuery slogan of “Write less, do more” is particularly apt, since it allows designers to more easily add interactivity, user feedback, etc. while the technical writing is simple and clean. One current trend in web design that takes advantage of this language is the single page website. These sites dynamically move content as a method of producing a clean and centralized design. Since that jQuery it is not a proprietary language, it will cleanly integrate with the other elements of the website—something that can’t be said of Flash.
Aside from competing technologies, the decline of Flash can also be attributed to the growth of the mobile market, in which Flash is weakly supported, if it is supported at all.
Typography is Beautiful
Good designers love typefaces, and the more ability designers have to manipulate their usage, the better. For many years, web design was stuck in a place where only a few fonts were known to be cross-platform, which restricted their usage. No more. Web design is now at a place where it has a plethora of options available, so the desired font can be used while still adhering to web standards! A few new technologies have made this possible.
Cufón is one, well-used method to ensure font stability by converting text into a vector (or line-based vs. pixel-based) format. One of our favorites is the @font-face method, in which actual fonts are downloaded with the website, giving complete access to every character and element. The concerns here are that downloading multiple fonts and weights can become pretty heavy, and different browsers require different file types to be read correctly. To address this, tools like Typekit and Google Fonts API allow for the adding of custom fonts, while not having access to the font files yourself. This works by choosing the desired fonts, then adding a line of code to pull that information from the respective source. All in all, this meets the requirement for cross-platform compatibility, and allows the artist to dedicate more time to creative endeavors instead of fiddling with technical limitations.
Adding Color and Textures
Another 2012 trend is the move toward more simple color schemes and textures. Let’s start with color. Forget about color and shades like black, white and grey. Instead, go for something really engaging. More and more web sites are experimenting with primary colors such as green, yellow or red, but it is best to limit palettes to two or three colors. Web designers can play with different shades of each color and create inspiring combinations to help communicate a feel or reinforce an identity.
In addition to a simplified color palette, textures are now being used to add depth and interest. Textures do not necessarily have to be bold. In fact, sometimes subtle is better. Textures can create additional layers of interest while allowing viewers to focus on the areas of most importance. Many viewers will never consciously notice that the background of your site has been made to look like weathered paper, or that there is “noise” (little flakes of color or black and white), or that the borders look like wood. But that’s really the point. Textures are about creating effects that add depth and dimension without being overpowering.
Mobile is Hot
Whether we like it or not, mobile devices are everywhere. This fast growing market adds a lot of excitement to dynamic web design, but also presents new challenges.
One concern in mobile design is the vast difference in screen sizes, and making content fit well on all sizes and resolutions. One answer to this problem is that of a gridded format, which can be resized and reordered to fit any screen size. Grid layouts are becoming more common, and allow for a very well structured site with clear organization and hierarchy. Another challenge derived from mobile devices is that of the touch interface. The mouse is non-existent, meaning all interactivity must be accessible through tap, or sometimes just the swipe of a finger.
The Future
It’s inevitable that more changes related to web design are on the horizon, and likely always will be. But regardless of what changes, designers can’t forget the importance of usability and creating meaning from the design. Good design will add value through its ideas. It’s up to the talented and resourceful designer to determine what technologies can help bring these ideas to reality.
HTML5 Video and What it Means for You
One of my favorite parts of the new HTML5 spec is the browser based support for video and audio. Up till now, adding video (or audio) to your web page involved an annoying process involving Adobe Flash and inserting some of the ugliest code known to man into your webpage. The <video> and <audio> tags will change all of that!
The <audio> and <video> tags operate the exact same way, and I don’t want to accidentally encourage anybody to place background music (or the sounds of farm animals) on there website! So from here on out we’ll talk solely about the <video> tag!
From a code standpoint, embedding video couldn’t be easier. Open a <video> tag, place the actual video source inside, and the browser does the rest!
All modern browsers support HTML5 video, but (there’s always a but) they support difference video formats. The latest versions of Mozilla Firefox, Google Chrome, and Opera support Google’s WebM open video format. Both Microsoft Internet Explorer and Apple Safari don’t support WebM and instead use H.264 for video playback.
The creators of the HTML5 spec were thinking ahead though, inside that <video> tag you can list fallbacks for different browsers! So we can list a WebM source, a H.264 source, and can even insert an old Flash player as the final fallback for all the kiddies using older versions of Internet Explorer.
Where the <video> tag gets fun is interaction and styling we are able to do with it. Because it’s a HTML element, we can add styling via CSS, create our own buttons and interactions via JavaScript, and even use other HTML5 drawing elements such as SVG and canvas.
The new <video> and <audio> tags help rid our dependence on the Adobe Flash plugin, AND will save time, which will in turn save you money! Thank you HTML5!