As days go by, the mobile technology is taking over our lives… from personal agendas to precious moments and important conferences, everything around us seems to shrink and condense in these almighty devices, creating a Wonderland of their own. So why shouldn’t the World Wide Web do the same?
Websites can now be rendered on any smartphone exactly (or at least the differences can barely be sensed) in their original format without compromising the amount of data that’s being displayed or affecting the overall design. There’s still the matter of optimizing the content display so that smartphones’ users won’t keep zooming in and out every time they want to read something, and that’s where a couple of web design tricks step in.
While the desktop version allows for a rich background and a wide range of menus and sub-menus, the mobile version is a lot more compact and no extra padding or margins have been added. When creating webpages that can be rendered on smartphones you need to consider all the factors that affect its loading time.
For instance, you can’t use large images or Flash containers because it will gobble up bandwidth and as we all know by now, iOS doesn’t support Flash media. So, the trick is to express (kind of like in shorthand writing) what the website stands for, but using the same theme and much of the same navigational controls.
However, not all websites have a mobile version that are available and as such, there have been attempts in creating small apps that provide everything the website has to offer, but with far less resources.
But enough talking. The best way to see how things really work is to take a look. So we’ve prepared a couple of examples that clearly demonstrate how smartphone-friendly websites have been designed (more like re-designed) in the hopes of achieving low-bandwidth consumption and at the same time offer the same functionality as the desktop version of the webpage.
And since iPhone is still the reigning king in this jungle, we’ll start with the newly launched Turntable.FM App, that not only allows you to access the same features as the website, but it also comes with a better and more intuitive user interface. One might say (boldly) that the iPhone app is even better than its webpage counterpart, because you can use it while under lock-screen mode.
However, the main purpose behind these website-to-apps conversions is that it allows the developer to expand on the topic, at the same time keeping the original functionality.
Since the smartphones market has been expanding so fast, an unimaginable amount of applications have been pouring in the Stores and even WordPress fans now have a reason to rejoice. That’s right, there are WordPress apps that enables you to create and edit posts, moderate comments and even add images and videos, using your beloved mobile device.
Of course, the app doesn’t look all that much with the browser version, but no matter the differences between all these mobile variations of layout and display, all your favorite features are there at your fingertips (literally).
Another expressive example on how a website can be transformed into an app is DeviantArt mobile edition. Providing the same browser experience, but only on a smaller display, the app supports all the categories and features that you’re used to.
The only difference lies in the fact that it has been slightly reorganized, but the overall theme is basically the same. The mobile version of DeviantArt website is probably the best idea ever not only because you can browse through artwork on the go, but also because you don’t have to constantly zoom in and out (read: everything is already screen-fitted).
DeviantArt App for iPhone is no longer available on the App Store
Examples from all categories come to mind, from lifestyle and games to music and social, mobile apps have a great way of capturing the essence behind the website and bringing it to your small display.
Pandora is yet another U.S. favorite and it also comes with mobile versions that bring everything that the original website has to offer. Tons of radio stations and of course, the same theme that you are already accustomed to, have been placed in a single well designed and more efficient app.
If you’re looking for a more educational app for you or your children, the Kindle app is now available and it can give you access to the Kindle Store in case you feel like purchasing a book while you travel. The application offers a great user experience, with smooth browsing and completely secure payment, so you don’t have to care about a thing, except making a payment and reading the book you enjoy.
And what’s really great about it, is that the application allows you to make notes, bookmarks and highlights across devices, and also syncs your last page, allowing you to keep up with your readings anytime you want, even on another device.
Two of the most popular websites that have been optimized for smartphones are Twitter and Facebook. As you are well aware, the basic functionality of these two social networking websites has been carefully tweaked so that none of the user experience would be affected.
Although more demanding users might find the applications not that fully-featured as they expected to be, the layout offers a great optimized mobile experience of your favorite social media websites, perfectly matching the websites themes, creating a real feel. You can easily update images and videos (straight from your mobile device), browse through albums and basically everything you usually do on these websites…
Also, there’s the matter of hardware and software specifications for smartphones that need to be taken into consideration. iPhone may be a potent piece of hardware and software, however, it lacks the ability to play Flash media, which makes it a bit more difficult to work with.
There are ways to circumvent these types of shortcomings and the best solution is using HTML (or HTML5) compliant code and even some CSS3 is well advised. There’s nothing wrong with going back to basics as long as you’ve got a solid and structured design sporting a carefully and artistic template.
At the end of this, it is undoubtedly pointless to underline the importance of having a mobile version for your website, when you’re looking to attract more and more users. So, it’s vital that websites should have a carefully optimized mobile version and also (wherever the case permits it) creating an app for specific OS’s is definitely encouraged.
This way, smartphones users have a wide range of options to choose from, and if you’ve done a great job at designing the app (meaning if you contracted the right design agency) and the website, you are guaranteed to keep attracting more and more users as your business expands.
At BrightPink Studio, we design & develop awesome websites, make gorgeous print materials, create logos and other branding items, and more. In our blog, we share news, tips & inspiration - like this article! If you enjoyed it, please share.