Making Sense of Responsive Web Design For Mobile

By | Blog, ecommerce, Mobile, Social Media, Uncategorized, Web Design | No Comments

responsive web design

Responsive web design, or RWD for short, is a relatively new approach in web development wherein a website is designed to be capable of making dynamic changes to its appearance depending on the screen size and orientation of the device used to view the site/page.

RWD was conceived as a solution to designing for the growing number of devices capable of connecting to the web, which range from small smartphones, tablet devices, to traditional, large desktop monitors.

Designers use breakpoints in RWD to determine a site/page layout’s appearance, with one design above the breakpoint, and another used below it. These breakpoints usually depend on the browser’s width.

The same HTML code is used across all kinds of devices, with CSS used to change the layout and appearance of the page depending on the device used. Instead of creating a completely separate website and code for each device and screen size out there, RWD offers a single code base to support differently sized view ports.

This results in a design wherein page elements reshuffle depending on the view port’s size. For instance, a 3-column design for a desktop will shift to a 2-column design when viewed on a tablet, or into a 1-column design on a smartphone. Responsive design is hinged on proportion-based grids to reshuffle web content and design elements.

Common Problems

While responsive web design can be an effective solution to provide equal access to users on different devices, it can also lead to hiding some design elements out of necessity. This is common with background images, which have to be omitted when moving to smaller screens. When faced with the problem of hiding content and page functions, as well as altering the appearance of pages for device types, it’s important to base your decisions on information about your users and their needs.

Figure a. -3-column Design

Figure a. – 3-column Design

Figure b. -2-column and 1-column Design

Figure b. – 2-column and 1-column Design

An example of responsive design. Figure a. shows a 3-column design for desktop screens, while Figure b. shows a 2-column and 1-column design for tablets and smartphones respectively. 

Performance Issues

Performance can be a problem with RWD. Because it offers the same code regardless of device type, meaning a 5-inch phone gets the same code as 24-inch desktop display, it’s possible to run into performance problems, what with smartphones relying on a slower data connection.

It’s important to remember that changes in design occur on the client-side, so don’t test your designs in a controlled environment. Test your RWD in real environments, like outside where connectivity can be spotty and several factors come into play.

Usable Responsive Web Design

Since responsive design involves shuffling elements on a website, both design and development teams need to work together in order to create a usable web experience across all devices. RWD can be akin to solving a puzzle—figuring out how to shuffle around elements on larger screens to fit into smaller, longer displays, and vice versa.

However, it’s not just about making sure things fit. More importantly, it should be about making the design usable across different screen sizes and resolutions. With various site elements moving around the page, the user experience can be fragmented between devices, hence the importance of design and development teams coming together to evaluate the result of an RWD.

Responsive web design

Responsive web design options

Prioritizing Content

Another important aspect in RWD is content prioritization. This usually isn’t a problem with desktops, since more content is visible without scrolling on a large display. On smartphones however, the limited real estate eliminates the choice users have of looking around the page to find the content they want; designers and developers must now serve the content they deem most important to users, and place in an area of premium visibility.

The last thing mobile users want is to scroll endlessly down a page to find information of interest.

Bottom Line

It’s important to remember that responsive design is only a tool, not the final cure to device fragmentation. Many webmasters make the mistake of believing RWD to be perfect, it’s a solution and it doesn’t always ensure a usable experience. The techniques for common user experience are there, but designers and developers must hone them to support users across multiple devices.


Majority of Email Opens Take Place on Mobile Devices Studies Show

By | Automailer, Blog, ecommerce, Mobile, Research, Web Design, Web Store, Webpage Monitoring | No Comments

image1 (2)

Over the last year we have seen multiple studies from firms like Experian Marketing Services and Yesmail showing an interesting and important trend: the number of people opening their emails on mobile devices continues to rise, with 50 percent or more email opens occurring on the mobile platform.

As the year comes to an end, yet another study by Return Path, yields similar findings. Their research shows that in December 2013, 51 percent of email opens happened on some kind of mobile device. The study also marks the first time ever that Return Path has observed mobile email opens getting a majority of the platform share.

Most notably, the highest percentage (62 percent) of mobile email opens occurred over Christmas, likely caused by the deluge of holiday greetings and shopping transactions made by consumers. Perhaps

Similar Findings by IBM: Online Shopping


Further supporting this, IBM also reported having 48 percent of all online shopping traffic coming from mobile devices on Christmas day. Results are up by 28.3 percent compared to Christmas Day in 2012, while also surpassing the traffic share of last year’s Black Friday and Cyber Monday shopping blitzes. Mobile also accounted for 29 percent of all online sales on Christmas Day for IBM, showing a significant increase of 40 percent compared to last year.

Other noteworthy findings by IBM include a clear pattern—and a continuing trend—indicating more purchases happen on tablet devices, with browsing occurring predominantly on smartphones. IBM’s research shows smartphones account for more traffic compared to tablets, at 28.5 percent and 18.1 percent respectively, but account for only half as many sales, at 9.3 percent and 19.4 percent respectively.

More Shopping Traffic on iOS than Android


Another interesting find by IBM is how iOS devices reportedly drove more than twice as much shopping traffic, compared to Android devices on Christmas Day, at 32.6 percent versus 14.8. Return Path also showed a similar disparity, this time on the email front. The market research firm found that 86 percent of mobile opens happened on an iOS device on Christmas day—58 percent of opens occurred on an iPhone, 28 percent on an iPad.

A similar study by Movable Ink also found a major imbalance between emails opened on Android and iOS mobile devices.

More Findings

It also comes as no big surprise that Return Path found that the majority of email messages on mobile devices were opened on weekends and holidays, while emails opened on traditional desktop computers spiked during Mondays. In other words, mobile opens happened when people were away from work, and desktop opens while at work.

For Internet service providers (ISPs) and email service clients in the United States, vast increases in email opens occurred on Gmail in December, which Return Path correlated to a recent change Google made to display images, which are now enabled by default.

If anything, these findings show what we’ve been telling our clients throughout the previous year, that is, not to forget to design emails for the mobile format. Mobile email opens are no longer just a trend—they’re here to stay, and will only continue to grow.