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.
GPU Rendering
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.
For the front end web developer, it’s all about taking someone else’s creative – often designed on a highly controlled and extremely flexible canvas like Adobe Photoshop – and implementing it in the much less controlled and much less flexible world of HTML/CSS/JavaScript. Sometimes, a design that look great as a static image or storyboard just doesn’t translate well into web code, especially when not-so-design-sophisticated clients have to maintain the content and some of the imagery.
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.
Most of our website design projects involve a first design for a new site or web application, or a complete redesign from the ground up. A home page and design “refresh”, however, can be a smart, often overlooked investment in a site’s vibrancy, particularly in times when budgets are tight and that vision of a redesign might be out of reach.
Of course, not all sites are suited to an evolutionary (as opposed to revolutionary) face lift. Putting lipstick on that 10 year old site with the scrolling marquee, blocky graphics, and green background is probably not a smart investment. But there are many websites with reasonable aesthetics – maybe a few years old – that don’t need to be torn down and rebuilt. Some creative thinking about how existing structural elements can be refined, coupled with a face lift of the home page’s content and, perhaps, key landing pages, can offer real bang for the buck.
Recently, we did just that for the New England Law Library Consortium (NELLCO).
