Tuesday, September 16, 2014

The Root of Mobile First and Responsive Web Design

t was before EthanMarcotte had came up with the revolutionary idea of Responsive Web Design (RWD), LukeWroblewski coined the term that would in essence complete the meaning of responsive web design, Mobile First. Like any great philosophy it guided the right idea to the correct path so it can reach its true destination. It is sad Luke Wroblewski is not as appreciated as Ethan Marcotte when he came up with the term an year before the world would know responsive web design.

It can be argued Luke Wroblewski is only talking about making websites for mobile first and it wasn’t about responsive web design. Though on a closer look what he talks about in the article are now the features of responsive web design. His book Mobile First came out in 2011 which actually included the principles and the philosophy behind this idea and how it was the yin for the yang (responsive web design).

Little can be said about mobile first which haven't already been said before. Surely this idea stems from the need to make websites more adaptive, fast and interactive but what strikes the chord cleanly is progressiveenhancement (PE). This technique came up against the aged gracefuldegradation, a technique used to make a website cross browser compatible even in the lesser advanced versions. It employs making a website for a better version first then slowly dumb down the code according to the version of the browser.

Progressive enhancement emerged from the need to make a code which is useful and less cumbersome. Instead of tearing down the code start from the basic and build on it,thus the debate rages on. The need for mobile first approach in responsive web design reflects the need of progressive enhancement.

They both share uncanny similarities
  • The code for a website should be first written for a mobile.
  • The layout, design and content should be explicitly for mobile- crisp and informative.
  • Code for other platforms is built upon the original adding bit and pieces of everything.
  • The initial and final design is same in the functionality (an essential aspect of progressive enhancement).
  • The thumb rule of mobile first is to make the base code maximum functional and least extravagance as was in PE. This doesn't mean the website looks bad it simply says to remove unnecessary cluttering from the web page.

Progressive Enhancement, mobile first and responsive web design form a close intricate circle where either rely on the power of other two to work. They are the holy trinity of the most modern, aesthetic and functional web design.

Sunday, September 14, 2014

Mobile First Made Responsive Web Design More Meaningful

The mobile first approach is the new fundamental unit of web design. Developed over half a decade of observation, contemplation, experimentation and drawing conclusion. It seconds the idea of the rise of mobile phone users hence a rise in mobile internet has to be catered at some point otherwise the desktop and mobile websites would go obsolete in the near future. It has totally changed the way a website looks or is designed.

A decade ago we saw a boom in the mobile phone technology, it was the advent of smartphones. They were becoming popular and prevalent and websites were being made especially for mobile phones. This revolutionized the web industry into a whole new genre and suddenly the accessibility of a smart phone user increased tremendously. The rise in smartphones can also be attributed to rise of mobile websites and vice-versa.

For past few years we have seen a epochal decline in the mobile websites. The question is what happened in the in the later half of the decade?

On May 2010 Ethan Marcotte coined this term to change our and everyone's worldview about websites and other devices on an article on A List Apart. This marked the birth of of mobile first idea.

Everything you need to know
  • Responsive Web Designs were necessary because the world was moving out of the desktop.
  • New type of devices with various screen sizes like i pads and tabs were being launched so something was required to run websites in all platforms.
  • After the concept of Responsive Web Design (RWD) the idea of mobile first approach was developed.
  • This came from the already existent idea of progressive enhancement earlier used to write the code of website for various browsers.
  • Stemming out from progressive enhancement mobile first approach states to build a code, a design and content for mobile first then slowly build upon it for rest of the devices.
  • The sheer brilliance of this idea also compliments the concept of responsive web design.
  • The most suited web design, layout and content is sought and coded into a responsive website which will impart all the necessary information to mobile users including all the necessary functions that a desktop user have access to.
  • This gave power to the smartphone users and laid down the foundation of a perfect website for other platforms as well.
  • RWD proves to be hell of a costly affair but mobile first significantly brought down the cost of building a website.
  • Apart from cost effective solutions it reduced the wastage of code created usually moving down the hierarchy.
  • Not to mention the amount of time this approach saved for web designers and their employers.
Overall there is overwhelming response of the web design community in the favor of this approach and unless you are on a very strict budget with a very specific need you will definitely end up using this as an ideal tool for your website.

Friday, September 12, 2014

Give Your Website The Best Foundation

To those of you who have read the FoundationSeries by Issac Assimov will find it easy to relate to the idea behind the popular CSS Framework by ZURB, Foundation. It was a path breaking creation in the field of open-source responsive frameworks. In Assimov's Foundation, the protagonist HariSeldon predicts the fall of Galactic Empire and start of a new era likewise ZURB recognized the fall of traditional frameworks and the need of a responsive CSS Framework. Thus became the pioneer of open source responsive frameworks.

Up with the new product Foundation5 which as claimed by ZURB is their fastest and easiest version of the same CSS Framework. The claim of being the most advanced responsive framework doesn't seem far-fetched when you look at its various features. I mean the developers have honestly put their heart and soul into Foundation5 to make it as future friendly as possible. Take a peep inside the new version and learn the truth yourself :-
  • Built well optimized, aesthetic and faster web pages, inserting animation is not a problem after-all.
  • The Sassy CSS or SCSS is simply SASS built with CSS attributes. It allows more flexible, dynamic and user friendly styling of the web page.
  • The code is simple and clean, and the new medium grid and custom semantic breakpoints allow to code for any device swiftly.
  • New and improved documentation to help you understand it easily and the "getting started" guide will do the rest, if not, you have the community forums.
  • Well, the new Foundation 5 boasts new features and add-ons to make the front-end development easier and fun, but how?
    • Interchange : It lets you load different part of websites in correspondence to the media queries or the device in question. Simply, the same content will load differently for different grid size.
    • Off-canvas: Makes the menu pattern easier to code. It is usually out of the viewport and comes in smoothly when clicked or the cursor is placed.
    • Forms : Create forms even more versatile and flexible. In Foundation 5 Forms are built with the default elements as well as with the grid settings.
    • Magellan: With Magellan sticky nav tool have a website with seamless navigation as it allows you to navigate anywhere irrespective of how much one scrolls.
    • Clearing : Creation of lightbox is easier than ever as this custom plugin allows you to take an image of any size and make your own responsive lightbox.
    • Split Buttons : The introduction of new dropdown buttons plugin has greatly improved the split buttons as it gives you loads of new choices.
    • Typography : As a matter of fact Foundation 5 has come up with promising typographical schemes both beautiful as well as simple. They are bound to enchant you.
    • Dropdowns : This is another mentionable feat of this CSS Framework. It created a universal dropdown plugin for any kind of element be it simple dropdowns or popups.
  • Wait, apart from them it contains a whole array of new classier templates to give you a head start in your work.
  • Foundation is based on a totally new Sass processor, Libsass which is way faster than your conventional per-processors.
  • If all this still boggles your mind then Zurb offers an online as well as on-site training program on Foundation by the very people who made it.

