{"id":95933,"date":"2023-09-14T10:10:16","date_gmt":"2023-09-14T08:10:16","guid":{"rendered":"https:\/\/happybrain.it\/?p=95933"},"modified":"2023-10-20T14:06:39","modified_gmt":"2023-10-20T12:06:39","slug":"come-creare-un-sito-web-mobile-friendly","status":"publish","type":"post","link":"https:\/\/happybrain.it\/en\/2023\/09\/14\/come-creare-un-sito-web-mobile-friendly\/","title":{"rendered":"How to create a mobile-friendly website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column column_width_percent=&#8221;80&#8243; gutter_size=&#8221;3&#8243; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;1\/1&#8243;][vc_empty_space empty_h=&#8221;1&#8243;][vc_custom_heading text_size=&#8221;h3&#8243; sub_reduced=&#8221;yes&#8221; uncode_shortcode_id=&#8221;136557&#8243;]From Desktop to Smartphone[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;172037&#8243;]In everyday life, how often do you browse a site, do you search or make a purchase from your phone? For this reason, the design of your website must consider the optimization for these devices as essential, to ensure a user experience (UX) that will make your users more than satisfied.<\/p>\n<p>There are many aspects to consider, below we will give you the must-have that usually tend to be underestimated.[\/vc_column_text][vc_single_image media=&#8221;95941&#8243; media_width_percent=&#8221;100&#8243; uncode_shortcode_id=&#8221;134620&#8243;][vc_custom_heading text_size=&#8221;h3&#8243; sub_reduced=&#8221;yes&#8221; uncode_shortcode_id=&#8221;135879&#8243;]5 Rules for a good UX design[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;152284&#8243;]<strong>1. Do research before you design<\/strong><br \/>\nYou need to understand who your customers are and what they need, in order to be able to provide them with the best possible user experience while browsing your site.<\/p>\n<p><em>How to analyze the target user?<\/em><\/p>\n<ul>\n<li>Study your company&#8217;s <strong>competitors<\/strong>: their performance is a great way to understand your industry and target audience. Take your cue from what they like and therefore might be useful and note what, from an outside view, might be a hindrance or an advantage.<\/li>\n<li>Now observe the <strong>basic user<\/strong>. Are you targeting a young audience? In this case they will need less instruction because they are more adept at using technology. Conversely, are you aiming for an adult category? Then be sure to make all the steps as clear as possible and give as much instruction as possible.<\/li>\n<li>Finally,<strong> analyze the data from your old site<\/strong>. There may be a feature on the site you are going to implement that is causing a drop in conversions or leads, ask yourself why and try to remedy it. It could also contrariwise be the case that a feature is a hot spot for conversion consequently it absolutely must be retained and highlighted.<\/li>\n<\/ul>\n<p><strong>2. Reduce clutter<\/strong><br \/>\nWhen designing a screen try to focus on the absolutely necessary components, <strong>minimize decorative elements<\/strong> (e.g. excessive shading, bold colors) that can distract the user.<\/p>\n<p>Remove or hide any image or text buttons until they are absolutely necessary.<\/p>\n<p>The user <strong>path<\/strong> should be well defined, <strong>schematic and intuitive, with clear objectives.<\/strong><br \/>\nYou have to consider that you are working on a small screen size; inserting too many elements could lead to an inevitable drop-off.<\/p>\n<blockquote><p><em>Happy Tips: Prioritize obvious CTAs (Call To Action), you will encourage conversion and reduce the number of areas where the customer can get lost while browsing.<\/em><\/p><\/blockquote>\n<p>[\/vc_column_text][vc_single_image media=&#8221;95950&#8243; media_width_percent=&#8221;100&#8243; uncode_shortcode_id=&#8221;248964&#8243;][vc_column_text uncode_shortcode_id=&#8221;205576&#8243;]<strong>3. Focus on consistent navigation<\/strong><br \/>\nUsers are happy when a website meets their expectations. Helping them navigate easily within your site should be a priority. Creating consistent navigation that allows for a logical and linear journey not only improves user UX but consequently improves conversion.<\/p>\n<blockquote><p><em>Happy Tips: Use navigation patterns already familiar to your target audience, taking cues from other sites, to make it easier for them to move through your site.<\/em><\/p><\/blockquote>\n<p><strong>4. Create CTAs of the right size<\/strong><br \/>\nButton sizes need to be oversized because your finger will be your pointer. The optimal size for a button on a mobile device is <strong>between 42 and 72px.<\/strong><\/p>\n<blockquote><p><em>Happy Tips: Remember to adjust the size of your CTA depending on your target audience.<\/em><\/p><\/blockquote>\n<p><strong>5. Interactions<\/strong><br \/>\nUser engagement comes through multiple points. For example, a confirmation feedback after a button click or form submission helps the user understand that the action was successful.<\/p>\n<blockquote><p><em>Happy Tips: Add an animated effect, such as a loading wheel or timer, for actions that take longer to clarify the results of an action, this will increase site interactivity and consequently conversions.<\/em><\/p><\/blockquote>\n<p>[\/vc_column_text][vc_single_image media=&#8221;95942&#8243; media_width_percent=&#8221;100&#8243; uncode_shortcode_id=&#8221;166496&#8243;][vc_custom_heading text_size=&#8221;h3&#8243; sub_reduced=&#8221;yes&#8221; uncode_shortcode_id=&#8221;201010&#8243;]3 Points to avoid[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;131785&#8243;]<strong>1. Perfection does not exist<\/strong><br \/>\nDon&#8217;t go in search of perfection, follow an interactive approach and <strong>test the project<\/strong> throughout the design phase to see the things you need to improve.<\/p>\n<blockquote><p><em>Happy Tips: Always remember to test on multiple devices and multiple operating systems to leave nothing to chance. Google Search Console can also help you! It provides some automatic notifications if design elements are too small or too large.<\/em><\/p><\/blockquote>\n<p><strong>2. Permissions<\/strong><br \/>\nIt is quite normal to ask the user for permission when loading a site, however, you must pay attention when to do so, choosing the most appropriate time.<br \/>\nUsers are more likely to grant permissions if they are asked during a relevant activity. For example, ask for location when it is needed for an interactive map not at startup on the homepage, otherwise 90% of the customer will refuse because they do not understand why.<\/p>\n<p><strong>3. Dead ends<\/strong><br \/>\nCreate a consistent navigation flow, making sure that the user exits the site as late as possible. Then place CTAs within your site or internal links to related pages, products, or blog articles to suggest in-depth content.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Designing a mobile-friendly website? We have gathered here all the details that usually tend to be left out and the mistakes that should absolutely be avoided.<\/p>\n","protected":false},"author":13,"featured_media":95953,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260,281],"tags":[235,244,335],"class_list":["post-95933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-marketing","category-web-design","tag-web-design","tag-strategy","tag-user-experience"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/95933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/comments?post=95933"}],"version-history":[{"count":0,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/95933\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media\/95953"}],"wp:attachment":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media?parent=95933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/categories?post=95933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/tags?post=95933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}