Responsive Design for Better Mobile User Experience

Problems with Mobile User Experience

As I mentioned the last post, I uploaded the new version of the Coffee Lounge website in February. The site has been responsive since the last summer, but user experience for mobile phone wasn’t good, so I decided to re-design the site.

Here is the list of problems with the old version of the site had.

  1. Connection Speed
    1. Total size of CSS files was too large
    2. Total size of image files was too large
    3. Total size of all files was too large
  2. User Experience
    1. Font size was too small
    2. View point wasn’t set
    3. Tap targets were too small

I would like to hear from you about your experience of the site, so please visit the site. Your comment or suggestion for the site, especially from cell phones, is appreciated. 🙂

Mobile Site Should Design Differently From Desktop Site

Initially I designed the mobile site as a smaller, narrower version of the desktop site, but it didn’t work well. The first problem I encountered was that tables with several columns did not fit well with narrow screens.

I had three tables in the Coffee Lounge website: coffee menu, events calendar and online order form. I ended up making two separate coffee menus and events calendars because the text inside cells was not readable: even one word did not fit inside a cell without corrupting.

I changed the order form from a table to several <div>s with the display setting, table-rows in CSS styling, so it looks like a table, but it rearranges its elements on the screen as the screen width reduces.

Resolving the Problems

The site speed increased by optimizing CSS files and reducing image file size. The site had four CSS files. The two CSS files were almost identical, so I eliminated one. I replaced a large image file with several much smaller image files which are used for image buttons. The image below is the test results from Web Page Analyzer.

Download Times

Image 1: Download Times

Source: Web Page Analyzer

I followed the guidance from Google Developers for improving Mobile UX: increasing font size and line-height, setting a view point for mobile devices and enlarging the target by using a larger font for the text links and adding image buttons.


Image 2: Mobile User Experience (Before)

Source: PageSpeed Insights


Image 3: Mobile User Experience (After)

Source: PageSpeed Insights

Results and Conclusion

The new version of the site looks much better and easier to control with smartphones. The old site was very difficult to view and to navigate from the phones with higher screen resolutions, since the site display was controlled by the number of pixels in the screen width but not the physical size of the device. Once the view point was set, the site displays as I intended for mobile devices, even if I use a smartphone.

As a conclusion, the development of responsive web design is more complicated and challenging, but it can provide reasonably good user experience for mobile phone users by optimizing CSS files, reducing image file size, using larger fonts and line-height, and providing larger tap targets.