So much data, features, code and design compiled in one responsive CSS framework for your benefit, indeed Foundation5 feels worth every penny, Oh wait! They don't charge for it.

Change The Way You Framework

If your website has gone all grumpy and refuses to run well on other devices it is time to think about a serious change. There is no use to chant the same mantra about the necessity of responsive web design you know it is important. What your concern right now should be, is to find a responsive front-end CSS Framework to make your website a delight to see and browse.

CSS Framework

What better way to make your website responsive than to install Twitter Bootstrap (now version3.3.1 released). It is trusted, widely used and arguably the best CSS Framework present in the web as evident on GitHub where it is the most starred development project continuously since February 2012. Their reach is from NASA to msnbc who have used it as their choice of front-end CSS Framework so has nearly 4 million other websites( according to BuiltWith) worldwide built on Bootstrap. Built as a way to remove the non-uniformity within the various libraries used to develop an interface, Mark Otto and Jacob Thornton of Twitter developed a worldwide web phenomenon which they released as open source on August 2010. Though, it became a responsive framework in the version 2.0.

A brief overview
  • A responsive framework integrating CSS and JS to build mobile friendly websites on internet.
  • Bootstrap uses both LESS and SASS preprocessors for its source code.
  • Answers all the needs of a web developer, build websites of any device from a smartphone to desktop.
  • Reliable documentation, large community support to help you out with impressive jQuery plugins.
Yes, it is as good as it says
If you take a deeper look inside reveals this front-end CSS Framework as more than an outward charm. We've peeled layer after layer to bring out what is the best of this responsive framework.
  • Mobile First : With Bootstrap 3.0 mobile first approach has been incorporated in the spirit of this CSS Framework. There is no separate file that contains mobile friendly styles rather it is now existent everywhere in the library.
  • Glyphs : Bootstrap brings you a wide rage of glyphs from Glyphicon Halflings set, made available free of cost specifically for Bootstrap by Glyphicon.
  • Dropdowns : It offers various functions- alignment, headers and disable menu items and adds a variety in your drop down menu, making it dynamic with dropdown JavaScript plugin.
  • Button groups : Add diversity to the way you add buttons to your website. From their sizing, nesting them or making a toolbar do more with the buttons plugin.
  • Navs and Navbar : Bootstrap has various navigation solutions like tabs, pills to make website more seamless. Available navs have shared codes with base .nav class and to compliment them it has responsive toggle-able navigation headers or navbar. It molds according to the viewport size.
  • Breadcrumbs : Have smooth navigation and create a pecking order in the websites. Breadcrumbs feature comes to the rescue to save your time and effort.
  • Pagination : Add more content and create a stack of data on a particular topic in various pages via pagination.
  • Jumbotron : Helps you to outline the important content of your website by selectively changing (usually extend) the viewport size and attract viewers.
  • Thumbnails : Add another dimension to the grid system of Bootstrap with thumbnail. Text, images, videos and various other items can be incorporated in grids.
  • Progress Bars : Add the current progress of any application or action with a variety of Progress bars like striped, animated or stacked.
  • List group and Panels : Customize data into lists with custom design and content or create panels with tables or list group itself.
  • Responsive embed : Videos and slideshow can run smoothly on any device as it allows the browser to detect their width of the containing block. It implies to elements <object>,<video>,<iframe> and <embed>. If you want the styling to correlate with other attributes use class .embed-responsive-item.

Too much information? Even I am overwhelmed writing about its colossal features. This is exactly why you need to try this versatile and responsive CSS Framework today. It has a plugin for your every need, you'll feel as if all your thoughts have been coded into the framework.

Thursday, September 11, 2014

CSS Frameworks is not that hard to understand

Web developers are often heard talking about CSS Framework and its applications. One might wonder what it is in fact? I mean web is crawling with discussions over the pros and cons of a CSS Framework and then Twitter, a social networking site launches Bootstrap which leaves you bewildered whats all the fuss?

To understand a CSS Framework one must know what a framework is. A framework can be defined as a compilation of codes arranged to make a particular job easier. It merely acts as a tool to accomplish your work likewise a CSS Framework is a pre-coded software that uses Cascading Style Sheets meant to create a web design which is in tandem with the global standards. Apart from the grid system and design oriented features many CSS Frameworks also use functions based on JavaScript.
A Framework can be divided into a Front-end CSS Framework and a Back-end Framework. To choose the correct framework one has to understand the nature of the work. Is it design oriented or is it logic oriented? Frameworks can be for varied applications such as connecting the database to the HTML page using PHP, Ruby etc.(Back-end) or making the design and layout of the web page using HTML/CSS, JS (Front-end). Due to reasons solely based on general popularity only Front-end Framework would be discussed.
Front-end CSS Framework -
Front-end CSS Frameworks are in fact functions made up of standard codes and structured files and folders(CSS, JS)
They comprise of:
  • CSS grid system which allows the web developer to arrange and manage the various element of website design in a simple manner.
  • A database of various styles of Typography for HTML elements.
  • Browser compatibility modules and codes so your website can be easily made compatible across different web browsers.
  • The standard CSS classes help the developers to invoke advance UI styling into there codes.
Since advent of responsive web designs all the upcoming frameworks are responsive in nature i.e. they offer responsive websites.
Front-end frameworks can be further classified as simple and complex frameworks where the selection process is completely personal needs depending upon the versatility required.

Simple frameworks: Simply termed as “grid systems” these offer style sheets having column system which aids the arrangement of various elements pertaining to standard design. To name a few- Mueller Grid System etc.

Complete Frameworks: A potpourri of features like icons, buttons, forms, typography and many such elements built to provide a responsive web design having HTML templates, alerts, popovers, navigation, etc. To name a few- Foundation, Boilerplate, Bootstrap, etc.

Apparently, these CSS Frameworks rule the majority of internet and now that you have learned about them don't act naïve in front of your web designer and make your requirements clear.

Wednesday, September 10, 2014

CSS Frameworks : First Step to a Responsive Designs

As an aware consumer one always looks for products or services which offer best possible solutions at a reasonable price. The more he/she digs the better are his/her probabilities of making the right decision at the time of a judgment call. Hence the blog, my reason to impart whatever knowledge I have gained with time, an insight helpful if you are a web designer or a curious onlooker, to help you make an informed decision.
I present you CSS Framework, a set of codes meant to ease your work and give you the best of both the worlds. Aesthetics and performance embedded with responsive web design. Unlike the myth that ready made objects lack the substance of beauty and elegance a CSS Framework offers both, a simple front-end design codes which enables the developers to imbibe them into their main program and an aesthetic appeal, as relevant in generating leads as a responsive web design.
A CSS framework in short is:-
  • An intelligent set of codes to incorporate HTML, CSS and JavaScript in compliance with the standards of the industry.
  • They are used by front end developers to invoke the code of the framework into their main HTML code via classes.
  • Commonly known as Front-end framework it is divided into two categories- Simple frameworks and complete frameworks.
  • Simple frameworks consist of grid layouts and designs whereas a complete framework contains all the tools required to make a responsive web design.
  • A complete framework has many tools and widgets-
    • Typography
    • Grid Styles
    • Iconography, pagination, breadcrumbs, etc.
    • Type of forms, and styling tools.
    • Generate equal height with equalizer
    • GUI widgets, video or sideshow, modal dialogs, tabs, etc.
  • SASS or Syntactically Awesome Style-sheets and LESS are used by complete frameworks.
Granted, a CSS Framework is not the absolute authority on beautiful and sturdy websites with crisp code and high performance. One may argue when a back end programer can make a complete website out of scratch with all the above qualities then what is the relevance of CSS Framework over conventional Back-end programming?
  • Lets me put it like this, "If you wanna go hunting, there is no reason to make a spear."
  • If you do think about the necessity to make a unique spear for yourself mind you, this hunting trip is gonna cost you more than your camp gear and boots.
  • Okay, too much metaphors. It is cost effective to a large degree and the output is simply impressive.
  • Responsive web design made easy.
  • The code is well arranged and simple.
  • Cross browser comparability.
  • Saves a lot of time for both the designer and the customer.
Responsive Web Design is the need of the hour, I believe on this we all are on the same page . Having established the versatility of CSS Frameworks, let me offer you an insight on the best possible responsive frameworks available today.
  • Bootstrap: There is no such list of CSS framework around which does not talk about this versatile invention by Twitter.
  • HTML5 Boilerplate: An HTML5 framework that provides a solid ground to build your website and the ability to combine it with other frameworks.
  • Toast: It is literally a toast to simplicity be it responsive grids and box sizing the complete process feels like playing with a toy.
  • Gumby: Another soldier in the unit of responsive frameworks. With Gumby 2.6 build your websites with ease and agility.
  • Yaml: Build on SASS, Yaml is another marvel in the field of CSS Frameworks that make a responsive web design feel like another trivial code.
  • Foundation: No list can be complete with this product of Zurb built with SASS preprocessor is one of the most advanced responsive framework that present today.
Believe me, you will fall in love with your website once it is completed. One of the most satisfactory feeling in this world is to see the outcome of your own blood and sweat built into a beautiful and responsive website.

Tuesday, September 9, 2014

What, Why and How of Responsive Web Designs

Web designers and bloggers all over the internet have been screaming at the top of their lungs about responsive web design for past few years. It is probable by now you may feel "Okay, YES I got the concept! Can't just anybody around here tell me how to get one?" Well guess what, I'm writing this piece just to tell you that.
Responsive Web Design in short
To summarize responsive designs once again a zillionth time -
  • Designs which adapt themselves with respect to the screen size.
  • It is an ideology not a technology.
  • It focuses on providing user maximum amount of information via any type of source.
  • The mere content and pictures don't shrink, the layout adapts itself to the size of the screen.
Why Responsive Web Design
Once again widely searched and answered question's response-
  • 2.1 billion subscriptions of mobile-broadband (Forbes)
  • As of 2013 73.4 % mobile user access internet from their mobile which is likely to grow up to 90% by 2017 (Statista)
  • In US already 90% of mobile users prefer their mobile to go online (Forbes)
The need for a responsive design is very much evident from such a staggering statistic. If you wish to understand more about it and its need then visit this infographic present in an intricately worded article by Joshua Steimle on Forbes magazine.
To come back to the point which I made you wait for is-
How to get Responsive Web Design
For a responsive design you'll have to be very cautious and thorough at every juncture of the process of website development.
  • Clear you basics: I wrote all the above stuff because it is very important your basics are clear before you begin your journey towards a responsive website.
  • Choose Wisely: It is necessary to choose a web design agency well versed in responsive design and capable enough to do it..
  • Check credentials: Check the credentials of the agency not by reading the testimonials on their website rather by checking their work on a number of different platforms yourself.
  • Technical Aspects: Understand a few technical aspects before you talk to a web design agency, so they do not consider you a naive customer. For example ask them what type of framework they will use for your website. Bootstrap and Foundation are two popular CSS frameworks used these days.
  • Testing and debugging: These two are very important,so this processes should be carried out by a competent agency only so either hire a freelance for a second opinion or make sure the web design agency you have chosen is capable of testing the website in all the possible conditions then debugging the code.
These are some of the checkpoints you have to clear if you want to complete this race and make a responsive website.

Monday, September 8, 2014

A Wake Up Call for Responsive Web Designs

Despite several reminders, cautions and wake up calls many are still oblivious to the existence of Responsive Web Design (RWD). The term was coined by Ethan Marcotte in May 2010 and since then it is on the rise in the digital sphere. The concept of RWD acts like a beacon for your website. No doubt, you can exist without it but, no one would be aware of your existence.
So if you are adamant to be a lone wolf in the wilderness, well then there is not much left to say but if by now you have realized the importance of being heard in the market then I would like to mention some of the features of RWD -
  • Responsive Web Designs are not to be taken lightly as they will shape the future of your website in internet.
  • Users tend to opt for utilities that are diverse and adjustable to their needs. RWD makes this possible.
  • A responsive design allows your website to mould into any kind of screen which comes in its way.
  • The necessity to write the code for multiple platforms is totally non-existent, saves your precious time and money.
  • The rise of smart phones and tablets have rendered the arguments against responsive designs useless.
  • By now mobile phones are responsible for more than 55% of net usage across the globe. It gives you enough perspective on the advantage of RWD.
  • A mobile first approach is advisable while writing the code. It enables you to modify your code easily for other devices with least amount of bugs.
  • Lastly, a responsive design is meant to engage users by its adaptive, fast and aesthetic outline.
Pay heed to this wake up call because nothing is going to warn you now about the possibility of your website getting lost in oblivion if it does not adapts itself to the stimulus.

Sunday, September 7, 2014

Mobile Smart Website is the new Mobile Ready Website

