If a Bee Wrote a Blog
It'd be all buzzz! Bad jokes aside, that's where we begin today's post, tackling some web buzzwords. Specifically, Progressive Enhancement and Responsive Design. We'll look at the meaning of these concepts and how we're employing them in the new interface.
First, Progressive Enhancement is the idea of presenting an experience tailored to the capabilities of a user's browser. This takes into account everything from bare bones web accessible browsers like screen readers all the way to that brand spanking new browser with bleeding edge features.
Responsive Design then is the concept of delivering that experience consistently to any sized device. From the tiniest of mobile phones to mid-sized tablets on up to giant desktop monitors.
Both concepts are instrumental in defining the user experience. So how are they being put to use in the new Sitemason interface? Well, it all starts with semantic markup. Clean HTML is the cornerstone for both of these concepts, and any great web application for that matter. Since SM6 is a ground-up reinvention of our platform, we were really able to put a strong initial focus on the markup. This will ease design enhancement and versioning immensely, and keep us as close to future-ready as possible.
Lastly (for this post anyway), we've applied 8 breakpoints to our interface design to handle just about any device that can be thrown at us... at least until 3D browsing comes around (generally on April 1st). Breakpoints are the hallmark of Responsive Design and are basically screen width markers the stylesheet uses to adjust layouts using CSS @media queries.
Our largest breakpoint is at 1140 pixels. That means for most desktop users, the design is the same for >1140 pixels wide. Whether you use a new laptop at 1280 resolution or a giant desktop monitor at 2560, you'll probably see the same layout. Between 930 and 1140 are minor adjustments to the menus that will make it a little easier for smaller laptops and tablets. Below 930 we reorder our navigation and right column tabs, and finally beneath 460, for the smallest of mobile screens, we remove some navigation options entirely. This is all much better visualized as an example like last weeks video teaser.
Let us know what you think and if there are any other buzzwords around the web you need deciphering, we'll do our best to start off with a joke. 'Til next time.