Twitter Facebook RSS Logo Logo

Device Agnostic Website Design

Device agnostic website design allows for seamless experiences across devices. Today, users own three or four devices and a study of UX trends by Forrester Research shows that 90% of users multi-task on multiple devices, beginning the task on one device and ending it on another. 50% of multiple device owners use multiple devices at the same time, especially at home or at work. Keeping users engaged with a beautiful, functional website is key in a multi-device era.

Let’s look at what goes into device agnostic website design that works on any device at any time and place, at any time.

Device Agnostic Website Design

Responsive web design is device agnostic design – upwardly and downwardly responsive across devices of popular sizes so that your website can be built strategically for the long term. Since we access the World Wide Web from more devices than ever before, responsive web design  or RWD is no longer just a trend, it is here to stay as websites are optimized for screens of all sizes: small mobile devices, tablets and large desktop monitors.

Flat Design that excludes three-dimensional elements,  even gradients, bevels or shadows, works on all devices.

Scalable Web Design or SWD  ensures that your web design is compatible across all browsers, handling pixel density sustainably from 4k displays to smart watches. Your website should load and work as it should, regardless of browser or device.  SWD uses scalable vector graphics (SVG) that maintain their pixel quality when resized or zoomed (as against raster graphics) and are used for stunning animations or graphics.  Scalable vector graphics provide a scalable and flexible image format that allow designers to think less about screen resolution and pixel density and more about design. SWD is also used for retina display screens.

The challenge of building device-agnostic websites

Building device agnostic websites is a tough proposition,  given the highly variable nature of the web with:

  • Touch or keypad inputs
  • Slow or fast network speeds
  • Screens that vary in size from tiny to extra large
  • Browsers that are outdated and hostile to modern design and technologies,  yet chosen by some users over other browsers.
    As designers, we must accept that the World Wide Web is fluid and in constant flux and has a diversity of users. Some make hostile browsers their conscious choice. Our designs must allow for their freedom to choose.

Simplify website design
For every design element or code, ask – is it necessary?  Will it be accessible from the slowest connection/weakest link/browser? How accessible is your website?  How much value does this item add to the page? Is it worth the pain? Is it worth the weight?  The wait?  When in doubt, knock it off. Trim the fat. Prioritize.

User-first design essentially puts content first because content is what the user consumes.  The design will make it as simple as possible for the user to consume and interact with the contact – the fewer clicks and taps, the better.

Content first.
Make text readable on the smallest screen.    Content  includes video, graphics, infographics, photographs, slideshows, games and more to make the web a rich playground of experience.

Mobile first, but don’t forget your other users.
Design from the inside out. Users want a great experience on all devices – and they use an average of three or four. Although responsive design is flexible, certain modular elements set to scale by percentage rather than specified screen size will  provide uniform experiences to all users, regardless of device.

Touchscreen first.
Use the “fat-finger-first” approach to design. Allow for clumsy UI both on mobile  and large screen. From ATMs to smartphones, to TV sets, to airport terminals and 30″ desktop screens and touchpads, people are swiping and poking almost any screen today. Tappable links impact site design and need to be considered right from the beginning, so we need to adopt a so-called “fat finger first”approach to design. Don’t design for touchscreens retrospectively.

Typography first. 
Accent on mobile first with apps-style interfaces puts typography first and minimalism into the layout for quicker scrolling and better UX.

Minimalism and navigation elements.
Ghost buttons that indicate where to click without hiding content, and come into color view on hover; hidden menus and pinned elements. Other design and navigation options like infinite scrolling,  parallax  scrolling and modular scrolling, ghost buttons,  background video and much more have made the web a rich user experience.

Card navigation which breaks up content into modular form  is ideal for the responsive web.   A picture, a title, an icon and flexible design make card design a great navigation option for the designer – almost like a mini website.

Aim for website speed and performance with faster page loading times.
The average webpage takes too long to load.  Impatient users simply skip to another site. A page that loads in under 4 seconds is a better UX, leading to higher conversions and therefore a higher page rank  in Google.  For ecommerce sites 2 seconds is good.
http://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/

Technology agnostic for the long term.
“We can see that the HTML/ CSS/ Javascript trio is the “primordial soup”. Then we have lots of CSS in its various forms, custom filters, CSS Effects, 3D Transforms, Adobe Regions, etc. Pre processors, HTML5, WebGL and SVGs also stand out. On the server-side languages, use of Ruby and Python and experimentation with entelechies such as Node.js will become more widespread. The multiplicity of frameworks, builders and preprocessors will be another constant.” –   Future of Internet and Web Design  by Tarun Mitra
https://medium.com/i-m-h-o/future-of-internet-and-web-design-587b66677bf3#.hyp50opw9

User friendly, inclusive design  is design that works universally – for male and female, right- and left-handed, differently-abled, different languages, different ages, different browsers, from different regions, slow internet connections,  and different capabilities with the computer and internet.

To create the ideal inclusive design, interact with real users who want to use your product. Answer their questions.  Get the design team working together on solutions that work for the largest spectrum of users.  For the best results, get a cross-functional, cross-border team working on the product and iron out all the problems that real-life users face.

Working towards the ideal multi-platform product 

A single, unique, cross-platform version that is adaptable to all devices is what  designers and developers are working to create, in W3C’s vision of One Web, with multi-modal access from any device any devices from anywhere at any time – by touch, gesture, keypad, or voice, whether it is in a car, watch, home, TV, mobile, computer or home appliance. Which is why we need to go device agnostic, browser agnostic, pixel agnostic,  resolution agnostic, vector agnostic, technology agnostic and work towards usability and accessibility to make our products viable for all users. Content, UX, UI and visual design will be a large part of this process

Sources:
 –  Device Agnostic by Trent Walton – 2014/03/10        
Thinking Responsively: A Framework for Future Learning
by Paul Robert Lloyd August 25, 2015 
– Future of Internet and Web Design by Tarun Mitra · August 5, 2014
12 Key Web Design Trends for Brands, April 7, 2015, Oliver Agency