My latest experience making websites mobile-friendly using responsive design

I am now software developer at Quinto Networks  and first big project is launching new websites for all Quinto Group subsidiaries. Specifically those websites needed optimization for mobile devices.

Why I chose responsive design path over standalone mobile version:

  • I am already familiar with the concept as I’ve adapted quite a few websites for smaller screens using CSS media queries
  • Development is more iterative than building separate mobile version
  • Time constraints (“everything” needs to be done on launch date) did not allow me to dive into separate website development
  • Web design was already accepted and implemented so I couldn’t choose mobile-first approach

Here are some of my thoughts and problems I’ve encoutered while implementing responsive design:

  • User should see content without scrolling down
  • It’s important to take more time on mobile navigation as it is key to page flow
  • With only CSS it is more difficult to optimize for mobile as You intended so either way some Javascript will be needed
  • Page size needs to be as small as possible. Desktop version of websites for Quinto Group are up to 2MB big but I managed to make smaller screen devices load less than 200KB of data when opening Quinto websites.
  • Custom fonts are not needed as they eat up bandwidth and slow down overall rendering but font loading in media queries is problematic as @media (min-width:980px){font-face: …} is not working on most browsers
  • You need to test on different devices. Cheaper Android devices are not as powerfull but they have big market share and You need to provide seamless experience to those users too
  • Firefox and Chrome still don’t have identicall rendering so what works on Chrome probably will not work perfectly on Firefox and vice-versa

Some tools I have used in the process:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s