Skip to content
Sitemason - Build on Us

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.

Another strong focus that falls in the Progressive Enhancement camp is web accessibility. This serves a few purposes. Not only do we have an elegant solution for our visually impaired users, but also for those who choose to turn javascript off. In both cases, the markup needs to be structured so the content is front and center and navigation is intuitive and doesn't bury the user in links. Using this "content first" approach also aides search engine optimization, but that's a buzzword for another day.

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.

Billy White headshot thumbnail

Billy is a web developer and Chief Product Officer (CPO) at Sitemason, and has been with the company since 2006.  Read more about Billy White.

Contact Billy:

Recent Forum Posts

Warning: file_get_contents( failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /mnt/files/s/ on line 11 Warning: usort() expects parameter 1 to be array, null given in /mnt/files/s/ on line 14 Warning: Invalid argument supplied for foreach() in /mnt/files/s/ on line 17