Responsive Web Design for Advanced Users – Rediscovering Ignored Aspects

Categories Articles

Responsive web design took off in a big way before anybody realized what had happened. Suddenly, there were articles written and discussions happening about how to begin designing responsive websites, why such designs were important etc. There was also a deluge of responsive web design frameworks on the market and this deluge continues to this day. Responsive web design created a storm of epic proportions and some will say that the storm is still unleashing its fury. There are designers that are still learning the ropes and there are others that have actually become masters at injecting the website with the much needed responsiveness. But, this mastery has led to a situation wherein some important aspects are being ignored.

Let’s take a look at some of the aspects that are important but often ignored by advanced users:

Honesty, do you know the Difference between Responsive, Adaptive?

Oops! Can we really ask an advanced user this question? But seriously, even I was completely done in by the words responsive and adaptive when I first came across them in the context of website design. Was there a difference? Did they both mean the same? Were they related?

I see that even those people who have been working with responsive CSS frameworks and have very good knowledge of HTML5 are sometimes apt to confuse these terms. So here’s my short but innately simple explanation of these words. Responsive means something that responds quickly, adaptive means something that can be modified as per the given context or situation and responsive website design is a coming together of both these terms.

Responsive websites fluidly change their size and scope dependent on the size of the screen etc. but when you build adaptive websites (either from scratch or using a diy website builder), you are actually identifying a set of factors and ensuring that the website will adapt to them.

Think Beyond the Code

I bet you have started thinking about programming and frameworks when you read the words ‘advanced users’. Yes, that’s important, but what experienced users need to do first up is focus on strategizing and developing a code base that improves the site’s performance.

The foundation of a responsive website rests on powerful directory architecture and the developer’s ability to reuse the common code. You will need to organize the styles based on various parameters; these parameters for style organization will be a product of your own preferences.  A practice that is commonly utilized is to categorize the various styles by creating separate directories for UI components, business logic modules and common base styles.

Stop Wasting Time – Choose the Right CSS Frameworks

Right at the beginning, I have talked about the market being flooded with scores of CSS frameworks for responsive web design. Well, what are you waiting for? Go ahead and use them. You aren’t a beginner anymore and know exactly what you want so go for it. The aspect often ignored is the choice of the right framework.

So, go for those that can be setup quickly, offer the maximum number of options, allow faster integration, and offer long terms support.  But, above everything else make sure that they help you create an advanced responsive website in quick time.

The available frameworks for advanced responsive designs include Foundation 3 a SaaS based CSS preprocessor; Skeleton a collection of CSS files that makes rapid website development a breeze; The Grid System, a framework that beginners need to avoid as it helps design responsive websites but doesn’t guarantee it (your knowledge determines how well you use it);   Mueller Grid System as the name suggests is a modular grid system that helps design both responsive and non-responsive websites; there are many others and as somebody who has fundamental clarity of all aspects of responsive web design, you need to be able to pick the right framework for your needs.

It’s good for SEO

Everything these days needs to be good for SEO and there is absolutely no doubt that the responsiveness of your website has a role to play on its rankings on SERPs. Why have I brought up this point when I am talking about advanced users and their use of responsive web design? The simple reason is that it’s an important point, oft forgotten.

Responsive websites ensure that your mobile websites look very similar to your regular site; it’s just that there is a difference in the amount of information available and hence its navigation is also different. As advanced users, it’s not just about using the juiciest programming bits; it’s also about knowing the ancillary benefits of responsive web design and making sure that your design is able to achieve those benefits.

After all, the reason why responsive websites are becoming the norm these days is not because it gives designers and developers a few brownie points, but because it makes websites more accessible and they are able to reach a wider audience. That is why designing responsive websites with an eye on SEO is so important.

Use only Recognized Media Queries

But of course, I will use media queries that will be recognized by the current crop of browsers. Is that what you are saying? Well I understand that it’s logical to assume that you won’t use media queries that won’t be recognized by browsers; but it’s also safe to assume that you will be excited by some media queries that are best left avoided for now.

For more information on how to go about crafting context sensitive interactions vis-à-vis your responsive websites with the newest media queries , reading up on them will help.

Play it Safe – Always

What? I know you are shocked. Web designs are all about creativity, innovation and user interaction now, so why play it safe? Firstly, by playing it safe doesn’t mean creating boring websites. After all, if your animations, images and layouts are responsive, it means that your website will be engaging, but this doesn’t mean going overboard with it. You will do well to remember that in all the excitement about responsiveness, you mustn’t forget that the website’s message is supreme.

Responsive web design for advanced users is all about not losing the plot and knowing what is important.  As an experienced campaigner in creating responsive websites, you must also have responsive considerations. Keep learning about the responsive website design ecosystem and keep track of the newer entrants. Use techniques that are considered as a best practice for creating effective and successful websites.

Author info: This post was written for Inspired Mag by John Siebert. John Siebert is a Marketing Guru and Web Professional as well as owner of Tranquil Blue, a NYC Web Design business.

image credit: mpfphotography / 123RF Stock Photo

Catalin is the founder of Mostash - a social marketing boutique - and he's always happy to share his passion for graphic design & social media.