Category Archives: Responsive website

How to Design your Responsive Website

Responsive Web Development

With mobile devices becoming the primary way people experience the web, responsive design is more important than ever. But responsive design doesn’t just create a consistent mobile experience. It’s also changed the way we design for all screens, encouraging simpler layouts and more streamlined experiences. Whether you’re doing a responsive redesign or starting from scratch, these tips and tricks will help you along the way.

  • Find out the best navigation

            Your design needs to work within the limitations of smaller screens.  Simplify your navigational choices as much as you can and use icons paired with text, in-page links, collapsible menus, and dropdowns to get people where they need to go. Remember that hidden navigational choices are roughly half as discoverable as apparent ones, and lengthen time to complete tasks, so do your best to make access to core pages visually obvious.

  • Visualize content organization before you design

            Content and design flourish when developed in tandem. Content organization is more than just copying and pasting blocks of text to see where they’ll fit on a page. Your content is the story you’re trying to tell your audience.

  • Use only the words you need

      With mobile devices, you must work within the confines of smaller screens. That means writing more economically, ensuring that every word helps move your story forward. Don’t take content direct from desktop. Consolidate copy, use bullet points and other structural styles, and trim the fat wherever you can.

  • Typography is very much important on smaller screens

      Make sure you scale font size, line-height, and width to best fit differing screen sizes. When you’re designing for mobile device, remember that a huge font may push the important content you want someone to read further down on a page. So consider all the other design methods in your toolkit to add drama: vary font weights, use all caps or all lowercase, or use color to differentiate content sections from other elements on the page.

  • Embrace negative space

You need to take a minimalistic approach to content and navigation when creating a responsive design — but you also don’t want to leave anything vital out. Make use of negative space (aka, whitespace) to create breaks in your design and highlight those areas of content that you don’t want anyone to miss.

  • Make your page fast by using responsive images

      One of the problems people run into with responsive design is that while images visually scale on smaller devices, they’re still 3MB in size and slow load times to a crawl. Responsive images offer a powerful and effective workaround, but are laborious and painful to hand code.

  • Recognise the power of Flexbox  within your layouts

      Flexbox is a CSS3 layout module that makes sure your layout is fluidly responsive to different devices. Fairly simple in principle, but it allows a powerful level of flexibility.

Checkout some of the best responsive websites here.

3 Responsive Design Mistakes that are Needed to be Avoided Immediately

With the release of the Mobile-friendly Update just a couple of weeks back, Google has made its intentions pretty clear! The Search Engine Giant is not going to tolerate an unsatisfactory mobile surfing experience anymore. And this is reason enough for web designers to buckle up, review the responsive design rule-book, and get everything done the right way!

In the last couple of months, I’ve come across numerous desktop websites and have reopened them in mobile devices to check their responsiveness. While most of the elements were working fine, I did notice three common blunders that will not evade Google’s eyes for long.

So what are these common responsive design blunders that are needed to be stopped right now?

No.1: Distortion of Elements

Responsive element distortion

Apart from quality, the one other factor that makes a content readable is its hierarchy. When I was viewing desktop websites on devices with smaller screen sizes, column layouts were behaving like rows in most cases… and as a result, the hierarchy was getting distorted.

The solution is pretty simple: web designers need to explicitly set the padding, height and width of every element to keep it in position. As an added precaution, designers can also set margins to keep them in place.

No.2: Images with Fixed Width

Fixed width images

An image with fixed width is great to view in desktop websites. When the website is viewed on smaller screens, however, the image is pushed off the screen and the user has to scroll ‘right to left’ in order to see the whole image.

Living at a time when something as convenient as Bootstrap is available, there is absolutely no need to keep an image width fixed. The Bootstrap framework allows designers to use a responsive image class. Or else, you can simply use relative units to set the width.

No.3: Wrapping the Navigation bar

Wrapping menus

This is perhaps the most common responsive design mistake in recent times. As a ideal scenario, the navigation bar of a responsive website becomes more compact when viewed on a smaller screen. And I’ve been seeing innumerable cases where the single-line navigational bar that “wraps” or breaks into a two-line navigational bar.

The first solution is a rather basic one. Designers can try reducing the number of items on the bar and placing them as sub-categories. The second, and more viable, option is changing the break point to a lower value. In this way, wrapping of a navigational bar no longer depends on the device size.

As these are the 3 most commonly encountered responsive design mistakes, web designers must waste no time in fixing these blunders if they are getting unpleasant reviews from mobile visitors.

How far will adapting to ‘Mobilegeddon’ save your Business?

Google Mobilegeddon

When the concept of responsive design came into the forefront, it opened up new avenues that completely changed the landscape of mobile Internet usage. Smart marketers, who realized the value of catering to the needs of their mobile customers, adopted this new technique quickly and started yielding great results. However, there were also marketers who were either oblivious, too lazy or too adamant to accept the change.

With the Hummingbird update in 2013, Google had already made its intentions pretty clear – ‘delivering the most relevant results in the most user-friendly way’. With the growing use of Smartphones and Tablets to access the Web, Google could no longer risk mobile users have an unsatisfactory surfing experience. There was need of a serious wake-up call for the non-responsive marketers, and this is the reason why Google took matters in his own hands in October 2014 when the mobile usability component was added to the Webmaster Tools. And hence, the message for marketers was simple: “Either go mobile… or go home!”

