When a webpage is heavy with stats, dynamic data and tables, there’s always going to be likely display issues. Whether it’s cross-browser compatibility or spotting potential issues of aesthetics, an info-heavy page needs strong consideration to ensure the key message comes across.
Take for instance the page’s design structure – when dealing with constantly changing content,, thoughts should always be on your design’s breaking point. How many entries can fit on a column? How many characters does the field box display? What happens when the number of rows pushes past the container? Testing limitations can quickly make a clean design ugly, so your design needs allowances when dealing with contingent data areas. Even the once trusted table can be unruly; throwing strange margins and not responding the more modern attributes of CSS.
Setting a standard
When setting up a project that will likely involve dynamic data display, such as the bespoke data platforms developed by SSA, a clear strategy is essential from the start. A key part of early consultation with the client involves establishing what the key outputs are from the data, with the site’s UX built around achieving those ends. Designing a complex piece of software can often be a reductive process; starting with the necessary elements and building in more complexity where possible, trying not to conflict with the site’s ease of use. The more potential flaws and restrictive elements corrected in the inception stage results in less rebuilding and development work in the long term. Consideration must also be made for a client’s potential to build onto an existing design.
Find the right framework
A quick way to fix potential display issues is by using a boilerplate template. The explosion of responsive web design in recent years has resulted in an excellent range of boilerplate variations online. These will differ in complexity and style, but most will have as a bare minimum a reset CSS file to correct browser compatibility bugs and a further stylesheet for an adaptive site container. Think about the likely user of your website and consider also the shape of your content; common methods are to work to a small screen and add elements for wider screens or inversely to work to a wide screen and reduce design for smaller screens. Making sure your content displays well on a range of screen sizes ensures a consistent user experience.
Work to the best browser standards
Old browsers are a necessary evil, but shouldn’t hold back the future. Working to modern web standards allows modern, stylish design that inspires and entertains, often making dry content come alive with the capabilities of transition effects and webkit filters. Of course, dependent on your users expectations, the site should degrade well for older browsers and still allow the key information to be visible. There is also the potential issue for touch screen users to be prevented from accessing information due to your design layout.
Focus on the key info
While setting up a good framework and considering browsers and devices its important to keep sight of rule number 1 – is the key message getting through clearly? Using universal design elements such as colour, line, space etc are still the most valuable assets to ensuring a potentially large and complex amount of cold dry data is clean, navigable and always accessible. The strongest way to avoid pitfalls is in having a strong consideration for users, experience with the software and adaptable approach to data-orientated design.
A selection of boilerplates: http://web-design-weekly.com/2012/06/28/the-best-best-boilerplates-bootstraps/
Styling tables with CSS3: http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/