News
As a digital design team we often see websites that are badly out-of-date, and in need of a refresh. Website designs that don’t display well on a mobile device, let alone utilise the capabilities of modern browsers.
To most website visitors the problems with a bad website design are obvious. The text is hard to read, images are pixelated, menus are frustrating to use, the list goes on. However when we visit a well designed website, we only see a beautiful and intuitive website, User Interface (UI) design, easy to navigate and an enjoyable experience. We don’t see the amount of thought that’s gone into the User Experience (UX) design.
The UX design takes in consideration how the end user will interact with the website. Research defines who the audience is, what the end users needs are, and create a set of rules based on the expectations of end user for the websites performace and functionality. New technologies and systems can be explored, to find a suitable fit for the website, that will enhance the UX. A set of wireframes and sitemaps will be created for the UI design stage. With all good design, form follows function.
The UI design applies the branding, colours, fonts, etc. to the wireframes. Content is layed out in the interface in a visual way that makes it easy for the website visitor to get the information they need. To allow the visitor to intuitively navigate the website, the UX design is the first consideration in designing and constructing the template. Underlying the visual UI design, is a carefully planned grid and template created to perform and function smoothly and beautifully across desktop, tablet and mobile. No matter the size or scale of the screen, the most important items of the page retain their position in the structure of the contents hierarchy.
When viewing a website on a mobile device, menu bars are replaced with ‘tap-able’ hamburger style menu icons. The UI layout will have changed to suit the screen size, but the same menu items displayed on the desktop version will remain. They’ve just been hidden from view, to maximize the screen real estate for the page content. Other items may be hidden from view as well. Defining a hierachy of content which can be hidden, and content which must be displayed on all screen sizes, is a consideration made at the initial UX design stage.
If you are viewing a website on a desktop, try scaling the size of your browser window. If the website has been created as a Responsive Web Design (RWD), you’ll notice the page layout move and change as you scale the window. In some instances the website has been coded to only display desktop version of the site on a desktop browser, no matter the size of the browser window. But try viewing that same website on a tablet or mobile device. If the website redirects to a URL beginning with m.websitename.com, then a secondary mobile only website has been created.
This can be necessary as the mobile site will display a condensed version of the desktop website.Refining and removing content, to help improve performance and page load times. However, Google would prefer if the same website was used for all screen sizes. Google now give preference on mobile device searches to websites that are ‘mobile friendly’.
It’s now more important than ever to make sure that your website performs well on all screen sizes and devices. With people spending up to 2.5 hours a day using their smart phone, a simple Google search on a mobile device, could be the difference between your businesses website being found or not.
4 February 2016