What is ‘Mobilegeddon’?

Although hints were aplenty in the following months, Google made the official announcement of the ‘Mobile-Friendly’ update in February 2015 and gave away warnings that this one will have a greater impact on search results than the Panda or Penguin update. Thus, the term ‘Mobilegeddon’ came into being by combining 2 words: mobile and Armageddon (meaning: the end of all things) to define the proposed cataclysmic change that would hit on April 21, 2015.

Impact of ‘Mobilegeddon’ so far

‘Mobilegeddon’ was never meant to affect the searches made on desktop computers. Its target has just been to exclude non-responsive websites from mobile searches. After 2 weeks of its release, there has been nearly a 5% uptick of responsive websites in the SERPs and only 30-35% of mobile searchers are receiving exclusive mobile results.

If you are unconvinced with the stats and figures, you should not forget that the entire re-indexing process is yet to occur on a full scale. So we can expect to see some more changes in the results in the following weeks.

Will adapting to ‘Mobilegeddon’ save your Business?

If you are relieved that desktop search results will be left untouched, things are not going to be as rosy as you expected. Website popularity and Click-Through-Rates are important factors in determining SERP ranking, and the inability to capture a mobile audience will have devastating effects on your desktop rankings as well.

Just like it was told: “Either go mobile… or go home!”

But here comes the big question, “Will adapting to Mobilegeddon save a business?” Or rather, will having a responsive website be the ultimate solution to appease the mobile customers?

Mobilegeddon is just the tip of the iceberg, my friend! In order to attract mobile searchers and convert them into customers, a business needs a lot more than an mobile-optimized website. According to recent surveys, conversion rates are 45% lower on mobile devices than on desktops. How far can a mobile-optimized website improve the figures anyway? The key to success is to tap into the real power of a mobile and use its most efficient feature – making a call.

70% of mobile searchers have reported to use the Click-to-Call feature, and search engines like Google and Bing have reported that ads with an integrated ‘Call’ button have 4-8% higher CTR rates. This is a clear indication that adapting to Mobilegeddon will just prevent a penalty… but you need further improvements to reap the rewards and earn high profits.

Google is a smart player and it will gradually stress on the Click-to-Call feature in future for sure. It has just initiated the mobile movement with Mobilegeddon… be rest assured that there are plenty left to come! If you are smart enough, do not wait for Google to pressurize you and therefore, you should start integrating the changes from now on!

Follow the current trends, stay a step ahead and keep evolving!

Flat Web Design Style Is Here To Rule the Roost

The bright colors combined with exotic typography have made way for flat interfaces. Over the past few months, a rapid shift has been noticed in app interface and software design wherein the skeuomorphic and 3-D trend has paved the way for minimalism and simplicity. The web designers, even a couple of months back were flexing their creative muscles and were pouring in animations and flashy illustrations to enthrall their visitors, flat designing trends have evolved to do away with all these complicated designing techniques, patterns, textures and bubbles and are leading the way towards more simplified and user-centric design style, where the content is legible and the site is engaging.

Flat Web Design

Image source: etchapps.com

Simply put, flat web design is a simplistic and minimalistic design approach that stresses on usability. The flat web design style features open space, crisp edges, vibrant colors and two-dimensional illustrations.

Minimalist Approach is Not Boring
In flat design, the flashy designs and animations remain absent but this does not mean that the style is boring. Bright and contrasting colors, bold (often retro) typography and simple interface elements like buttons or icons easily grab the attention of the users.

Flat Design Is Easy to Grasp

Simple images that are used in the flat designing style convey the messages more quickly to the visitors compared to the detailed illustrations. Images such as icons can indicate universal actions or purposes making it easy for everyone to understand.

Flat Web Design

Image Source: fitbit.com

A website is designed to boost conversion and flat web designing styles by solely focusing on the content, engage the users and influence conversion. The user experience is highly enriched and the sites are likely to receive positive feedback as being user-friendly.

In order to design a flat website, the design elements must center on and around the idea of simplicity. The flat websites have vivid and solid colors offer the required emphasis to the various aspects, ‘Sans-Serif’ typography offers clean and crisp supplement to illustrations. The text remains concise and to-the-point and the UI elements including the icons, links and buttons are noticeable and clear.

Flat Web Design Style

Image Source: erikford.me

Apple Inc., the leading follower of skeuomorphic design trend, has changed its route to try flat design when it releases iOS 7 later this year. Among the multi-national giants, Microsoft was the first one to apply flat design style to its interface.

We are dealing with incessant flow of information, both relevant and irrelevant. We are constantly evaluating, updating and creating content, and at one point of time, these all get exhausting, especially when much of the content consumption has moved to small screen and hand-held devices. Crammed and overload feel of the site disrupts the visitors’ experience and the reduction of clutter in the user interface becomes necessary to create that visual euphoria among the users. The flat web design trend has thus become ubiquitous.