Responsive design
Thought posts:

10 steps to create a seamless responsive design

Seamless responsive designSeamless responsive design is about making the user experience purposeful and positive. It is about creating experiences that are easy to read and navigate across a variety of devices without a lot of resizing, panning and scrolling.

1. One site approach

Responsive design helps to format content dynamically hence you don’t have to create separate sites for web and mobile. It addresses content, reducing time and money in designing multiple sites.

One site approach

2. Mobile first

If you want to create a seamless user experience, do not write for web and expect it to work for mobile. Instead write for mobile.

Mobile first

3. Get instant information

It is important to tell the user upfront about the product or service offering in a way the user relates. When you design a site, the benefits should be clearly stated.

Example: “Quality Healthcare Services”. Showcase the uniqueness of your service and how others have benefited using your services to build credibility one-step at a time.

Get instant information

4. Increment information leading to action

The story should eventually make the user take action. So keep the copy crisp and compelling to lead to the next level of action. Place action buttons right next to the stories.

Example: The chunk of content talking about

“What makes our healthcare the best”

should have “Read more” button visible right where the user’s eye is likely to move.

Increment information leading to action

5. Spacing and sizing

Remember, you cannot crop content just for the sake of accommodating space. Structure content to two and a half lines in a paragraph.

Spacing and sizing

6. Can I alter the image or use it as it is?

If there are too many elements in the image with layers of typography, background imagery and illustrations, the picture will not be clear in mobile. So present only a visible part of the image.

Can i alter the image or use it as it is?

7. Homepage

Homepage attracts more than 80% of the traffic in B2B sites. Designing a crisper homepage for mobile is a good idea. But if you are able to showcase everything using responsive design then there is no need to design a separate mobile homepage.

Homepage

8. Creating a powerful user experience

Users want to know what’s in it for them in less than seven seconds. Show only relevant content in steps by hiding information without changing the layout using CSS visibility properties.

Icons must be clearly visible so that users don’t have to worry about being extra careful while tapping the icon. Check the button sizes defined by Apple.

Creating a powerful user experience

9. Bytes and bandwidth

Bytes are an important consideration while designing the mobile site. Users don’t have the patience to wait till the image downloads, so use lighter images for mobiles. For banners it is better to use images that load faster.

Bytes and bandwidth

10. Creative science

Emotional connect is very important but it is also highly subjective and complex. Therefore a need-based approach designed on the principle of simplicity increases conversion. Great user experience is about constantly fine-tuning the design, content and other elements in the website. This is easily achievable by A/B/N testing.

Creative science

29 Responses

  1. Bhavya
    May 17, 2015 at 5:46 pm

    These 10 steps are very much important to cultivate in all businesses. The user experience is highly important to make customers visit the site again & again. Now-a-days the mobile users are more, so there should be mobile website which is user friendly, informative content and attractive images with lesser time consuming.

  2. Pritha Upmanyu
    May 14, 2015 at 8:11 am

    Responsive design is a great approach aimed at crafting sites to provide easy reading and navigation- optimal viewing experience. And you though your 10 steps I got the more clear idea about what all things to be kept in mind while creating a seamless responsive design for better user experience.

  3. Saravana
    March 16, 2015 at 4:31 am

    Nice post.

    Apart from improving the customer experience , RWD benefits business and IT teams by providing one site/content representation for all platforms. It provides reduction of cost , time and efforts.

    As clearly stated in the post , RWD design needs different thought process in designing. Which includes identifying the priorities for each platform. This needs continuous interactions with customer teams to understand the business objective and end user behaviours.

  4. Deepti
    February 18, 2015 at 5:05 pm

    Simple yet concise post.

    The rise of the mobile consumer is undebatable. Businesses with websites built long ago have all adopted mobile versions to reach greater audience. Automated tools are available to make this process easier. For the newer websites, the
    approach has been mobile first for the most important and logical reasoning being : adding content and other effects is more easier than cutting down. Setting up an interface to showcase the heart of the website with relevant images, concise content,navigations for the smaller screen and then expanding it for the desktop version sounds simpler, right?

    From the project running perspective, timelines can be more managable and the project hassle-free with the mobile first approach. In fact fixing issues becomes easier for retainer projects too.

    Whats more, Google recommends the use of media queries, which form part of the backbone of responsive design. Media queries allow websites to adapt to any screen size. So, a basic translation of this quotation is that Google believes it to be a best practice to use Responsive web design.

  5. Pavan
    January 29, 2015 at 6:33 pm

    It is totally based on size of the content, so that it is easily accessible by any devices. With the use of quick responsive website, user need not struggle to see the information through the mobile.

  6. Deepak
    January 29, 2015 at 6:14 pm

    Nice post helps understand easy portable services across devices.And yes,i feel Mobile First approach is the more cost-efficient and best way to make responsive designs.

  7. chandrashekhar K
    January 26, 2015 at 10:38 am

    This is useful information to build a user friendly website with product compatibility. images and icons should be proper to gain user focus.

  8. Nambirajan
    January 11, 2015 at 4:44 pm

    What’s the one thing which the user is expecting now is one e question which can bring in clarity while designing responsive systems.

    I believe clarity is a crucial ingredient in designing responsive design.

  9. Muralimanohar G
    November 15, 2014 at 1:47 pm

    This sharing is very worth to read.

    It explains the important steps to build a website. the best thing we can do is make understand the things to the user via images and icons. people are nowadays expecting the innovative ideas.

    Less content.. More Ideas..

  10. Vineet G Nair
    September 18, 2014 at 4:21 pm

    Gone are the days when people had to run to find a internet cafe or wait for the next day till they reach office to send a mail in case they don’t have internet at home. In this fast paced world where everything depends on time, instant information exchange is quite important. Further more, smartphones and tablets have already contributed their share in helping people transfer or access information from any place. The next is depending on us. To give the best and user friendly websites or apps to make Information Transfer much more faster.

    thanks Pepper Square for the tips on how to go for it.

  11. Ananthakumar R
    September 16, 2014 at 11:42 am

    Responsive design is a new trend. This web design is a way of making a single website that works effectively on both desktop browsers and mobile devices. The architecture gives the best quality browsing experience.
    The major benefits are:
    -It is easily accessible by any computer and mobile device of any screen size.
    -It shows only the valuable information as what the user wish to know.

  12. Avinash
    September 11, 2014 at 11:30 am

    Mobile first approach is good, CMS like drupal also follows this approach. We tend to think there will be different web sites for Desktop/laptop,tablets,mobiles,but responsive design is a cost-effective method of optimizing one site for all.
    Other points you covered is so informative for improving the site like Creative science, Creating a powerful user experience

  13. Tilottama
    September 9, 2014 at 4:51 pm

    Nice sharing. I think a good web design is very important for any website. It can turn a visitor into a customer or turn them away. Thanks for sharing these 10 easy to remember steps…

  14. Abhinethri R S
    September 1, 2014 at 4:16 pm

    These are very informative steps for the awesome UI design.Responsive design helps to reach every information to all the end users with their handheld devices.These key steps are very essential for the designers to design UI with great quality and impact for the users.

  15. Akash K
    July 29, 2014 at 6:32 pm

    This is a very apt and very informative article about the do’s and dont’s to keep in mind while designing a responsive user interface. Another important think to keep in mind while designing a responsive website is not to make everything too extravagant with too many pictures just too attract visitors but to also make sure it is equally balanced with good and relevant content. Also we must keep in mind that there are people who still use low resolution phones or PC’s and design it accordingly to acquire global audience as people are always on the go and everything is accessed mostly from hand-held devices in this digital age.

  16. June 28, 2014 at 3:54 am

    Powerful post with easy to understand steps.
    Following the formula ‘Don’t make me think’, responsive design forces the designer to focus on simplicity and what is important, giving the end user a clean yet powerful interface with right information they need.
    It is not a passing phase – Responsive design is future. It is mandatory part to reach large audience and to make an impact on user’s mind.
    In today’s world, where we have more end users with mobile phones than PCs and laptops, key mantra is – Go responsive.

  17. June 28, 2014 at 3:50 am

    Powerful post with easy to understand steps.
    Following the ‘Don’t make me think’ formula, responsive design forces the designer to focus on simplicity and what is important, giving the end user a clean yet powerful interface with right information they need.
    It is not a passing phase – Responsive design is future. It is mandatory part to reach large audience and to make an impact on user’s mind.
    In today’s world, where we have more end users with mobile phones than PCs and laptops, key mantra is – Go responsive.

  18. May 27, 2014 at 6:11 pm

    Really informative article help us to keep remember 10 important aspects that need to be followed while creating responsive design. Responsive design name suggest the design should be able to satisfy or meet all the end user requirement in a precise and simple way. The article help us to know the responsibility or “points to ponder” for the web designer while creating the design

  19. May 27, 2014 at 2:05 pm

    Really informative article help us to keep remember 10 important aspects that need to be followed while creating responsive design. Responsive design name suggest the design should be able to satisfy or meet all the end user requirement in a precise and simple way. The article help us to know the responsibility or “points to ponder” for the web designer while creating the design.

  20. May 19, 2014 at 7:05 am

    Can you just give me a quate on to make the responsive design

  21. Subhrajyoti Basu
    May 8, 2014 at 5:24 pm

    Day by day, the number of devices, platforms,
    and browsers that need to work with our site grows.
    Responsive web design represents a fundamental shift
    in how we’ll build websites for the decade to come.

  22. Ranjith
    April 16, 2014 at 10:07 am

    Responsive web design is a cost-effective method of optimizing a desktop site for users across all devices compared to developing device specific sites.

  23. Rangaraj
    April 4, 2014 at 6:10 am

    Nice Article! Yes. Mobile first approach is good for responsive websites. when we we think for a desktop website, we expect more and use more images. but when it transform to mobile, the loading time of images is a major problem. we can hide images but still they load. so this approach is better.

    But a person with thirsty for creativity, may dislike the simplicity of responsive websites. most responsive websites are looks same. we need to think a lot to give a attractive and responsive website.

  24. Subhash
    January 31, 2014 at 4:47 pm

    This is best Technology what we have today. by which anybody can access anything, anywhere. thats Responsive.

  25. Nirbhay
    December 20, 2013 at 4:34 am

    True, agree with what you have mentioned. As you have clearly mentioned on how to develop the responsive website, I have noted couple of other points which I think is essential. As a user when we look into the site, it should represent the motive for which the website is developed. i.e provide information. In the current ages you have to give deep concentration on the content you are using, as that plays an important role in improving your ability of the website.

    You cannot stress more on imagery as your website will not load quickly and due to non availability of legible content indexing will also not be possible and the site will not be ranked good. Hence we have to optimize both on imagery and also content. With use of both imagery and content, which will also help in making the website responsive, so that user can view the website in all devices(mobiles, tablets, desktop/laptop). With the use of responsive website, a user need not struggle to see the information through mobile and will help in serving the purpose of the website. Another advantages of using responsive website is that there will not be any change in URL, if you are viewing the same through any device.

  26. Ruchi Kumari
    November 23, 2013 at 4:50 pm

    Responsive design is a new technique for designing a website so that it appears same in all kind of devices.Now people create same website but separately for mobiles and desktops. Responsive design has come as life saver for them because one design can be used for different devices thus saving time and effort and bring out the product in less time. This technique is a boon for the designers.

  27. Linto Thomas
    October 29, 2013 at 1:13 pm

    Responsive design is new trend. I will add some key points with this post. Mainly there are 2 approaches for the responsive web designining.
    1.grid method
    This is nothing but we are dividing the web page with divisions and when proper device is detecting, according to the size the divisions will re arrange. And “Twitter bootstrap” is one of the platform for grid method. You can google about it for more info.
    2. Agnostic method
    In agnostic method we are creating different css for different device size. Browser will detect the device size with the media query and load the css for that device size. And you can test it with “mattkersley.com”. And responsive websites are quick and effective.

  28. Priyanka S N
    October 1, 2013 at 8:29 am

    Thank you for the information provided here

  29. Soumyaraj Das
    September 12, 2013 at 5:20 am

    This is a very informative and helpful post. But one disadvantage I read about responsive design is that they load comparatively slower, and that is frustrating to most visitors as they tend to jump to a different site if it takes more than usual time to load. So, is there any solution so that we can keep on hold to such visitors?

www.meinefototapeten.de