{"id":7420,"date":"2023-04-16T15:09:09","date_gmt":"2023-04-16T15:09:09","guid":{"rendered":"https:\/\/architsingh.com\/webioticnew\/?p=7420"},"modified":"2023-04-18T17:25:20","modified_gmt":"2023-04-18T17:25:20","slug":"how-to-make-my-website-mobile-responsive","status":"publish","type":"post","link":"https:\/\/architsingh.com\/webioticnew\/how-to-make-my-website-mobile-responsive\/","title":{"rendered":"How to Make Your Website Mobile Responsive?"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_row column_structure=”1_4,3_4″ use_custom_gutter=”on” gutter_width=”2″ disabled_on=”off|off|off” module_class=”post_header” _builder_version=”4.9.7″ _module_preset=”default” width=”70%” custom_padding=”||||false|false” global_module=”5435″ saved_tabs=”all” global_colors_info=”{}”][et_pb_column type=”1_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_id=”date_text” _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

Updated<\/strong><\/p>\n

[\/et_pb_text][et_pb_post_title title=”off” author=”off” date_format=”M j Y” categories=”off” comments=”off” featured_image=”off” admin_label=”Post Date” module_class=”post-date” _builder_version=”4.16″ _module_preset=”default” meta_font=”Nexa Bold||||||||” meta_text_align=”center” meta_text_color=”#000000″ meta_font_size=”48px” meta_line_height=”1.2em” custom_margin=”||0px||false|false” custom_padding=”||0px||false|false” global_colors_info=”{}”][\/et_pb_post_title][et_pb_text module_class=”timer_d” _builder_version=”4.17.6″ _module_preset=”default” text_font=”Helvetica||||||||” text_text_color=”#2ea0d2″ text_orientation=”center” custom_margin=”||0px||false|false” custom_padding=”0px||0px||false|false” global_colors_info=”{}”]<\/p>\n

<\/span> 11<\/span> min read<\/span><\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”3_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_post_title meta=”off” featured_image=”off” _builder_version=”4.16″ _module_preset=”default” title_font=”Nexa-Bold|800|||||||” title_text_align=”left” title_text_color=”#000000″ title_font_size=”48px” title_line_height=”1.2em” meta_font=”Nexa Regular||||||||” meta_text_align=”left” meta_text_color=”#2ea0d2″ meta_font_size=”15px” meta_line_height=”1.6em” title_font_size_tablet=”42px” title_font_size_phone=”36px” title_font_size_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_post_title][\/et_pb_column][\/et_pb_row][et_pb_row disabled_on=”off|off|off” _builder_version=”4.9.7″ _module_preset=”default” width=”100%” max_width=”1280px” module_alignment=”center” global_module=”5436″ saved_tabs=”all” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_post_title title=”off” meta=”off” admin_label=”Feature Image” _builder_version=”4.16″ _module_preset=”default” title_font=”Nexa Bold|700|||||||” title_text_align=”left” title_text_color=”#000000″ title_font_size=”48px” title_line_height=”1.2em” meta_font=”Nexa Regular||||||||” meta_text_align=”left” meta_text_color=”#2ea0d2″ meta_font_size=”15px” meta_line_height=”1.6em” title_font_size_tablet=”42px” title_font_size_phone=”36px” title_font_size_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_post_title][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”2_3,1_3″ module_class=”blog-cnt-row” _builder_version=”4.16″ _module_preset=”default” width=”90%” max_width=”1280px” module_alignment=”center” global_colors_info=”{}”][et_pb_column type=”2_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.4″ _module_preset=”default” text_font=”Helvetica||||||||” text_text_color=”#26282d” text_font_size=”18px” text_letter_spacing=”0.03em” text_line_height=”1.8em” header_2_font=”Helvetica Bold||||||||” header_2_text_color=”#26282d” header_2_font_size=”50px” header_2_line_height=”54px” header_3_font=”Nexa Bold||||||||” header_3_text_color=”#26282d” header_3_font_size=”24px” header_4_font=”Nexa Bold||||||||” header_4_text_color=”#26282d” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]<\/p>\n

Approximately half of web traffic around the world is on mobile devices, and that\u2019s something you just <\/span>can\u2019t ignore as a business<\/span><\/a>.<\/span><\/p>\n

Creating the <\/span>best user experience on mobile<\/span><\/a> should be treated with just as much care and strategy as desktop\u2014just remember that these are two different experiences and so you\u2019ll need a whole new approach for mobile.<\/span><\/p>\n

In this article, we\u2019ll review how to make website mobile responsive, why it\u2019s important, and the approaches you can take to succeed.<\/span><\/p>\n

\"\"<\/p>\n

Table of Contents<\/span><\/h4>\n
    \n
  1. Mobile Website vs Mobile App<\/span><\/a><\/li>\n
  2. Should You Create a Mobile Website or a Mobile App?<\/span><\/a><\/li>\n
  3. Creating a Responsive Website<\/span><\/a><\/li>\n
  4. Set Breakpoints<\/span><\/a><\/li>\n
  5. Create Fluid Layouts<\/span><\/a><\/li>\n
  6. Adapt for Touchscreens<\/span><\/a><\/li>\n
  7. Make Sure Images and Videos are Responsive<\/span><\/a><\/li>\n
  8. Create Responsive Typography<\/span><\/a><\/li>\n
  9. Test for Responsiveness on Real Devices<\/span><\/a><\/li>\n
  10. Why Mobile Responsiveness Matters<\/span><\/a><\/li>\n<\/ol>\n

    Chapter #1: Mobile Website vs Mobile App<\/span><\/h2>\n

    Before diving into how to make a desktop site mobile friendly, I first want to explore the differences and similarities between having a mobile website and a mobile app.<\/span><\/p>\n

    First and foremost, know that they\u2019re not the same thing.\u00a0<\/span><\/p>\n

    \"\"<\/p>\n

    Photo Credit: <\/span>medium.com<\/span><\/a><\/p>\n

    While both are <\/span>designed to be accessed from mobile devices and tablets<\/span><\/a>, they\u2019re more different than they are similar.<\/span><\/p>\n

    A mobile website is simply a desktop site that can scale and adapt to smaller screen sizes, like smartphones. It\u2019s accessed through mobile browsers by visiting the website\u2019s URL address.<\/span><\/p>\n

    There\u2019s no need to download anything.<\/span><\/p>\n

    \"\"<\/p>\n

    With a mobile app, on the other hand, you would download and install the app from the <\/span>App Store or Google Play<\/span><\/a>, and it would then be saved to your mobile device.<\/span><\/p>\n

    Having an app directly on a mobile device is much easier for users to quickly access rather than having to type in a URL in their mobile browser, even if the website is mobile responsive.<\/span><\/p>\n

    1.1 Should You Create a Mobile Website or a Mobile App?<\/span><\/h3>\n

    Generally speaking, no matter what your business is, it\u2019s a good idea to start with a mobile website, which isn\u2019t as time consuming and costly as creating a mobile app.<\/span><\/p>\n

    \"\"<\/p>\n

    Photo Credit: <\/span>biznessapps.com<\/span><\/a><\/p>\n

    This is a business\u2019s very first step in creating a <\/span>mobile presence for users<\/span><\/a>.<\/span><\/p>\n

    Whether or not you should continue to the <\/span>next step of creating a mobile app<\/span><\/a> really depends on\u00a0 what your goals are as a company.\u00a0<\/span><\/p>\n

    Just know that <\/span>mobile apps can be incredibly beneficial<\/span><\/a> for all types of businesses and they offer quite a bit in the way of features.<\/span><\/p>\n

    \"\"<\/p>\n

    Here are just a few benefits of having a mobile app for your users:<\/span><\/p>\n

    Increased visibility and accessibility:<\/strong> Mobile apps make it easier for users to access your products or services, and they can easily find your app in app stores.<\/p>\n

    Improved customer engagement:<\/strong> A mobile app can offer a more personalized and engaging experience for users, which can lead to increased customer loyalty and retention.<\/p>\n

    Enhanced user experience:<\/strong> Mobile apps can be designed to provide a seamless user experience, with intuitive navigation and user-friendly interfaces.<\/p>\n

    Improved marketing and branding:<\/strong> An app can be a powerful tool for marketing<\/a> your brand, as it can provide a platform to showcase your products or services and communicate with your customers directly.<\/p>\n

    Increased sales and revenue:<\/strong> A well-designed mobile app can make it easier for users to make purchases, which can lead to increased sales and revenue for your business.<\/p>\n

    Access to user data and insights:<\/strong> Apps can provide valuable data and insights into user behavior and preferences, which can be used to improve your products or services.\"\"<\/p>\n

    PRO TIP:<\/strong>
    Once you create a mobile responsive website, <\/span>    start with analyzing the traffic<\/span><\/a> coming from mobile app users and evaluating your business goals to determine if it\u2019s worth it to create a mobile app.<\/span><\/p>\n

    Chapter #2: Creating a Responsive Website<\/span><\/h2>\n

    As mentioned in the previous chapter, responsive web simply means that your website looks and functions well on not just desktop, but on mobile and tablet devices as well.<\/span><\/p>\n

    Poor UX and UI on mobile devices<\/span><\/a> can alienate users and overall reduce your company\u2019s reach.<\/span><\/p>\n

    \"\"<\/p>\n

    Mobile-friendliness is also a key parameter when it comes to ranking higher in Google\u2019s search algorithm, so don\u2019t neglect it.<\/span><\/p>\n

    Now let\u2019s review the steps involved in creating responsive web design.<\/span><\/p>\n

    2.1 Set Breakpoints<\/span><\/h3>\n

    When you create a mobile website, you\u2019ll need to start by setting appropriate responsive breakpoints.<\/span><\/p>\n

    A breakpoint is essentially the point at which a <\/span>website\u2019s design and content<\/span><\/a> will adjust so that it looks best on a specific screen size.<\/span><\/p>\n

    \"\"<\/p>\n

    Since a website can be accessed from different devices and screen sizes, it\u2019s important to set multiple breakpoints so the screen will render perfectly across all of them.\u00a0<\/span><\/p>\n

    This is also referred to as media query breakpoints and CSS breakpoints since you\u2019re creating CSS that\u2019s meant to kick in only at these specific breakpoints.<\/span><\/p>\n

    By not setting any breakpoints, it\u2019s very likely that images will get cut off, content overlaps other content on the web pages, and so on.<\/span><\/p>\n

    \"\"<\/p>\n

    PRO TIP:<\/strong>
    Open up your browser and visit any website. Minimize the screen slowly to see the content on the page adapt to the new screen size. You\u2019ll notice that the mobile layout on the page changes so it looks great no matter how big your screen is.
    <\/span>
    These are breakpoints (media queries) in action!<\/span><\/p>\n

    Here are some of the most common responsive breakpoints you can set for popular screen sizes:<\/span><\/p>\n