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.
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.
Building device agnostic websites is a tough proposition, given the highly variable nature of the web with:
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.
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.
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.
Accent on mobile first with apps-style interfaces puts typography first and minimalism into the layout for quicker scrolling and better UX.
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.
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.
“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.
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
