G$earch

The Responsive Web Design War Strategy

Posted by Harshad

The Responsive Web Design War Strategy


The Responsive Web Design War Strategy

Posted: 27 Mar 2013 02:19 AM PDT

It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development in 2013. That’s reasonable too, since RWD is currently the only sounding approach that deals with any device resolution universally and effectively. It tries to unite this chaotic browser-based universe littered by the fragmentation resulted from hardware business competition.

responsive web design war
(Image Source: Michael Schmid, Subtle Patterns)

But alas, Responsive Web Design is not the messiah you’re seeking, for it has its own range of imperfections. Yet it is too prominent for the future of web design, and so the conflict incites a flame war among web designers.

Since we strictly practice the philosophy of ‘Make Design, Not War’, today we are just here to explore 5 core disadvantages of Responsive Web Design, and the respective arguments and solutions to lessen the destructive consequences that designers and clients are forced to bear. If you wonder if RWD is the path you seek, be enlightened here.

1. It Burns time to load

The first rule to successful web design: make it as fast as possible. And this is even more important for the mobile user who has comparatively slow Internet connection on the go. However, Responsive Web Design is clearly against fast loading speeds.

That means that if you own a responsive website, there’s a great chance that your competitor’s mobile-optimized website will be way faster than yours. The delay is because to access a responsive website, you have to load all images and scripts of the website first, even if some of them are not required to display on mobile device.

This results the dramatic decrease of site loading speed, taking 7 times longer than a dedicated, mobile-optimized website. Truly a catastrophe especially if you’re doing an e-commerce website, or if your website does not possess enough popularity to risk testing your visitor’s endurance.

website speed influence
(Image Source: Seth Waite)

On the supportive side

Implementation is the problem here. If you don’t want the content, you either don’t load it, or selectively load it – that’s what the conditional tag is for. There are also many engineered solutions available to optimize the loading behavior of the script, such as Adaptive Images which detects screen size and dynamically delivers appropriately scaled images to the website.

Another clever method is to use Lazy Loading, a technique that commands the site to load image content on a later stage, thus putting the text content as the highest priority.

In other cases, you could also switch to a separate stylesheet to prevent any loading of unnecessary or oversized elements.

2. It Breaks A Feature-Driven Website

When a user visits a website on any device, the user expects every core feature – from search to navigation, category to action button. That’s when the problems come in, as the most common approach of the responsive website is to squeeze and pile them into a long, tedious list of functions, sometimes even hidden somewhere. Prepare to see navigation menus crowd your entire screen, or not being able to find a button you actually need

Hide unnecessary features? That’s not an ideal solution, too, since every user has their own preference on certain features, and removing any of them will definitely break usability.

That said, Responsive Web Design is better for a content-focused site, not a feature-driven site. You have to trade your usability for flexibility, while a mobile site development framework such as PhoneGap can solve all the problems mentioned above.

mobile optimized website

On the supportive side:

Although RWD is pretty limited compared to mobile site development framework, there are actually numerous techniques to optimize the usability for responsive web design. For navigation menu, it can be transformed into drop-down menus for mobile devices, and the same method could also be applied to the category section, or you can even implement Accordion layout for subcategories.

Best of all, you could even hide them into a button resting on the top right side of the screen and it will only pop up when it’s required, hence leaving more space for action buttons. All of these can be easily achieved with traditional CSS and JavaScript. No need for complicated development framework.

3. It Disrupts the Advertising Model

Unlike any other web element, advertisement is not something that we, as the publisher, have full control over in the display. Even if we could tweak the ad size to fulfill the requirement of the Responsive Web Design, it will break the deal with the advertiser, as most web advertisement businesses are built on ad placement.

web advertisement placement
(Image Source: Fahrenheit Marketing)

This forces advertisers to re-think about the value of advertising on your site since everything is bound into a pre-defined resolution, and their top positioned ads will possibly be forced to different position of the site, or it will break the layout.

Damned are those websites that rely on advertisement networks such as Google AdSense that do not offer responsive ads. Don’t expect that they will solve the problem for you either. The implementation is rather complicated on their end.

On the supportive side:

It’s quite ‘fortunate’ that most advertisers do not understand much about Responsive Web Design, but here’s a brilliant suggestion for you if they start questioning about the issue – sell the ads as a package.

Simply put, instead of selling a leaderboard ad on desktop version of website that will disappear on certain resolution, include other types of ads exclusive to a set of different device resolution, and sell them as a package.

The whole point is to become responsive with your web advertising model too.

web advertising - responsive model
(Image Source: Mark Boulton)

For Google AdSense, you can switch between the Google ads based on device resolution, for instance leaderboard ad for iPad, banner ad for iPad Mini, and text ad for iPhone. It’s safest to say that this is the only way since you will be potentially breaking Google AdSense’ Terms of Service if you change any portion of the advertisement code, so deal with it.

4. No compatibility for IE 8

On the first day you submit your responsive website to your corporate client, expect him to contact you and ask why the website does not work on his computer. Ask what browser he is using and there is a chance he ran the site on IE.

