The Responsive Web Design Process | Cuker


At Cuker, We begin the responsive design process
by outlining the use cases the consumer’s intent and the key conversion points on desktop,
tablet and smartphone. We use web analytics historical data and consumer research to support
our approaches. We then start to define the information architecture navigation and page
structure with low fidelity layouts or lo-fi’s. This is a fast way to create multiple options
for layouts starting to identify challenges that we have to overcome. In this phase, we
are also identifying the paths that a consumer will take while navigating on desktops, tablets,
and smartphones. Next, our user experience team establishes the layout, grid structure
and break-points. It is important to keep a fluid layout rather than relying on three
hard breaks because devices are rapidly changing in size and aspect ratio. As new devices are
constantly changing the market. We always start by creating a base set of grid layouts
and standards for titles, subtitles, and navigation and body fonts. This is very important because
it helps us create consistency across different layouts, significantly reduces the code complexity
and also has SEO benefits by ensuring the page structure follows SEO best practices
from the beginning. We use this guide to create interactive and responsive wireframes, giving
an idea on how the site will feel and function on each device. Just taking your desktop content
and shrinking it down to mobile is not the right approach. Smartphone users are often
looking to make a transaction with the shortest amount of time. Tablet users are often spend
more time on the site than desktop users, so tailoring your content approach per device
is critical. After refinement of the user experience, our Art Directors apply the final
design to the wireframes to bring the brand to life in the new digital format. Then our
development team builds all of the interaction states and must tailor those actions per device.
Roll overs on desktops must be converted to touching interactions on mobile. Clicking
carosels should be swiped-enabled on mobile. Before launch, we conduct a QA testing on
numerous devices. We don’t rely on automated testing software. This is the tactial aspect
of navigating on a mobile device because you are tapping, touching and swiping. It’s important
that you physically test to see how everything feels and reacts on a mobile device. Don’t
be shy to go back and make changes to create a better experience for your customers. Post-launch
is essential that you listen to your audience and adapt accordingly. Make sure that you
have a in-depth analytics implementation and watch the user behavior on your website. Take
suggestions and keep an open mind and listen to the analytics.

One comment

  • Aby Abraham

    Great video Cuker team !!! Is there a full video for the responsive design process ?? If yes can you please share the link!!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *