{"id":6826,"date":"2021-06-04T10:41:40","date_gmt":"2021-06-04T05:11:40","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6826"},"modified":"2021-06-04T10:40:55","modified_gmt":"2021-06-04T05:10:55","slug":"a-practical-guide-for-responsive-ui-design","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/a-practical-guide-for-responsive-ui-design\/","title":{"rendered":"A Practical Guide for Responsive UI Design"},"content":{"rendered":"

What is responsive design?<\/strong><\/h2>\n

It is a design that adapts with device size. It means it is equally easy and usable at all screen sizes.<\/span><\/p>\n

Screen sizes can range from as small as a smartwatch to as big as a TV. There can be numerous screen sizes in between but it depends on your user demographics which helps you decide which screen sizes you should design for.<\/span><\/p>\n

Let’s see some of the examples<\/b><\/h3>\n

Example of non-responsive website:<\/span><\/p>\n

https:\/\/dequeuniversity.com\/library\/responsive\/1-non-responsive<\/span><\/a><\/p>\n

\"\"<\/p>\n

As you can see the website doesn’t adapt to the width of the screen size.<\/span><\/i><\/p>\n

Whereas on:<\/span>https:\/\/www.toptal.com\/designers<\/span><\/a><\/p>\n

The website changes itself accordingly with screen size.<\/span><\/p>\n

\"\"<\/p>\n

Hence, it is a responsive website.<\/span><\/p>\n

But why should one design a responsive website\/app? Why does it matter?\u00a0<\/span><\/p>\n

The next section answers this question.<\/span><\/p>\n

Why responsive design?<\/strong><\/h2>\n

Most probably most sites you visit daily are responsive, and this answers the question of why to go for responsive design. A responsive website is used more because it has better SEO (google has its parameters for it) and certainly more usable which directly translates to more visits and conversions.<\/span><\/p>\n

And also with decreasing screen size and more people surfing on mobile than laptops users need usable products for small screens as well and if your product is not good enough the user might hop into your competitor.<\/span><\/p>\n

You can take Google\u2019s mobile-friendly test here: <\/span>https:\/\/search.google.com\/test\/mobile-friendly<\/span><\/a><\/p>\n

Okay, now you got why to build a responsive design but what are the different types of it and when to use which one?<\/span><\/p>\n

Different types of responsive designs?<\/strong><\/h3>\n

Before starting this part I would like to introduce you to a term called breakpoint which is a certain screen size at which the layout of the website changes.<\/span><\/p>\n

It is generally advised to go with three breakpoints, i.e. for mobile, tablet, and PC.<\/span><\/p>\n

Now you are all ready to start off<\/span><\/p>\n

1- Fluid<\/strong><\/h3>\n

This is a type of responsive design in which the design continuously adapts with changing screen size and doesn’t change its layout up to a breakpoint and when a breakpoint is reached it changes its layout and again continuously adapts without changing the layout till the next breakpoint is reached.<\/span><\/p>\n

\"\"<\/p>\n

2- Fixed<\/strong><\/h3>\n

In this type the layouts are fixed till the next breakpoint is achieved and no adaptation takes place in between, which basically means you are designing for a certain no. of screen sizes.<\/span><\/p>\n

3 – Hybrid<\/strong><\/h3>\n

As the name suggests in this both fixed and fluid are there, there is no adaptation till a certain breakpoint is achieved in the fixed one after it adaptation takes place according to the screen size in the fluid one.<\/span><\/p>\n

How to make a responsive design?<\/strong><\/h4>\n

Always start to think with the smallest screen in your mind because:<\/span><\/p>\n

    \n
  1. Mobile websites have more usability concerns (this is mostly due to the lack of screen real estate), so it\u2019s practical and more efficient for the primary focus to be on mobile design.<\/span><\/li>\n
  2. It\u2019s easier to <\/span>scale up<\/b> the mobile version than it is to <\/span>scale down<\/b> the desktop version (again, because of the lack of space on mobile websites).<\/span><\/li>\n
  3. Mobile-first web design helps to reevaluate what\u2019s visually and functionally necessary.<\/span><\/li>\n<\/ol>\n

    \"\"
    \nDesigning a website as a mobile-first responsive site forces designers to ask a number of important questions because there is less screen real estate to work with. Here are the questions that need to be asked:<\/span><\/p>\n