How do you inform him that his website is not compatible to the browser that currently holds 24% of browser usage share across the world? That totally sounds like the worst decision you can make, but it’s a painful fact that CSS3 media queries, the foundation pillar of RWD, is not supported by Internet Explorer 8 and below.

On the supportive side:

At the time the RWD made its debut, IE8′s compatibility is a huge drawback for the approach, but you can solve this seemingly doomed issue within hours by now, using the Respond.js developed by Scott Jehl.

The script’s effect is pretty straightforward, it supports min-width, max-width and all media types for IE8 and below. Alternatively, opt for CSS3-Media-Queries that supports similar set of features.

There are surely flaws for every script, but it’s far better than seeing the sky falling on your head. It’s not the end of the world though, as only a minority of mobile users browse the Web with Internet Explorer 8.

5. Experience-, Time- and Cost-Intensive

We often tend to hold very high optimism over any technological buzzword that is trending on the Internet (I’m staring at you, HTML5), until we actually apply it to the product. From 4 disadvantages discussed above you can understand that implementing Responsive Web Design requires extensive experience of web technologies and design pattern. It’s insane to reach the goal with trial-and-error method.

device testing
(Image Source: Webmonkey)

On top of that, the approach works under the assumption that the browser will display the design perfectly without bugs. And that, of course, isn’t true. Given the fluid nature of the RWD, there will be unforeseen bugs every time the layout changes its structure according to the screen resolution and orientation.

That means you need to test every resolution on every mobile browser to make everyone of them render correctly. Kind of an overkill for a feature, no?.

On the supportive side:

Unless you are going to display the desktop version of the website for mobile device, any other considerable approach, either mobile-optimized website or hybrid app, will burn as much experience, time and cost as with RWD. And thanks to the effort of all brilliant developers, RWD is now the easiest one to bake and test with relatively low learning curve.

twitter bootstrap

Prevention is better than cure, and preventing browser bugs nowadays could not be simpler, with so many tutorials, frameworks and tools existed to aid the web designers. For beginner, you could kickstart Bootstrap from Twitter to integrate responsive layout brainlessly, and avoid most well-known browser bugs.

For the testing phase, although it’s important to note that it’s always better to test on a real device, online testing services have also improved well enough to significantly reduce your workload, try Screenqueri.es for example. It even allows you to simulate the view of landscape mode.

Responsive Web Design is not just a feature. Improvements on frameworks, development and testing tools over these 2.5 years positively show that majority of web designers truly believe the Responsive Web Design is the future.

Reflection

Nothing is more credible than the words of the author who coined the term, Responsive Web Design:

In the end, it’s just an approach, and an approach works best with this good ol’ piece of advice: it depends.

The development flow of RWD should be to figure out the type of website you will be forging, measure the needs and don’ts from your client, inspect the worth and outcome of each mobile approach, then finally decide if the RWD is best suited for the site.

Are you a zealous follower of Responsive Web Design? Or have you implemented the approach before, and discovered that there are in fact more deficiencies lying within this promising approach? Either way, we’re eager to hear your opinion and feedback!

Yahoo Pays 30 Million For Summly – Developers’ Dream or Marketing Stunt?

Posted: 27 Mar 2013 07:25 AM PDT

Yahoo’s CEO, Marissa Mayer seems to understand what the future is about. Well, to be honest, the fact that she has Yahoo’s backing means her actions are a key variable in how that future will unfold. After two mobile company acquisitions (Stamped and Jybe), each with just a flagship app under their name, Marissa set her eyes on the 17 year old wonder kid of Sillicon Valey, Nick D’Aloisio.

Nick is a very young british entrepreneur who invented Summly, a news app for iPhone. Now he’s in the position to reminisce about his humble beginnings at 15: "When I founded Summly at 15, I would have never imagined being in this position so suddenly," he writes on his site. The reported price is somewhere near $30 million dollars. Pretty nifty for a guy who isn’t allowed to drink yet.

But how did he this young coder/entrepreneur manage to get the interest of Yahoo within one month of publishing his app (November 2012) on the App Store?

Innovative App Algorithm?

It all starts with solving a problem. The problem which Summly solves isn’t an obvious one, but judging by the app’s success, Yahoo thinks the problem exists. "Summly gives you 400 characters, that’s more than a tweet, but less than a full article" says Nick in a video advertisement for his app.

Summly Launch from Summly on Vimeo.

The actual summary of the news is done by a proprietary algorithm, designed to mimic human thought process by using organic metrics. You’ve heard that probably. And like me, you probably didn’t understand a word of it.

But no matter, since technically Yahoo! owns that technology now, and after shutting down the app, they’ll go ahead and incorporate the algorithm into future Yahoo! Products. So they aren’t that open to sharing. Summly doesn’t rewrite news, it just selects certain key phrases from a text, and displays it to the user, cutting down time spent trying to filter through the tons and tons of information available on the Web.

But is this worth all that money or is this only marketing?

What It’s Worth

I would say it’s a marketing play. The actual algorithm, created by Nick in his bedroom, I dare say, is not the most innovative in the world, judging by the way the news are displayed. Don’t get me wrong. Nick is probably a genius.