Too long have you been plagued by the web designers telling you ways to have a responsive web design for your website , have it migrated to WordPress or something similar that is in their niche. Here I am writing another piece of informative text that tells you to pursue the best in the industry, whoever you may think he/she is, despite my allegiances. Yes, it is informative i swear.
Since I swore to you it will be informative let me tell you mobile ready website is just another catchy phrase that will have to adapt with the time or it will be gone for good. Read carefully what I'm saying and then cross reference it with what your web designer is telling you about your website. If it sounds similar then he is probably best for you, otherwise its time to go looking for someone who understands mobile ready website is not completely a mobile smart website.
So, to make a better judgment call the understanding of the topic is quite necessary.
  • Mobile Smart website is a holistic approach to responsive web design vis-à-vis mobile ready website.
  • It incorporates all the features of a mobile ready website and gives you better than what you expected.
  • Everything from fluid grids, media queries and flexible images to content matter and its placement is modified to fit the requirement of your customer.
  • It provides the highest level of customer interaction with fluid layout to captivating and informative content.
  • In essence it wants to give the best of both the worlds, responsive web design infused with the content both eloquent and brief. Thus, improving the visibility, subject matter and performance of the website in one masterstroke.
This is something serious to think about. An idea that completes itself and can single-handedly increase your market and revenue. Just to think of it, all your needs handed down to you on a silver platter in the cost of a website is a great deal, an opportunity that rarely comes by again.
Anyway, my job was to provide an “informative text” which I believe I did honestly, rest its up to and your quest for responsive web design to make the right choice.

Saturday, September 6, 2014

Your website may be mobile ready but is it mobile smart?

People usually think once you have a mobile ready website on the go your business is gonna soar and your revenue will shoot up. To some extent it may happen but it will not happen surely unless and until your website is mobile smart.
Mobile smart? What the hell is this ? Totally plausible question, given the scenario where everybody talks about mobile ready website suddenly someone comes and adds smart instead of website and thinks to bring about a revolution by giving a new term to the web industry is a preposterous notion. Responsive web design is synonymous with mobile ready website, the new lingo of the internet and along comes an evangelist who tries to put new jargon in your head. I would belying if I'd say it wouldn't be my first response but its a matter of curiosity.
But yeah, I would definitely want people to benefit from any information I share especially if it helps them understand how to differentiate between a mobile ready website and mobile smart website. So first you have to understand what does mobile smart website means.
Mobile Smart Website
The design which not only follows the principal of responsive design in code but in philosophy. Every pixel of your design would corroborate this new pattern of web design. It is not merely making your website fit into different screens altogether, it means making your website a state of the art responsive website with such seamless presentation which hooks any user by its simplicity woven in extravagance. It has its own share of similarities and differences from a mobile ready website, to summarize a few :-
  • This is not rearrangement of code to fit the web page into different screen size.
  • As Ethan Marcotte, the creator of Responsive Web Design, puts it - flexible images, media queries and fluid layouts collectively comprise RWD. This goes even one step further.
  • Mobile Ready Website is a bench mark of RWD but, Mobile Smart Website takes it to the next level.
  • A mobile smart website is not only a skillful responsive web design but it should appeal in content too. It should grab the attention of end user to make him a possible customer.
  • To give the right amount of information, neither too much nor too less is the soul of mobile smart design.
  • The core principle differs as it aims to inscribe your brand in the minds of the viewer via your website, making it responsive in the process.
  • Less is the new more. Minimalistic art, minimalistic designs, minimalistic information- the art of expressing more with less.
  • Remember, every mobile smart website is mobile ready but every mobile ready website is not mobile smart.
So, before you dismiss the notion remember, every great idea was once the fodder for skeptics and non-believers but eventually the idea prevailed. Having said that, many ideas dissolved into nothingness too. What I mean is never dismiss anything without a confrontation or someday you might think “Wish I would've tried it once.”

Mobile Ready Website: To be or not to be

Getting a mobile ready website is a rage among people and they are queuing up to get the job done as soon as possible. Unfortunately the reality doesn't seem to kick in. Too much advertisements have led you to believe fitting a website into a mobile screen solves all your problem and suddenly you will have tremendous amount of sales going on and your business will be a boomin'.
The propaganda over Responsive Web Design RWD has now gripped more than half of the blogs spread across the cyberspace. All of this seems pretty much a farce if you don't even get gist behind the idea.
Don't mistake my saying that as getting a responsive web design was a mistake. I mean to those out there grinning, who haven't had this done yet are endangered species. Unless they want there websites to become extinct their only way out is a responsive web design. The point is people are so much rushing into getting this done, they have forgotten some key points of the deal which originally was meant to be followed.
Responsive Web Design, what it is and what it is not:-
  • Getting a website to fit into multiple screens isn't the complete answer.
  • Mobile ready websites don't mean they are up to date to handle any all your marketing woes.
  • Fluid grids are not meant to advertise your product, for that you need grippy content.
  • Media queries won't make your websites perform faster and decrease the page load time.
  • Beware of people who claim responsive web design and sell you device friendly templates.
  • Such mobile ready websites are dangerous for you and your business as well. Simply flexible images won't cover the entire genreof responsive web design.
  • There are other factors like content, presentation, performance which collectively contributes to RWD.

Do not let any web designer fool you into getting a mobile ready website and you end up paying for is a flexible web template.

Friday, September 5, 2014

The Reality Behind the Responsive Web Design

've had a hard time believing many people across the globe still believe that fluid grid system and media queries will somehow magically revive your website into the largest hit within a span of few months. Such hopes on a misunderstood concept is sad, and it also makes me angry over all those evangelist of responsive web designs who have sung their hearts out in the praise of responsive web designs without giving away the finer details that matter.

Why am I so annoying today is because I'm tired of writing all the safeguards and advices about those finer details you missed and how they come back to stab you from behind. Hmph(taking a deep breath). Sorry, if I got a bit carried away, happens to you if your sitting 9 hours a day in front of your PC thinking about how to warn others of the supposed foolhardy they are so keen on doing.
Without much ado, responsive web design and mobile ready website means the same if, and only if, a professional and competent web designer is saying so. Otherwise it is a simple case of getting your website to be made to fit in a mobile. Okay, I'm not saying someone is trying to rob you or something, its possible the concerned person or agency in question is himself uncertain about the nuances of responsive web design.
I have to admit the real perspective of RWD can be quite elusive, hence the common misunderstanding. So i'm gonna break it down to you in few simple points so you read them carefully and get an idea of what am I trying to say and why it is important :-
  • Responsive Web Design came into being to support the idea behind making a unified website for all the devices.
  • Flexible images in fluid grid system and media queries definitely constitute a major part of RWD and initially it was all there was to it.
  • So what you think it means is what it meant at the start but as the concept developed a whole new identity emerged.
  • Accommodating your website into mobile is one aspect but representing it in mobile is another.
  • The representation includes content, its placement – what and where, and embedding performance into your website.
  • Studies have shown people will stay on a webpage if it loads within a second or two in the mobile.
  • This combination gives you an actual responsive design and to state it correctly a mobile smart website.
  • The idea is to engage the user to the last minute and communicate with him in a crisp yet effective manner.
