Design your way

Thursday, October 9, 2014

Tablets, mobile phones, and even lighter, easy-to-carry laptops are in the hands of more and more people as time passes and technology advances. By the year 2015, there will be more mobile users than desktop users, which means it’s increasingly important for companies to transition their focus toward mobile internet users.


Additionally, it’s imperative that companies design their platforms to work across all types of devices, no matter the screen size or shape, through the use of responsive design.


By definition, responsive web design is a system whereby the desired website responds to the particular device on which it is being displayed in order to show the site with full visible content.


From small mobile smartphones to tablets and laptops, responsive web design allows optimal viewing on any device. By using flexible grids and creative styling, it is possible to display the website’s content in a format that suits the width and configuration of any user device.


Creating A Great User Experience With Responsive Web Design


To help determine how the layout of a website will appear, breakpoints are used in conjunction with the design process. Generally speaking, breakpoints are the specific points where the site’s content begins to provide the best visual layout in the way the users wish to use the content.



There are two design configurations: one design is used above the breakpoint and the other is used below the breakpoint. Although many elements come into play, breakpoints are usually based on the browsers width.


Responsive web design and user experience


Much like solving a jigsaw puzzle, responsive web design requires movement of various elements around the page somewhat changing the initial design. Organizing elements to fit can be a great challenge with responsive design as larger pages and their elements will need to essentially shrink to fit on the more narrow platform of a mobile device.


There are times when the opposite is true and smaller pages will need to expand to fit on larger, desktop so that the page isn’t lost on a huge, empty screen. It’s increasingly important for design and development teams to work together so there is a usable experience across all devices and resolution characteristics.


Responsive web design and user experience


Moving elements around the page can cause a very different effect for the user. Elements may look completely different from one device to the other. Therefore, it’s crucial for design and development teams to ensure an optimal experience for the user by making sure all elements work in conjunction with each other and that they transpose across devices.


Responsive design systems, such as Bootstrap or Foundation, are often very helpful when designing a website for optimal responsive design. However, site and user functionality are more important than how it works in general. It’s important to make sure the framework is best for the particular website design.


The best way to perfect the design and guarantee success is through usability testing across various platforms. What works and looks prefect on a desktop may not translate to a small smartphone.


On the other hand, designing for the smaller platform like a smartphone or tablet may not bode well with regard to a huge desktop. It’s ultimately best to test the elements with all available platforms to ensure the highest quality and end result for all users.


RWD websites don’t automatically deliver rich UX, you can still screw up


Responsive web design goes hand in hand with adequate accessibility. Without a doubt, having a website that is built around responsive design does not guarantee that all points are fully accessible to the user.


Color contrast and readability are two areas of concern with regard to accessibility since neither of these elements have anything to do with a successful responsive web design. However, these elements are extremely important to the user and, therefore, should be of concern during design and development.


It’s no secret that visual effects of any website are important for user satisfaction. The site must be visually appealing and give the user a desire to work with it.


Even if the site is one of the most responsively designed out there it can still have accessibility issues if the data is not visually appealing and workable. Additionally, if proper color techniques and contrasts are not employed, the many users out there with color-deficient vision will be greatly affected. Without the use of ARIA to define interactions, vital support may not be allowed and access to the site will be interrupted.


Ultimately, responsive design is about how the content of the site looks and feels to the user, and the ability to interact and access all information on the site plays a vital role in its success. No matter the device used to access it, users should have a good experience with regard to the ability to access all elements of the site.


Always think about your users


In the end, the most important element for the development team to consider is the user. It’s very easy to lose site of the user when writing code and getting caught up in the technical elements. However, development teams must remember for whom their work is actually being performed.


It’s extremely important for all data that has been gathered throughout the process to be passed on to the development team so that they have the ability to make decisions about users and their needs. It’s important for teams to have the flexibility to make changes, and having background on the users will aid them in this process.


Always think about your users


One example is the decision to disable pinch zoom for devices with this capability. Without proper information and user background, developers may decide to exclude this feature.


However, there may be a market for pinch zoom and not having it would exclude visually impaired users from interacting with the final product. It’s important for developers to have all information on the target user group and then to take a giant leap back in order to get a good, broad-scale look at user requirements.


Reduce load time


Reduce load time


Several things can slow down response time for sites and it’s important with responsive web design to reduce load time as much as possible. Every single HTTP request and server response represents one round-trip on the network which can take several seconds to complete from start to finish.


A website can require multiple HTTP requests before any content is viewed by the user. However, there are several ways to reduce unnecessary requests such as consolidating CSS and JavaScript files, in-lining small images, leveraging caching features, and using CDNs.


It’s important to remember, the bigger the website the longer it will take to render a result for the user. For responsive web design sites, images are a definite problem.


Page speed issues


Therefore, it’s important to use methods to eliminate issues images can cause by adjusting image size and format, managing cache more effectively, compressing files when appropriate, and removing obstacles such as white space, comments, and image metadata. In addition, there are automated solutions to aid in managing image resolution that will help to deliver images that are appropriate for the website.


Remove a certain type of social media buttons


Social media buttons may likely be the reason for slow response times when loading responsive design sites on mobile devices particularly when there is a slower cellular connection.


Since bandwidth and latency are typically at a premium on smaller, mobile-type devices, response can build up over cellular connections and cause serious problems. Therefore, it’s important to remove excessive fluff on a site such as those pesky TWEET and LIKE buttons in an effort to decrease the number of obstacles the data much run through before producing an end result for the user.


As always: Test and then test some more


Once the newly developed site is up and running, it would be a huge mistake to just let the site sit without further testing. It’s crucial to continue to analyze and test the site on a regular basis keeping a sharp eye out for issues that may arise.


A/B and user testing is a great idea to make sure that any issues are handled in a timely manner and that they don’t linger on the site for too long. Website modifications do not have to be huge changes.


Some of the most successful websites have made small, seemingly unimportant changes over the course of several months or even years that, on a whole, add up to be huge in the end. It’s vital with regard to website management to insure continuous testing so that proper data may be used to determine when changes are required.


Likewise, keeping up with current technology is crucial and will only increase the site’s usability over time. As new and improved devices enter the marketplace, responsive web design will make keeping up with future technology easier, but it’s imperative that continual testing take place in order to make sure users are enjoying their experience on the site.








Source: http://ift.tt/1v6lvk0

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading