The Mobile Web: A Developer’s Overview

Tuesday, November 18th, 2014

The Mobile Web: A Developer’s Overview

When a customer requests a website which scales well between mobile browsers and full screens (better known as “responsive design”), often they don’t understand why it requires so much extra work. But designing a responsive site requires a unique sort of design dualism, constantly deciding what can be retained, what needs to be changed, and sometimes even what should be removed, between the big- and small-screen versions.

Historically, the web experience has been one of expansion. Computers started out slow, but got faster and more sophisticated. When the World Wide Web was created in 1989, a 640-pixel-wide color CRT screen was an expensive luxury. The popularity of the Web helped spur technological innovations. Over time, screens got bigger and pixels got smaller. The languages of the Web became more sophisticated. Everything was bigger, faster, brighter.

Then in the mid-90’s Apple put a web browser on a PDA, changing the field forever.

Now that mobile browsers make up over 32% of Web traffic globally (Statcounter Global Stats, Oct. 2014), developers have very unique challenges while creating responsive sites. On the one hand, the “big Web” hasn’t gone away; sites designed for a smaller screen seem cramped and primitive on a big screen. On the other hand, sites designed for the “big Web” are a poor experience on a handheld device, with nearly illegible text and links too small for the human finger to touch.

Smartphones are very limited devices compared to a full-fledged computer. Computers have power to spare to render some of the more advanced new features available to web developers, where cell phones will struggle mightily if they don’t simply give up altogether. This is made all the more challenging by the enormous disparity between smartphones. An Apple device has different strengths when compared to an Android device, and an older device can be extremely limited when compared to the newest version of the same model. Merely changing from a mouse-driven design to a touch-oriented one can incur large structural changes. But, in the end, nearly all smartphones have web browsers, and we want websites to work on as many of them as possible.

Luckily, the developer’s toolset has grown as old web browsers fall by the wayside and new technology takes their place. The languages of web design are “living” languages, constantly changing to adapt to new circumstances. As newer browsers come out, they incorporate more of these developing language features. The latest versions of these languages, HTML5 and CSS3, let the developer create what are essentially whole new looks to websites depending on arbitrary triggers, including how screen width.

More advanced techniques include Javascript programs like Modernizr, which uses passive testing to determine each individual browser’s capabilities. With this information, developers have the option to load alternate methods, called “shims,” to cover the gaps for a smooth browsing experience. Properly designed, a single website, loading exactly the same information on every device, can look and work perfectly within whatever space it is given.

As the Web has evolved, so has web development. It’s the developer’s job to keep our eyes on the moving target and create new ways to display information on the Web. Whatever the future brings, we are necessarily on the forefront, ready to make each company look good no matter where their next customer might come from.

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like