I'm hoping whatever I wrote was of some value to you and would help you in deciding the future of your website and your business.

Thursday, September 4, 2014

Why Responsive Website Design is a Requirement not just a Feature

It is highly unlikely that you are a smart phone user and have never browsed a website in your phone. If you haven't, it is probable that you must be learning how to do that as we speak. My point being that most of the internet traffic nowadays is channeled via smart phones and thus the problem, of how to build websites that are flexible enough to suit any platform. By now you might have guessed the solution to the stated problem(as its quite obvious from the title) is Responsive Website Design (RWD) . So, let us take a deeper look and understand what a responsive design is.
According to CNN, mobile phones were responsible for 55% of internet usage in USA around January 2014. while stats regarding people accessing net from their desktops vs mobile are:
  • Mostly via Desktop — 11 percent
  • Evenly split between both mobile and PC — 28 percent
  • Mostly via mobile — 37 percent
  • Only via mobile — 23 percent
Therefore, it is quite apparent that flexibility of a website, or its being responsive in different platforms is an essential necessity.
So if you have browsed enough websites from your mobile then you might have come across certain websites whose texts are misaligned or have too much sideways scrolling. These are some of the many flaws that Responsive Website Design has overcome quite brilliantly as it offers complete functionality, optimum readability and can be easily used such that it remains consistent across various platforms and screen sizes.
If you are still not convinced why RWD is the need of the hour then take a look at these staggering stats concerning web browsing via mobiles :
  • 74% of consumers will wait 5 seconds for a web page to load on their mobile device before abandoning the site.
  • 46% of consumers are unlikely to return to a mobile site if it didn't work properly during their last visit.
  • There are over 2 Billion people accessing the web from their mobiles.
As the data suggests the future of websites is in responsive design and you can find a lot of web designers, like us at honeyvig's Web development services who are working to make your website responsive and flexible. For those who think its just a passing phase and RWD is just another feature need to be vigilant for time is ruthless and the future is moving beyond your desktop screen.

The Current State Of E-Commerce Search

When e-commerce search works, it’s fast, convenient and efficient. It’s no wonder that so many users prefer searching over clicking categories. Unfortunately, our recent large-scale usability study and top-50 benchmark of e-commerce search finds that search often doesn’t work very well.
On-site search is a key component of almost any e-commerce website. That’s why we at Baymard Institute have invested months conducting a large-scale usability study, testing the e-commerce search experience of 19 major e-commerce websites with real-world end users.
We’ve boiled our findings down to 60 usability guidelines for e-commerce search design and logic. Based on these findings, we’ve benchmarked the search experience of the 50 top-grossing US e-commerce websites, rating each website across all 60 search usability parameters. In this article, we’ll present some of the findings from this vast research data set and explore the state of e-commerce search.
Benchmarking the search experience of the 50 top-grossing US e-commerce websites reveals a surprisingly grim state of affairs. Here’s a walkthrough of just a handful of the most interesting statistics:
  • 16% of e-commerce websites do not support searching by product name or model number, despite those details appearing on the product page! An additional 18% of websites provide no useful results when the user types just a single character wrong in the product’s name.
  • 70% require users to search by the exact jargon for the product type that the website uses, failing to return relevant products for, say, “blow dryer” if “hair dryer” is typed, or “multifunction printer” if “all-in-one printer” is typed.
  • Searches with symbols and abbreviations are not supported by 60% of e-commerce websites. For example, the websites do not map the double quotation mark (often substituted for the double prime symbol: ″) or “in” to “inch.”
  • Autocomplete suggestions are found on 82% of e-commerce websites. While some implementations greatly enhance the search experience, 36% of implementations do more harm than good.
  • Only 34% allow users to easily iterate on their query by prefilling it in the search field on the results page, despite the fact that, according to our tests, users frequently need to iterate on their query — on average, 65% of test subjects required two or more query attempts during testing.
  • Only 40% of websites have faceted search, despite it being essential to e-commerce search because it is the foundation of contextual filters.
  • While an e-commerce website eases navigation by offering two types of breadcrumbs, 92% of the top-50 websites display only one breadcrumb type or none at all.
Below, we’ll walk through each of the above statistics and provide insight on how to improve the search experience and success rate on your e-commerce website. We’ll round the article off with a general analysis of the current state of e-commerce search.

1. 34% Do Not Support Users’ Searches By Product Name

At the heart of a good e-commerce search experience is the search engine’s ability to return relevant results for the query. While our usability study identified 12 unique types of search queries that users make on e-commerce websites, let’s stick to the most basic ones here, because even those prove troublesome for a significant portion of the top e-commerce website.
The simplest query type is an exact search, whereby users search by a specific product name or model number. Yet 16% of the top benchmarked e-commerce websites do not support searches for product names or model numbers that appear on the respective product pages. The reason is probably that the search logic of these websites is based entirely on matching the user’s keywords against the product title or main product description, instead of the full data set. Whatever the reason, it makes for a poor experience, with grave consequences.
During testing, users would (rightfully) conclude that a website that displays no results for a query so specific means that the company doesn’t carry the product. And if you’re wondering how many users actually searched by product name or model number, they frequently did during our testing. Multiple test subjects began their initial product research on an external website, starting with a Google search, or on a manufacturer’s website, a review website, etc. Only when they had decided on one or more products did they copy and paste the product’s name or model number directly from the external website into the search field on one or more e-commerce websites.
nother search pattern for exact searches that is ill-supported by the top e-commerce websites is phonetic misspellings. 18% of websites handle phonetic misspellings so poorly that users would have to be able to pass a spelling test in order to get relevant results. For example, the query “Kitchen Aid Artysan,” rather than “KitchenAid Artisan,” yields no results. While misspellings can occur in any scenario, phonetic misspellings are particularly common when users have only verbally heard a product’s name and later try searching for it. This isn’t unusual in the discovery process, if we consider how often products are recommended by friends and colleagues. Suggesting the correct spelling on the results pages is recommended, then. And if the search engine automatically processes the query when it finds no matches or a few poor matches for the user’s spelling, even better.

Implementation Tip

Assuming that users will spell perfectly is unreasonable. And it’s important that the search logic broadens the query’s scope and looks for closely related spellings, especially if only a few results of low relevance would be returned. Furthermore, the logic should search the entire data set of products to include matches for product names and model numbers.

2. 70% Require Searches In The Website’s Jargon

