Developing mobile websites

Building websites for mobile devices is on the tip of everyone’s tongue these days and for good reason: The smartphone market is seeing an enormous growth and people love using their shiny new devices to browse the web.

Most websites we build at Edenspiekermann take this shift to mobile into account by serving a visually optimized version of the page to smartphones. The technique behind this is called “media queries” or “responsive design”. In a nutshell: Different styling rules apply depending on the size of the user’s screen – thus the site presents itself differently on a big desktop display and on a small mobile screen.  

However, in a recent project for Red Bull we had the opportunity to build a mobile webapp. This term refers to a website that is mobile only and has no desktop counterpart. Therefore it can make better use of the features unique to mobile devices. More information on this particular project is available in our blog post about the “Daily Note”.

It doesn’t stop there, though: We wanted to share this freshly gained knowledge, so I held a talk at the Berlin based usergroup up.front on November 8th about the lessons we learned during the development of the webapp. The talk was not very specific to the project itself and ended up being a compilation of advice I would give to beginners starting with mobile webapp development.

Some of the core topics were mobile browser market share, the use of special iOS tags (when making your website webapp ready), as well as hints regarding performance, loading time and how to handle different screen sizes. You can find the slides on Speaker Deck: Webapp development – 10 lessons learned

If webapps are not really your thing and you are more interested in responsive design, I can highly recommend reading this book: A Book Apart – Responsive Web Design; it’s a fantastic round-up on the topic. More information on mobile website performance can also be found in this outstanding article by David Calhoun.