He taught himself how to code at age 12. He created other apps before this one: Facemood (a Facebook mood analyzer) and SongStumblr (a music discovery service). He did all that at the age most kids still can’t memorize the entire alphabet. I know I didn’t. But let’s talk about the algorithm.

The million-dollar Algorithm

It’s basically a point-based classification system for different occurrences of certain keywords and keyphrases. Each of these is given a rank, and then the top ranking ones are displayed. Nothing innovative here. The trick is it’s smart enough to recognise verbs in different tenses, it’s smart enough to ignore linking terms like "and" or "but". It won’t however skip important linking terms like "and still", which is usually used before an important idea.

That’s great. It’s a good algorithm! And the previous app from Nick, Facemood, was probably the inspiration behind it. That app also used an algorithm to determine the mood of the user’s facebook friends.

So how much is the algorithm worth? Certainly not $30 million dollars. To be honest, I should mention that the current day algorithm is under constant improvement, with the help of NLP specialists and other big brained individuals. Nevertheless, I can’t help it think that Yahoo! could have developed a similar or better algorithm with a much smaller investment.

It’s Pure marketing – Here’s Why.

Yahoo! is trying to position itself as a Mobile Company in the future. You’ve seen it with their other deals and acquisitions. Don’t get me wrong, the fact that they get a brilliant young entrepreneur in their rooster is cool also. The fact that they get a good algorithm, a sizeable user base, some good technology, that’s all cool. But that’s all it is. It’s just cool. And that’s what’s getting everybody talking about them now.

Everybody is awaiting their apps. Everybody knows they are going mobile. That sort of publicity is invaluable.

Funky Design – Check!

The actual design of the app is superb. I love it. It’s basically a flat design with awesome complementary coloring. Brilliant choice of fonts, with just a touch of 3D elements. The overlays are just right in intensity. Professionally done. Nick is displaying his impeccable marketing skills once again, through the design of Summly. It has nothing to do with the actual content shown but it helps sell Summly.

Heavy Funding, Good Support

Li Ka-shing, the Hong Kong billionaire (the 8th richest on the planet) had a hand in the product, 2 years back when it was still called Trimmit. One of his investment funds, Horizons Ventures caught word about Nick’s app (at beta stage) via TechCrunch, and wanted in. They wrote Nick offering help (worth $250,000) which got Nick staff, office space and a tech patent. You gotta hand it to the kid, he got a bit of help from high up.

Celebrities always help

On the actual day the app was launched, there was a big event with big celebrities showing up. Ashton Kutcher, who is also an investor in the app, Stephen Fry, Yoko Ono. All ages represented. If that’s not a good marketing plan, I don’t know what is. So from the moment the app was launched, news articles started pouring in. Everybody wanted to see how it goes.

Within 4 weeks, the app was already on 500,000 devices. That’s what good marketing gets you. At the end of that month (December 1), discussions with Yahoo! were already happening. So as you can see, there had to be a plan all long.

Conclusion

While headlines like "17 Year Old Entrepreneur Sells His App Company for $30 Million" catch a lot of eyeballs, the fact is not anybody can do it. You do need a lot of support, luck, timing, a ton of great marketing skills and… some more awesome marketing. Oh, and being part of somebody’s bigger marketing play is also important. Yup, it all comes down to marketing.

Wallpaper Wednesday: Minimalistic Wallpapers

Posted: 27 Mar 2013 04:46 AM PDT

Minimalism has emerged to be a prominent style in our era. Because time is important, we have open a path to minimalism to simplify the complicated things in our life. Designers love the idea of turning something vast into something so minimal but still capable of potraying the same idea or info.

The idea for this post is similarly simple. This week’s wallpaper wednesday, we reveal a set of 15 minimalistic and simple wallpapers that strips things down to the bare necessities.

Be Original. Available in 1680×1050.

Wallpooper Strikes Back. Available in the following size(s): 1680×1050, 1920×1080, 1920×1200, 2560×1440, 2560×1440, 2560×1600. Download zip.

wallpooper-strikes-back

Dengerous Water. Available in 2560×1600.

dengerous-water

8 Bit Heart. Available in 1920×1080.

galaxy-practice

001. Available in 2560×1600.

001

Think Geek. Available in 1600×900.

think-geek

GameCube. Available in 1920×1080.

gamecube

Use Your Imagination. Available in 1920×1200.

use-your-imagination

Coffee. Available in the following size(s): 1920×1080, 2560×1440. Download zip.

coffee

Minimalism. Available in 1920×1200.

minimalism

E39. Available in 1600×1200.

e39

Kite. Available in 2560×1600.

http://www.asiatu.com/uploads/Desk/201111/13/Asia79240201111130926341.jpg

Black Minimalist. Available in 1920×1080.

andromeda-is-gone

Umbrella. Available in 1920×1200.

umbrella

Wallpaper. Available in the following size(s): 1920×1536 2048×1536, 2560×1440, 2560×1600. Download zip.

wallpaper

0 comments:

Post a Comment