I presented recently on Responsive Design Usability at WordCamp Victoria BC 2013, hosted at the University of Victoria.
After designing the event-logo, tweaking the legacy-wordcamp-theme for mobile-friendliness, designing the event templates & integrating a handful of schedule revisions, & creating my presentation… I thought I should make the most of my efforts and chronicle both the presentation, & the WordCamp Responsive Designed Theme in an article.
Useability in Responsive Web Design
Ease of navigation is crucial for all websites and interfaces. If an interface is difficult to navigate the viewer / user will be less likely to use it.
Remember that a sites navigation is more than an invitation to explore a website. The primary / banner navigation is used to summarize site-contents and even show a user where on the website they are.
Users should always have an easy time finding their bearings on a site. Secondly, users should always be able to get to where they want to be on a site with as few ‘clicks’ as possible.
Responsive Design Usability
Links should have a large ‘Clickable Area’ or ‘Place to click on’ (accomplish this by displaying the link / a-element as block and adding width / height properties… rather than padding, which can restrict expandability.)
Show all user when they can click not just most users. Account for color-blindness and other vision impairments. See also: Accessibility Inverting the links color-scheme (reversing the text color with the background-color: blue-background and white-text Changes To white-background and blue-text) is a sure-fire way to communicate interactively.
Mobile Friendly, Easy Browsing
A good rule of thumb is to have a secondary navigation in the sites footer. While useful on widescreened displays this is especially useful on mobile where the page & web-design have less lateral space, thus having to be scrolled further.
Having a secondary navigation at the bottom of a page allows viewers to keep browsing after exploring a page without having to scroll back to the top. This, along with x-browser support of fixed-positions elements is fundamental for responsive design useability.
The same useability technique also applies to paginating-links (Next-Post & Previous-Post Links). Pagination links should appear both above and below an article. Related article links are well suited to a position below the article, while breadcrumb-menus can be useful both above and below page-contents.
Responsive Styling for WordCamp Theme
This Style-Sheet is Not Perfected Yet, but for the time-being can provide a good starting point for those wanting a responsive WordCamp theme. I may revise it one day, but the staff at Automattic might just beat me to it.
/* Override the Min-Width Applied to the Body Element */
body {
padding: 0;
min-width: 180px;
}
/* Override the Fixed-Widths Applied to Theme Layout */
div#header-wrapper,div#main-menu-wrapper,div#after-header-wrapper,div#before-content-wrapper,div#content-row-wrapper,div#after-content-wrapper,div#before-footer-wrapper,div#footer-wrapper {
margin: 0 auto;
max-width: 1000px;
}
div#header-container,div#main-menu-container,div#after-header-container,div#before-content-container,div#content-row-container,div#after-content-container,div#before-footer-container,div#footer-container {
margin: 0;
width: auto;
}
div#header,div#main-menu,div#after-header,div#before-content,div#content-row,div#after-content,div#before-footer,div#footer {
margin: 0 auto;
padding: 0;
width: 100%;
}
/* Add Some Good-Stuff from the WordPress twentyeleven theme */
div#content-row {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
div#content-row-1 {
float: left;
margin: 0;
padding: 0;
width: 27.4%;
}
/* A Bunch of Things to Sort out Later */
div.grid_3 {margin-left: 0!important;}
.container_12 .grid_9,.container_16 .grid_12 {margin: 0 2%;width: 68%;}.container_12 .grid_12,.container_16 .grid_16 {width: 100%;}
#after-content div.grid_4 {width: 33.3%;}#before-footer div.grid_3 {width: 25%;margin: 0;padding: 0;}
#footer-container div.grid_12 {margin: 0;}
/* Header / #Branding */
div#branding img {display: none;}
#branding-overlay,#branding-logo,#site-title,#site-description {position: static;height: auto;line-height: normal;}
#site-title,#site-description { width: 100%;}
#site-title {margin-left: 2.6%;line-height: 1.6em;}
#site-description {padding-right: 0;margin-right: 2.6%;}
div#branding,#branding-overlay {background: #222;padding-bottom: 20px;}
/* Menu */
div#access a.featured-button {float: right;}
div#main-menu {padding: .5em 0 1em;}
div#access div.menu ul li a {font-size: 1.4em;}
/* Widgets */
div#content-row-1 ul.xoxo li.widget-container ul.tweets {text-align: left;}
/* Footer */
#site-info {margin-left: 2.6%;line-height: 1.2em;}
#site-generator {margin-right: 2.6%;}
/* One MediaQuery Break-Point */
@media (max-width: 800px) {
#content-row div#content-row-1 {width: 100%;margin-right: 0;}
div#content-row-1 ul.xoxo {margin: 0;padding: 0;}
div#content-row-1 ul.xoxo li.widget-container {
float: left;width: 94.8%;
padding: 1em 2.5%;text-align: center;
}
div#content-row-1 ul.xoxo li#search-2.widget-container {
width: 100%;padding: 2em 0;text-align: center;
}
#content-row #content-row-1 ul.xoxo {margin: 0;width: 100%;}
.container_12 .grid_9,.container_16 .grid_12 { margin: 0 2.6%;width: 94.8%;}
}