Blog

Owing to easy availability and extensive use of mobile phones, the term ‘mobile first’ has attained an all new significance for web developers and UI/UX designers lately.

It has moved from an additional quirk to essential because internet usage has majorly switched to mobiles, which only makes sense if you come to think of it. Why would someone choose to bear the weight of a laptop or backaches from sitting in front of a desktop computer when the same task can be done scrolling through the portable screens of mobile devices?

Companies and websites which fail to acknowledge this lack behind eons in terms of audience, reachability, and performance.

If you haven’t jumped on the responsive web design bandwagon yet, it’s about time. And if you’re inhibited by the thought that it could be expensive in terms of time and resources, here are 7 shortcuts for quick and relatively cheap development of a responsive website.

1. Structure Content First

The stuff that takes the place of lorem ipsum text and placeholder images turns out to be the most important aspect of your responsive website (or any website for that matter).

This is the stage when you’re imaging your website devoid of an interface design. Why would anyone be interested in reading you content? A befuddled answer to this question cannot be adorned with even the most aesthetic, adaptive websites.

Structuring content first directs your focus on the gist of your message, your story. If you can create content that cohesive, strong, versatile, and purposeful, you can make your website responsive for any given context.

As Brad Frost puts it, “… devices will come and go and technological trends will wax and wane, but content, business goals, and user goals remain.” Half the job is done if your content is well-structured and delivering value to the users.

2. Mobile-First

The whole concept essentially implies prioritizing the mobile context of the website when creating user experiences. Developing a responsive website with the mobile-first approach covers almost all mobile devices and bases, at least on a rudimentary level. Therefore, when constructing a website, always start with the mobile web.

Pipe your website content through the more restrictive, eclectic, and unstable context of mobile web before you start designing it for the larger screen real estate of desktops.

By designing for mobile first, you anticipate and tackle all the obstacles and worst-case scenarios your audience might go through (smaller screen, slower scrolling, poor internet connection, etc.) Scaling up will render no harm to your website functionality.

In a nutshell, starting with mobile-first:

• Allows website to approach a larger audience
• Focuses the designer on core content and functionality, cutting to the chase of things
• Gives the designer the space to try new tech, innovate, and be more resourceful

Once a fully functional mobile web and a strong foundation has been created, you can move on to Progressive Enhancement

3. Get Off the Computer

Designers tend to take this jokingly, but world-renowned web design companies treasure the old fashion designer tools, pens and papers just as much as the modern, expensive designer toys.

Shutting down Photoshop and getting off the computer to sketch wireframes on a piece of paper can help you in ways unimaginable.

Grab a pen and some plain printer paper and sketch your wireframes freely without the apprehension of getting everything pixel-perfect or wasting the pages of a precious moleskin.

Here’s why wire-framing on scratch paper will save your time:

• You don’t think twice before crumbling the paper and tossing it into a waste basket. It’s easily disposable.
• You can sketch ideas as they come, leading to more developed initial sketches.
• You burn through ideas faster without the worry stretching through pixels.
• You can emphasize fully on the foundation architecture before getting to detailing (fonts, borders, color schemes, etc.)

You may have to loosen up before you’re ready to sketch your wireframe ideas freely. That’s alright. Take a scrap of paper and doodle on it freely until you lose the habit of questioning your ideas before penning them down.

Once there, iterate as the ideas happen. No matter how silly or unworthy an idea may seem, sketch it. Question and reconsider them later.

Don’t start gathering feedback just yet. You’re sketching wireframes in their most raw form, not fully comprehendible to another. Save feedback for the later.

4. Don’t Create Mockups For Every Single Page

Highly detailed and developed mock-ups are a good thing but not so early in the process, when you’re trying to figure out what works and what doesn’t and iterate the foundations. The quicker you can work out the functionality of your responsive design in a minimal amount of page mock-ups, the better.

Other than being a hindrance for rapid changes in the basic design, hi-fi mock-ups are discouraged in the initial sketches for the following reasons as well:

• Designing hi-fi mock-ups in Photoshop restricts your focus on only a couple of select screen sizes. The page mock-up for a Samsung Galaxy S is equally as important as that for iPhone 5.
• High-fidelity mock-ups are always made twice; once in Photoshop, once in code. Waiting to change the design in code, based on user feedback sounds like a more time efficient way because it will need changing either way.
• Patterns and the web experience exist all over the site. Designing the aforementioned two in mock-ups rather than single pages will save you loads of time and effort and make the learning curve for users less steep as they will be browsing through recognizable patterns.

Once the base design has been established, the time spent applying it to each page’s content can be better spent working on the unique aspects of each page rather than those identical to each page.

The reason we’re focusing on low-fidelity work in the initial stages of development of responsive website is that once the design goes high-fidelity, everyone’s focus is going to shift to the micro details, line height, borders, colors, fonts etc. There wouldn’t be any time left for the broader user experiences troubleshooting anymore.

