Thinking » Tags » layout
Microsoft has officially released IE9 to the public, making IE6 even older! Microsoft has improved leaps and bounds since those days however, and the new IE9 is a testament to that.
Benchmarks abound; you can actually see the difference. Even on older hardware having the GPU render the canvas helps immensely. Now instead of everything loading at roughly the same speed, you can actually witness IE9 rendering the entire page, and waiting for Flash to finish! This really helps with the responsiveness and smoothness while you are browsing around, notably scrolling under low-end hardware.
CSS3 and HTML5 Support
Although it doesn’t support everything, Microsoft has really stepped up supporting a large number of these new standards. Let’s hope this continues, and help remove some of the negativity around Internet Explorer. If you’re interested in what exactly IE9 supports, head on over to Microsoft’s MSDN page.
Integrated Tracking Protection
In the world of spam, tracking, and targeted advertisement, this is a great new addtion. IE9 Includes the ability to add pre-made, managed, and custom tracking lists. This helps protect you from people attempting to track your behavior, including your searching, surfing, and buying habits. However, it cannot protect you until you set it up. It is very straight forward: just click on the Cog in the upper right, safety, tracking protection. From here click “Get a Tracking Protection List Online…” and select one (or more) lists you want to use to help protect your privacy.
Media Query Support
One of the more interesting aspects of CCS3 is Media Queries. It really adds a new layer of creativeness to the designers and how they can create a flowing, unique, and engaging website at various levels of screen size and hardware. You can read more about an actual use of these in a previous post from J.
Endeca is a search and business intelligence company whose focus is business on the web. When they wanted a new blog that would focus on trends and insights for eBusiness, the team at Oomph decided it was time to use CSS3′s @media declarations for responsive template designs to optimize the site for multiple mobile and desktop devices.
The result was a super flexible theme, built on WordPress, that scales according to the user’s device size. One set of templates displays content in a few different ways, optimized for the iPhone, Android, iPad and desktop monitors of all sizes. Visit the site, grab the window corner to resize it, and watch what happens. Just one catch: current versions of Internet Explorer don’t yet support CSS3 (version 9, which is right around the corner, does add support).
For the developers out there, read on for a quick run down of what we did and how it works.
We recently launched a new website for the Buzzard’s Bay Regatta, an annual sail boat race that happens in Dartmouth, Massachusetts. It was a fun site to build, and as the design lead I was given a lot of creative freedom to come up with a look and feel. The client had an awesome collection of photos featuring different classes of boats that race in the Regatta which they wanted to showcase as prominently as possible.
We came up the idea of including a list of vessel classes on every page, allowing the user to click on any class and use it as a page background. Pretty neat, huh? One pretty serious problem: while this worked great on the home page, the interior pages had content that covering most of the image.
The solution was to create a slideshow that can be launched from any page, any time. Just click View Slideshow, and all the content on the screen slides away, leaving you with pristine images in a well timed slideshow that starts with your current image!
Go check it out at http://www.buzzardsbayregatta.com!
Last month a momentous site launch occurred at the Oomph headquarters. Jake was able to finally throw the switch and make the new Rhode Island Green Building Council Virtual Green Marketplace live. It was momentous for a few reasons, the first of which is of course the fact that this represents the first major comprehensive listing of LEED™-certified projects and “green” resources in the state.
Though the RIGBC site was developed on the WordPress platform, the first thing you may notice is that is does not have the typical “look” of a WordPress site. Since the site was designed and mapped out first, the CMS platform was chosen after the storyboards were developed. This allowed Oomph to choose the right platform for the job after the details of how the client wanted everything to work were mapped out. The site was developed from scratch, so we were able to make it look anyway the client wanted.
Ask any front end web developer to describe common challenges involved in converting (or “cutting”) a design. Ask a designer who’s savvy about front end web technology what the biggest creative limitation of the web “canvas” is. In both instances, you’d likely hear an earful about fonts.
Fonts have long been a classic example. A storyboard designer can use any font they have installed on their own computer to make a beautiful design, but hacks aside, web browsers have only been able to render text with fonts installed on the visitors’ computers. Since there are only a handful of fonts that are more or less guaranteed to be on all modern computers (think Arial and Times New Roman), websites have been limited to a handful of uninteresting choices.
C. Murray Consulting Oomph’s second post on Smashing Magazine, Advanced Power Tips for WordPress Template Developers, was published on the morning of November 25, 2009.
The original article covered 4 over-arching topics, and was so lengthy that the editors decided to split it into two parts! Part two – which focuses on customizing the administrative experience – will be published in two weeks.
Advanced Power Tips, part one, covers techniques for multi-block page / post content and digs deeper into methods for associating page content with post categories.