In an earlier post (See White Elephants on the Web), James Maconochie asked the important question of whether it was time to dust off that old website and make it more consistent with today’s technologies and the needs of today’s consumers. If you agree that your current web presence might be a bit outdated and ready for a polishing – Read on. What follows are some important items for consideration as you begin to develop a strategy to develop Yoursite X.0
The Progressive Enhancements Approach
Graceful Degradation Approach
This is the opposite of the above and should be used when the functionality is the more complex. When you have a page that requires advanced features, you create the advanced features first in a supported browser and then apply patches or fixes to make sure that the older browsers display and function correctly. Using browser specific styles sheets is a common fix applied here. For example if you are building an interactive image gallery you may build the gallery for one browser them make sure it works and displays well on all the others adjusting code along the way.
Laying Out for Multiple Devices
In today’s web we no longer just design for the desktop but for a variety of screen sizes from TV, Desktop, tablet to Mobile devices. So how do we deal with the variety of screen sizes and resolutions?
Enter responsive design. The de facto standard has been to design desktop web pages with widths of 960px. This is the standard size of the iPad and many other tablets. Responsive design takes multi device support to a new level by detecting the size of the screen viewing the page and applying different layout and styles as to create an interface that is easier to interact with and read.
CSS3 media queries are a great way to achieve this. It is recommended that when creating designs for multiple screens each device type have a design created for them if possible. So in an ideal world you would have a design for TV, desktop, tablet and mobile phone. However, we know that budgets and time constraints can limit our ability to do this. So when you only have the time and/or budget for one design create a 960px width design with a viewport meta tag. This is a tag on an html page that tells the browser how to scale the content for smaller screens.
Another approach could be to design a page with a percentage layout which adjusts to screen sizes. However, making this type of design look good on all screens & resolutions is challenging. The reason percentage based design is difficult is because you have to account for the changing size of all elements on the page as the screen size shrinks or expands. When pages have multiple text areas, images, tables, etc… the number of combinations to account for quickly becomes unmanageable. Add the way different browsers treat the layout of these elements and you have a tangled mess that is very hard to perfectly layout for all sizes & browsers. Having a stable container allows predictable behavior cross browsers and provides better looking layout across resolutions and browsers. What usually happens with complex percentage layouts is that the design looks poorly on all screens and you spend valuable resources and time trying to get it to look good across a myriad of screens and browsers. It’s better to have an exact width design that scales with the viewport meta tag.
Most assets on a web page are text, html elements, images or media. To successfully implement a responsive design, these assets need to be able to scale in size across interfaces and devices. Scaling fonts for each of the designs is best achieved by using CSS, overriding the standard style with CSS media query styles. Scaling non-text assets is more complex. CSS can adjust the size of html assets but media and images require server side code to dynamically scale them to ensure efficient bandwidth use and easy cross-device scaling of assets. The idea is to construct a service so you can call an image like this:
Use Modal Dialogs
Modal dialogs help create focus and clear indication as to what the user should do next. Modal dialogs help remove any distraction so the use can perform an action efficiently, like registration or viewing an image. This is a more elegant usability style than – say – having an empty page with a small form in it.
Design for the lowest common denominator first, then add features as needed unless you are using advanced features then design for the feature first then fix each browser or screen to ensure compatibility.
Designs with fixed widths are much easier to create, support and make compatible across browsers and devices. Use a 960px width with a viewport tag as a minimum for cross-device support.
Use CSS media queries to create different designs for each screen size when budget and time allow.
Use image and media scaling server side code to ensure you are dynamically scaling your images to efficiently utilize bandwidth.
Use modal dialogs to focus the user’s attention on accomplishing desired tasks.
In short be sure to design with the user in mind make it convenient for them regardless of the device they use, this will help you achieve a pleasant and profitable web experiences.
Why is content such a “buzz”?! In 2010 the curation of content became the mantra for all things digital. This trend is evident in the explosive growth of companies such as Hubspot and most recently Facebook’s acquisition of WhatsApp. Why is the WhatsApp acquisition considered relevant in the world of content creation? It is because… Read more
One challenge we have experienced in working with medical devices manufacturers is maintaining brand alignment across all software and digital assets. The primary cause is that the purpose of software running on medical devices is completely different than the purpose of web properties. The primary purposes of medical device software interfaces are task and usability… Read more
It’s coming down to the end of summer and I am looking to go on a trip to San Francisco, California to watch the Los Angeles Dodgers and San Francisco Giants play a three game series in AT&T Park. To pass the time on the train I decided to do impromptu research. Hoping that if… Read more
The Enterprise Content Management (ECM) space is really starting to consolidate. With three significant acquisitions in the last 20 odd months (Open Text’s acquisition of Vignette, Autonomy’s acquisition of Interwoven and the recently announced Adobe acquisition of Day Software) the space is seeing considerable movement. For enterprise customers, these acquisitions may mean some pain and… Read more
As the emcee at Ayantek’s SMACdown event at the 2013 FutureM Conference, my role was to set the stage for the SMACdown where two teams of marketing and technology experts in boxing robes were presenting their perspective on the SMAC Stack. The “Marketing Mavericks” team responded to a challenge from BJ’s Wholesale Club and the… Read more