Another common search query type in e-commerce is the product type query, whereby a user knows the type of product they want but doesn’t know of or hasn’t decided on a particular product. So, they simply search for, say, “blow dryer” or “multifunction printer,” two queries that often lead to no results because the “correct” name for that product type is “hair dryer” or “all-in-one printer.”
To fully support product type queries, the search engine’s logic must go beyond the exact titles and descriptions of products, and look to the categories that products are placed in, as well as take product synonyms into account.
However, only 30% of e-commerce search engines include keywords from each product’s parent category or map a set of synonyms to product titles, product types and category names. As a result, users have to use the website’s exact jargon for their product type queries on 70% of websites, as seen in the two examples above.
Product type synonyms were observed to have a particularly large impact on the user’s search experience during testing, because it can be very difficult for users to tell whether they are using a wrong term, and even more so to guess what the “correct” term is. Therefore, a lack of synonym support was observed to be a direct cause of website abandonment, because users assumed that the website doesn’t carry the products that they searched for.

Implementation Tip

At the very least, manually map common product type synonyms to the actual product types and category names. A better long-term solution would be to build keyword synonym logic, because this can more easily be updated, tweaked and even personalized on a regular basis.

3. 60% Don’t Support Searches With Symbols And Abbreviations

Some products have specifications that are vital to the user’s purchasing decision. When searching for such products, our test subjects frequently included those specifications directly in their search queries (for example, “13″ laptop sleeve”), making them feature queries.
But do users usually search for “13 inch laptop sleeve” or “13″ laptop sleeve”? Of course, both queries should present exactly the same results, because users have no way of knowing how each website denotes such units of measurement, and all ways are equally “correct” and used interchangeably across the Internet. In case you think we’re stating the obvious here, 60% of the top e-commerce websites do not support searches with symbols and abbreviations. So, users will miss out on perfectly relevant products if they search for “inch” and the website uses the double prime symbol (″) or the abbreviation “in,” or vice versa.
Breaking down such technical hindrances and mapping common symbols and abbreviations is important, so that users find the products they are looking for and get the same results regardless of what a website or its suppliers have decided to use. Most websites are small enough that synonyms, abbreviations and full spellings could be manually mapped for the most common units.

Implementation Tip

Map all common symbols, abbreviations and full spellings to each other, so that all results are shown regardless of how a query is written. A quick way to identify candidates for mapping is to look for units of measurement in all product titles. A more thorough way is to compile a list of units of measurement by going over all product specifications.

4. Auto-Suggestions Found On 82% Of Websites

Auto-suggestion is a convention of e-commerce search, with 82% of large websites offering it.
The value of autocomplete suggestions isn’t that they speed up the typing process, but that they guide users to better queries. When auto-suggestions are done well, they teach users the types of queries to make, show them correct domain terminology, help them avoid typos and assist them to select the right scope in which to search.
During usability testing, autocomplete suggestions directly influenced and altered what the test subjects decided to search for. While this is their purpose, it also means that autocompletion can do more harm than good if not implemented carefully.
Among the websites that do have autosuggest, 36% of them have implementations with severe usability problems. Two problems frequently observed in testing are query suggestions that either are repetitive or lead to a dead end.
While avoiding dead ends might seem obvious, such suggestions were observed multiple times during benchmarking. They were often the result of auto-suggestions being based on the prior searches of other users or old catalog contents, regardless of whether they proved to be useful. Developers should at least internally query all suggestions on a regular basis and weed out those without any results.
To provide high-quality search suggestions, look at how suggestions are generated. Many suggestions that are redundant, of low quality or typos are likely the result of developers sourcing suggestions from the website’s search logs. If this strategy doesn’t take into account the success of those queries (that is, whether a decent percentage of users found and purchased products after performing those searches), then it is flawed.
Unless you track the success of search queries, don’t use search logs to generate auto-suggestions because that would result in redundant and low-quality suggestions. Aside from outright duplicate suggestions (as seen in the Overstock.com example above, which could easily have been filtered out), redundant suggestions are ones that overlap and make it difficult for the user to select one over the other. Notice in the Overstock.com example how five variations of “coffee table” are suggested, despite the user having only typed “coffee” at this stage. These nuances might have made sense if the user had typed “coffee ta–.”
We also found that copying a suggestion to the search field when the user focuses on it with their keyboard (as illustrated above) is an important detail in autocompletion design because it enables users to iterate on a suggestion.
(We identified eight autocomplete design patterns during testing.)

Implementation Tip

Given that autocompletion design and logic will directly alter what most users search for, ensuring the high quality of suggestions by weeding out dead ends and being selective in the inclusion of suggestions is vital. Suggestions based on other users’ past queries should be carried out with special care or avoided entirely; ideally, any machine learning should be based on the success rate (or conversion rate) of each query.

5. Only 34% Prefill The User’s Query On The Results Page

During testing, 65% of all test subjects’ attempts at searching consisted of two or more queries in the same search. However, only 34% of e-commerce websites allow users to easily iterate on their query by prefilling the query in the search field on the results page.
On websites that do not persist the user’s query in the search field, the iteration process became needlessly cumbersome and easily frustrated subjects. Not persisting a query introduces friction at the worst possible time because redundant typing is added to the already disappointing experience of not receiving relevant results.
The amount of time that test subjects spent retyping their query is insignificant, but as observed in all of our prior usability studies that involve filling out forms , the user has a negative perception of a website that forces them to retype the same data within a short timeframe, which often sparks remarks such as “Tedious,” “Idiotic” and “Do you think they’ve tried using their own website?” This is especially true on touch devices, where typing is particularly taxing.

The picture was completely different on those websites that persist queries on the search results page. Here, test subjects weren’t forced through a needless halt-and-retype process each time they wanted to iterate on their query, but instead made swift changes by adding or removing a word or two from their original query, as seen in the Zappos example above, where the user simply added “11″” to his prior query.

Implementation Tip

Given how relatively simple this is to implement, persisting the user’s query in the search field on the results page can be considered low-hanging fruit in search optimization.

6. Only 40% Have Faceted Search