5. Speed Up Work With the Help of Tools

You’re certainly going to be needing help from tools if you wish to defeat deadlines. There is a throng of tools and software offering a multitude of shortcuts in the creation of responsive websites.

Let’s take a quick look at some of them.

Responsive Typography

• js – empowers the designer with precise controls over many typography aspects.
• Fit Text – another jQuery plugin which helps make your headlines responsive and the text fluid for numerous devices.

Responsive Page Layouts

• Fluid 960 Grid System – this is a fluid version of the 960 Grid System which all of us have used for responsive web design experimentation at one point or another.
• Gridless – a time-tested HTML5 and CSS3 framework for creating responsive, cross-browser websites. It is an ideal fit for those who find the grid system too restrictive.

Responsive Prototyping

• UXPin – a prototyping and wire-framing tool which helps designers put together pages of content and have an uninterrupted sense of user flow.

Testing and Cross-Browser Support

• Adobe Device Central – Device Central has a wide range of mobile devices you can choose to view your responsive design in. Although it’s preferred to test the fluidity and responsiveness of the website by viewing it within different mobile devices, Adobe Device Central is the closest it gets for those who can’t afford to buy new gadgets just for this purpose.
• Web Developer – this is an even cheaper version of Adobe Device Central. This is a browser extension available for Firefox and Chrome and comes with several additional tools that may come in handy when developing responsive websites.

These tools are going to be a great help in developing the patterns and user experience described above. Don’t hesitate to get the latest version and invest plentifully in the tools you like using. It’s only for the long-term good.

6. Keep Your Finger on the Pulse of Modern Development

With so many tools at your disposal and the liberty to create and innovate to your heart’s content, you may feel that responsive website development is a realm of perpetual possibilities. Also, you might be of the opinion that developing websites for a platform with unknown limits allows you to stretch the limits. However, that’s not entirely true.

The best type of responsive user interface – user experience design is one that provides user empowerment and creative distinction is equal quantities across a plethora of mobile devices. This responsive design does not materialize out of thin air or is made easy.

If you wish to accomplish such a level of acclaimed designing, you will have to stay abreast of latest design trends and developments even before you set out brainstorming for ideas.

Keeping in view user experience as the central focus of responsive website designing, the following are the design trends which streamlined best with the UX aim:

• Hero Images – the most trusted way of capturing user attention is with a highly relevant, emotionally appealing HD image.
• Material Design – Google’s Material Design is a step ahead of the flat design frenzy. By making use of appropriate light and shadow, grid-based layouts, and responsive animations, the flat design is given an all new depth with material design.
• Typography – minimalism in animation and imagery has made room for typefaces to be dramatic. This has given rise to artistic and calligraphic fonts which add a more human, more personal touch to the web experience.

• Background Videos and Animations – these can make or break the user attention just as well. If executed with skill and incorporated with the right frame rate, these can be captivating and emboss the page content upon them.
• Hover Animations – Hover animations work of the basics of human curiosity. And because they are made to hover over the page content to get the required information, they tend to stay on the page longer and remember the experience better.

Development and trends in responsive website designing are changing very rapidly. Keeping track can be hard but equally fun!

7. Bring In Vectors Where Appropriate

As much as we have emphasized on keeping responsive design non-digitized until the high fidelity mock-ups, we believe that design assets can be created better, rather benefit from, Scalable Vector Graphics (SVG). For instance, logos, light animations, icons, background images are all designed better as SVGs than raster alternatives.

When presented with inline, vector image have the following benefits:

• Easily animated and manipulated using CSS.
• Reduce load time by a good notch. SVGO-compressed SVGs take up 60%-80% less space as compared to their raster counterparts.
• SVG are certainly easier and faster to prepare than raster graphics.
• Adding animations and changing colors will bring your visuals to life.

Vector images are a clear winner over raster graphics. Just be sure to load them inline and provide raster fallbacks if your designer requires inline placement.

Takeaway

The trouble with responsive web design that most designers mutually face is that they try to shrink existing websites and call them ‘mobile optimized’. Responsive designing tackles the most restrictive, the most difficult context first and aims to provide a clutter-free user experience at the very least. Web designers need to understand there are no shortcuts to user experience.

The sooner we comply with the mobile-first responsive website mentality and scale websites up for desktops rather than the other way around, the better. Also, it will help diffuse down the hype and apprehensions surrounding responsive web design. It’s difficult to get a hang of, but it’s the future.

Author bio: Junaid Ali Qureshi is a digital marketing specialist who has helped several businesses gain traffic, outperform competition and generate profitable leads. His current ventures include Elephantation, eLabelz, Smart Leads.ae, Progos Tech and eCig.