As more people are started using
mobile devices, like Smartphone’s and tablets, for every task that used to be
only capable on desktop, one thing has become clear: mobile is taking over
Internet surfing. And, it's not even just surfing. It's everything from
browsing social media outlets, checking emails and doing some online shopping.
Because mobile Internet usage is
increasing rapidly, it's extremely important that your website is mobile
friendly. Usually this isn't a major concern. You have a website designed for
desktop users and another site specifically developed for mobile users. But, is
it possible to have a site that is equally favourable for both desktop and
mobile users?
There actually is a design that can handle both types of users. And it's called responsive web design.
What is
responsive web design?
Responsive
web design (RWD) is an approach to web design aimed at crafting sites to
provide an optimal viewing experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide range of devices
(from desktop computer monitors to mobile phones). In other words, with a
responsive website design, you don't have to have worry about having different
websites for various devices or making sure that your site runs properly on a
mobile device
Why responsive
web design?
Mobile First
·
Sites used to be designed for desktop users
first. Mobile versions were for too minimal and had a very small functional
experience. When a team designs the site for mobile first, the end result in
the experience is focused on the key tasks users want to be able to accomplish
when viewing your website.
Some other Benefits
·
Responsive sites work well across many existing
devices on the market and should be a safe bet that it will be this way for a
considerable time to come.
·
When you optimize your site no matter what the
end user decides to view it on will make their life easier. Happier customers
make for happier business.
·
Mobile Responsive sites take a bit longer to
design and develop, but they survive longer however management, upgrades and
support only need to be applied to a single place. This will save time and
money.
·
Managing SEO for separate desktops and mobile
sites is hard and it does not produce as great of results. Google recommends a
responsive approach. Consolidating the view of your results means more focus.
·
Having your site consistent and optimized no
matter what platform you are using to view it from, will provide a better
experience to the user which in turn will lead them to engage with you than
deciding to go elsewhere.
Which
device and browsers should I test?
ü Look
at the client traffic on the services today
ü Remember
80/20 – focus on the 20% that produce 80% of the traffic.
ü Expect
changes if you move from static pages to responsive
ü Statistics
in region and the market
ü What's
hot - on the way in the market - what's on the way out
ü The
type of device, the screen factors (size, dpi, quality) and the performance
ü The
OS and statistics from different sources
Apple devices - you can find information
about the most popular here
Android devices - you can find information
about the most popular here
How to test
mobile/responsive Website?
ü
Synchronized
Testing:
Synchronized testing is an efficient way to
automatically perform the same action across a variety of browsers and devices
simultaneously.
Tools like:
Gost lab
ü
Web-Based
Services:
Web-based services offer the ability to test your site
across a massive collection of mobile OS and browser combinations.
Tools like:
Browserstack and crossbrowser testing.com
ü
Viewport
Resizers:
Viewport resizer is a browser-based tool to test any website's
responsiveness. Once you activate the bookmarklet you have a series of
predefined device icons that appear along the top of the browser to just
between viewports.
ü
Browser
Developers tools:
Google Chrome’s DevTools has a
feature called device mode that’s loaded with helpful tools for
testing and debugging responsive designs.
Unlike most other responsive design testing
tools which simply resize your viewport, device mode actually emulates the
mobile device experience, particularly touchscreen interactions like tapping
and swiping, right in your web browser.
The tools features are:
·
Test your responsive designs by emulating
different screen sizes and resolutions, including Retina displays.
·
Evaluate your site’s performance using
the network emulator, without affecting traffic to other tabs.
ü
Simulator
& Emulators:
A mobile emulator is a web-based simulation of how websites
and applications will appear and function in a mobile environment.
What need to
be tested?
ü
The flow and the stories – the communication
with the user
ü
The GUI (presentation) and functions
ü
Difference desktop and mobile users
ü
Mobile users are in different situations and on
the move
ü
Smaller screens, light and contrast
ü
Use of swipe, keyboard and mouse
ü
Different functions for different situations
ü
Security
ü
Robustness, stability and speed
ü
Data quality and communication with other
systems
Common
Gotcha's
ü
Landscape to portrait to landscape
ü
Drop downs
The
problem though occurs if you have long selectable items on your drop downs, For
example, consider a list of security questions
·
What was the name of your first Company?
·
What was the name of your favorite film?
·
What was the name of your junior school?
All
these will truncate the questions, so all the user will see is "What
was the ...". There's really no solution for this, but rethinking
the approach/redesign.
ü
Pop ups
Found
any kind of required pop ups from a browser can be a little troublesome on
mobile devices. This can include,
·
Are you sure you want to continue?
·
Read these terms and conditions.
·
Select a date from this calendar
Finally
ü
Decide how your web application is used. You can
get a great wealth of information from Google Analytics tool to see which
devices your customers use to reach your website
ü
From the analytics, narrow down your choice of
device testing to target the majority, i.e. make sure your website works for
majority of people as there is no practical way to test on every device
combination.
Utilize automated tools and emulators to do the
basic checks and high-level functional testing and combine that with real
device manual testing