In a perfect world, we would have little need to filter and sort search results because users would make precise queries, knowing exactly what they want, and the website’s search logic would return just the right results.
This is far from reality, however; filtering and sorting are vital ways that users find the right product among the results. This is partly due to the challenge of getting search logic and design just right (as we’ve hinted at in the preceding five points), but also partly due to how and when users search. Users will not always be able to perfectly specify their queries, simply because many still haven’t fully decided or realized what they are looking for.
In both cases, being able to modify search results by filtering and sorting is a powerful and important tool. During testing, the quality of the filtering and sorting features and their design often meant the difference between success and failure in the subjects’ search experience.
Our testing confirmed that the foundation of a contextual filtering experience in e-commerce search is faceted search. With faceted search, the user is presented with a list of filters for product attributes, filters that apply only to a part of the search results. For example, the search results for “Tom Hanks” could have a “movie duration” filter even though the results include books, and the search results for “down filling” could have a filter for “sleeping bag temperature rating” even though the results include other product types.
The traditional way of suggesting only generic scope filters (categories) and site-wide filters (price, brand, availability, etc.) for site-wide search results is insufficient for a good experience. Product-specific filters based on the user’s query must be suggested, too. However, only 40% of e-commerce websites currently do this via faceted search filter suggestions.
While faceted search is a crucial component of search filtering, it doesn’t make for a good filtering experience on its own. Also crucial are the filtering types (such as thematic filters), the filters’ design details and the filtering logic (for example, avoiding mutually exclusive filters, as explained in the third point of “Best Practices for Designing Faceted Search Filters”).
Furthermore, faceted search filters were observed to have usability issues of their own. One challenge is that when the filters also invoke a higher-level scope, they need to clearly indicate this in their label. Otherwise, users will likely be misled because they have no way to accurately predict the implications of applying the filter, as illustrated in the REI example above.
Faceted search’s labelling issues aren’t solved simply by including the filter’s context in the filter label (for example, permanently having the filter read “Sleeping Bag Temperature Rating”). That would hinder users who have already applied a search scope (and users who are using category navigation) because it would make the labels needlessly difficult to scan due to a lack of front-loaded information and a poor signal-to-noise ratio. Therefore, if faceted search filters invoke a scope, then a dynamic labeling system is needed to keep the filter labels concise and scannable when the user has already selected a context (for example, navigated to a category or applied a search scope) and then dynamically rename the filter labels to indicate the scope-related implications of applying that filter.

Implementation Tip

Don’t simply rely on generic site-wide filters, such as category, price and brand. Rather, provide product-specific filters that relate directly to the user’s query (through faceted search). If the faceted search filters invoke a scope, then the filter labels need to be dynamically renamed to indicate this. Also, consider whether sufficient filtering types are available. For example, thematic filters such as style, season and usage context often map closely to users’ purchasing parameters.

7. 92% Have Only One Breadcrumb Type Or No Breadcrumbs At All

During testing, breadcrumbs proved to be helpful for test subjects when navigating both search results and when looking through categories to find just the right product. Interestingly, testing also revealed that e-commerce websites need two different types of breadcrumb links — namely, hierarchical and history-based breadcrumbs. Yet, 92% of the 50 top-grossing e-commerce websites display only one breadcrumb type (72%) or no breadcrumbs at all (20%).

Without breadcrumbs on the product page, users will find it difficult to efficiently browse a collection of products, because they have no way to go one level up in the hierarchy to the product category or to return to the search results page. In practice, this often forces users to make a drastic jump in scope, such as selecting a generic top-level category, or else perform a new search or remain stuck on the product page.
With traditional hierarchical breadcrumbs, any user who doesn’t find a particular product to be a good match can use the breadcrumbs to traverse up the website’s hierarchy and navigate to a related category. This is paramount for non-linear navigation such as search, because it enable users to see other products in the same category as an item in a search result. The hierarchy essentially acts as a cross-navigation link for finding related products, regardless of whether the user has accessed the category from a completely different part of the website. (The same non-linear behavior was observed to hold true for all external traffic landing directly on product pages.)
During testing, it quickly became evident that most subjects had a strong desire to go “one step back” after exploring a product page. This typically meant going back to the search results list, which history-based breadcrumbs are well suited to. History-based breadcrumbs are, as the name implies, based on the user’s history, giving the user a way back to previously visited pages.
While this functionality is also available in the browser’s interface via the “Back” button, test subjects repeatedly got stuck or were misguided on websites that offer only one type of breadcrumb. For example, when only hierarchical breadcrumbs were available, many subjects confused them as a way back to their search results. As a consequence, they unwittingly switched their product-finding strategy and lost any filter or sorting settings they had applied, thinking the last hierarchical breadcrumb link would take them back to the search results page.
A simple “Back to results” link alongside the standard hierarchical breadcrumbs enables users to seamlessly go back to their search results, with filters and sorting choices intact. History-based and hierarchical breadcrumb links are an ideal combination, allowing users to efficiently continue their current search session or switch to a new navigational mode.

Implementation Tip

Implement two types of breadcrumbs on product pages: hierarchical breadcrumbs, which allow users to infer and jump to categories that contain the current product, and history-based breadcrumbs (such as “Back to Results”), which minimize misinterpretation of hierarchical breadcrumbs as a way back to the search results. Testing confirms that history-based breadcrumbs can be both appended (as on Macy’s) and prepended to hierarchical breadcrumbs.

The State of E-Commerce Search

To give you a more general analysis of search performance in the e-commerce industry as a whole, we’ve summarized the entire benchmark data set in the scatter plot below.
Each of the 3,000 benchmark scores is divided into the six major areas of e-commerce search usability: query types, search form and logic, autocompletion, results logic, results layout, and results filtering and sorting. Thus, each gray dot represents the summarized score of one website’s score across the 6 to 15 guidelines within that area.
The blue circles represent the actual benchmark average for each column (an average of the gray dots). The red triangle and green circle are reference scores that we’ve created for comparison:
  • The green circle represents the score for what is to be considered a “good” search experience — here defined as a website that partly adheres to all 60 of the search guidelines. That is, the green circle represents the standard that an e-commerce website should reach (or, better yet, surpass) in its search experience.
  • The red triangle represents the score for a “mediocre” search experience — here defined as a website that partly adheres to 48 of the 60 guidelines. That is, search engines and designs that reach this standard can be assumed to directly hinder (or even obstruct) users as they search.
Besides noting the very scattered score distribution in each column, the columns to pay attention to are those that show the industry average (blue circle) significantly below a “mediocre” search experience (red triangle). This is the case for query types, results layout, and filtering and sorting — all areas of the search experience where the vast majority of e-commerce websites have significant room for improvement.
Query are the very core of e-commerce searchtypes, yet support for the 12 essential query types is lackluster at best. Points 1, 2 and 3 of this article are just the tip of the iceberg (you can find all 12 query types in a white paper that we recently published), but they clearly demonstrate poor support:
  • 16% of e-commerce websites do not support searches by product name or model number.
  • 18% handle misspellings so poorly that users would have to pass a spelling test in order to get relevant results.
  • 70% require users to use the jargon of the website, failing to return relevant results when users search with common synonyms.
  • 60% do not support searches with symbols or abbreviations of units of measurements (or vice versa).
Given its key role in the search experience, query types are an area that sorely needs to be prioritized on the vast majority of e-commerce websites, and they should be seriously considered and evaluated in any optimization project. When evaluating the resources required, remember that improvements to search engine logic would benefit all platforms (desktop, mobile, tablet, etc.), whereas layout changes are typically platform-specific.
Testing revealed that the results layout is a balancing act of designing a clean overview of search results and providing sufficient information for users to accurately evaluate and compare results. However, the benchmark of this metric tells a grim story, with the best websites doing merely OK, and the other half of websites performing poorly.
A common cause of poor results layout is that the website relies on the same (static) layout for both search results and category product lists. From our testing, search results clearly need a more dynamic layout that adapts to the user’s query and context. This could include altering how much and which information is displayed for each result, which product thumbnail is displayed, how large the thumbnail is and so on. All of these elements should dynamically adapt to more closely match the user’s query and expectations. To some extent, this also includes the product page’s layout, which could have dynamic links, such as history-based breadcrumbs, along with the traditional hierarchical breadcrumbs (see point 7 in this article).
Optimizing the results layout is a relatively manageable project, which mainly entails switching from reusing the static (category) results layout to a dedicated and slightly more dynamic search results layout. It should, therefore, be considered low-hanging fruit, given the large impact it can have on the overall search experience, especially during the product-selection process.
Filtering and sorting search results is a somewhat overlooked area. Notice the highly scattered plot in its column and the fact that nearly all websites miss out on important aspects of it, as indicated by the threshold for a “decent” search experience (red triangle). Just like the results layout, filtering and sorting features should adapt to the user’s query and context.
For example, while faceted search (see point 6 in this article) is the foundation of a contextual filtering experience, only 40% of websites have it. Worse, the multiple elements of sorting site-wide search results that we identified during testing are overlooked entirely, with more than 70% of websites lacking key sorting types, and 90% having no scope options or suggestions when users try to sort site-wide results.
Given that filtering and sorting are much less resource-intensive to get right than query support, they should be a part of almost every optimization project for e-commerce search. Moreover, many of the improvements are manageable enough to be implemented and optimized on an ongoing basis, and much of it can be reused to improve the sorting and filtering experience in category navigation.

Search: A Competitive Advantage

The gloomy state of e-commerce search doesn’t mean that users cannot perform and benefit from search on the benchmarked websites. However, it does clearly indicate that e-commerce search isn’t as user-friendly as it should be and that users’ success rate could be improved dramatically on most websites — even those of these 50 e-commerce giants.
While catching up with the few websites that have done really well from years of focused investment would require a serious prioritization of the search experience, it is achievable. Furthermore, because the poor state of search is industry-wide, most websites have an opportunity to gain a truly competitive advantage by offering a vastly superior search experience to their competitors’.
A good start would be to look into the seven points we’ve presented in this article:
  1. If few results of low relevance are returned, the search logic should broaden the scope and look for closely related spellings (18% of websites don’t). Furthermore, the logic needs to search through the entire product data set, to include matches for product names and copied-and-pasted model numbers (16% of websites don’t).
  2. Map common product-type synonyms to the spellings used on your website to ensure relevant results for a query such as “blow dryer” if you refer to it as a “hair dryer,” or a query such as “multifunction printer” if “all-in-one printer” is used (70% of websites don’t).
  3. Map all commonly used symbols, abbreviations and full spellings to each other, so that all results are shown regardless of how something is written in the product data. For example, map “inch” to the double quotation and double prime symbols and to the abbreviation “in” (60% of websites don’t).
  4. Be cautious about auto-suggesting based on other users’ past queries because that often leads to low-quality and redundant suggestions. Furthermore, regularly check that auto-suggestions don’t lead to a dead end (36% of the websites with autocompletion don’t do this).
  5. Allow users to easily iterate on their query by prefilling it in the search field on the results page (66% of websites don’t).
  6. Implement faceted search to suggest filters that match the user’s query more closely. For example, suggest product attribute filters that apply to a subset of the search results (60% of websites don’t do this).
  7. On product pages, provide both traditional hierarchical breadcrumbs (to support non-linear patterns of search) and history-based breadcrumbs, such as “Back to results” (72% of websites offer only one type).
Because a poorly performing search experience can look as good aesthetically as a high-performing search experience, gauging one’s own or a competitor’s search experience requires extensive testing and evaluation. The fact that search experience and performance are heavily influenced by non-visible factors, such as search logic and product data integration, is actually good because the competitive advantage you would gain from investing in them cannot be easily copied by competitors (unlike, say, a home page redesign). So, while creating a truly great search experience will probably require substantial resources, it’s also an opportunity to create an equally substantial and lasting competitive advantage, one that competitors cannot easily piggyback on.
As a final note, the findings from our usability study give owners of small e-commerce websites a fair shot at improving their search experience, because roughly half of the 60 guidelines relate to user interface. This is especially true of the results layout and the filtering and sorting experience, which are areas that are usually easy to change but whose performance on most websites is currently below expectations.

Wednesday, September 3, 2014

Responsive Design: The misunderstood genius

"You know my website supports any platform or screen size. My web designs are completely responsive and we care about our customers".
You might have seen a lot of web development companies flashing similar messages across the world wide web. Claims of responsive web designs and customer satisfaction are neither faulty nor malign, they are simply naive. The responsiveness of a website is so much more than adjusting to a smartphone or a tablet screen. Don't get me wrong, even I harbored a similar notion about responsive web designs for a very long time until recently I was enlightened which now I wish to share with you.
Definitely, the basics are still the same, about a design which is platform independent but when we claim to "understand and care" for our customers I suggest you, pause and introspect whether or not you have understood what makes the crowd tick.
Responsive design takes responsible designing and a knowledge - performance often trumps aesthetics, as seen in case of a particular Finnish mobile company (if you know what I mean). This harsh but true fact should be the lead driving force behind any idea, code or design. Every user craves an optimum performance, a webpage loading on a device within 1second is considered to be the best, good looks would definitely not hurt. The perfect amalgam of beauty and performance can drive your sales beyond imagination.
It is never too late if you wish to tweak the design or code a little bit. Although there is no universal solution to improve the code, some healthy changes can definitely be done -
  • Oh, so haven't started with the design yet? Good, now remember to use mobile first approach, period.
  • In a responsive layout change the structure of the document but never change the content or URL while delivering it to other devices.
  • Performance should be regularly measured and improved upon using optimization tools.
  • Browser resizing is not a legit test. After the resources have been loaded and display:none is applied check it on different devices.
  • Only load the JS (JavaScript) with conditional loading required for the current device or subsequent to onload event.
  • Using srcset attribute to deliver images by JavaScript.
  • Forefront should showcase above-the-fold content in a mobile device while the initial viewing should be inline.
  • Implement smart methods to responsive web design solution like group based responsiveness, adaptive approach (server side layer) and conditional loading.
Once you familiarize the real deal about responsiveness it will seem so much more than what it appeared from its name. It had been there all along we simply failed to recognize it. Now, you may agree or disagree with me but at least we should be in consensus regarding what our end game is. It is not a groundbreaking technology, code or a design. It is simply is user's happiness.