{"id":15249,"date":"2023-03-31T17:24:55","date_gmt":"2023-03-31T15:24:55","guid":{"rendered":"https:\/\/web-mate.gr\/mobile-first-web-design\/"},"modified":"2026-10-29T13:40:06","modified_gmt":"2026-10-29T11:40:06","slug":"mobile-first-web-design","status":"publish","type":"post","link":"https:\/\/web-mate.gr\/en\/mobile-first-web-design\/","title":{"rendered":"Build Your Website for Mobile Devices First"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In web design we often spend most of our time on animations, on perfect image quality, or even on designs that are mainly visible on desktops and laptops. But who will actually see our <a href=\"https:\/\/web-mate.gr\/en\/\" data-type=\"URL\" data-id=\"https:\/\/web-mate.gr\">website<\/a> on a desktop or a laptop in the end? Perhaps only us, our friends, the web designer and maybe 10-15% of visitors, a figure that includes ourselves coming back to our own website again and again?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before we say anything more, let\u2019s look at some data collected over a long period from high-traffic websites, to get a better idea of what we are talking about.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2000\" height=\"1302\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile.png\" alt=\"eshop responsive\" class=\"wp-image-10248\" title=\"- Web-Mate\" srcset=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile.png 2000w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile-300x195.png 300w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile-1024x666.png 1024w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile-768x500.png 768w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile-1536x1000.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2000\" height=\"1294\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-kinita-analytics.png\" alt=\"mobile website analytics\" class=\"wp-image-10246\" title=\"- Web-Mate\" srcset=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-kinita-analytics.png 2000w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-kinita-analytics-300x194.png 300w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-kinita-analytics-1024x662.png 1024w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-kinita-analytics-768x497.png 768w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-kinita-analytics-1536x994.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2000\" height=\"1304\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mobile-first.png\" alt=\"mobile website analytics\" class=\"wp-image-10247\" title=\"- Web-Mate\" srcset=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mobile-first.png 2000w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mobile-first-300x196.png 300w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mobile-first-1024x667.png 1024w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mobile-first-768x501.png 768w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mobile-first-1536x1001.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2000\" height=\"1302\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile.png\" alt=\"eshop responsive\" class=\"wp-image-10248\" title=\"- Web-Mate\" srcset=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile.png 2000w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile-300x195.png 300w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile-1024x666.png 1024w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile-768x500.png 768w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/eshop-mobile-1536x1000.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2000\" height=\"1297\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mob.png\" alt=\"istoselida mobile\" class=\"wp-image-10249\" title=\"- Web-Mate\" srcset=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mob.png 2000w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mob-300x195.png 300w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mob-1024x664.png 1024w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mob-768x498.png 768w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/istoselida-mob-1536x996.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2000\" height=\"1317\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/mobile-responsive-istoselida.png\" alt=\"mobile website analytics\" class=\"wp-image-10250\" title=\"- Web-Mate\" srcset=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/mobile-responsive-istoselida.png 2000w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/mobile-responsive-istoselida-300x198.png 300w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/mobile-responsive-istoselida-1024x674.png 1024w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/mobile-responsive-istoselida-768x506.png 768w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/mobile-responsive-istoselida-1536x1012.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The images above show the traffic of <a href=\"https:\/\/web-mate.gr\/en\/how-to-start-an-eshop-in-greece\/\" data-type=\"post\" data-id=\"9268\">websites &amp; e-shops<\/a> and which devices users prefer to visit them on.  And in case you are thinking \u201cyes, but my business is mainly B2B\u201d, we will answer with 2 purely B2B e-shops: there the trend is naturally less pronounced, yet the share still comes to around 60%!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2000\" height=\"1297\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-1.png\" alt=\"- Web-Mate\" class=\"wp-image-10252\" title=\"- Web-Mate\" srcset=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-1.png 2000w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-1-300x195.png 300w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-1-1024x664.png 1024w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-1-768x498.png 768w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-1-1536x996.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"679\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-shop-1024x679.png\" alt=\"- Web-Mate\" class=\"wp-image-10253\" title=\"- Web-Mate\" srcset=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-shop-1024x679.png 1024w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-shop-300x199.png 300w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-shop-768x510.png 768w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-shop-1536x1019.png 1536w, https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/03\/b2b-shop.png 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">What to do to have a successful site on mobile devices<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In short, if you follow the points below, the mobile version of your site, or its responsive design, has a very good chance of being successful.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Your site must be genuinely fast. Test it with Google PageSpeed Insights to find problems that can be fixed easily<\/li>\n\n\n\n<li>Keep your content to a reasonable length, because on a phone nobody wants to scroll and scroll again<\/li>\n\n\n\n<li>Users must be able to find what they want quickly and easily, with no unnecessary information.<\/li>\n\n\n\n<li>Guide users easily to the next step they will probably want to take. In other words, when they reach the end of a page\u2019s content, they should be able to find what they want right where they are, without going back to the top<\/li>\n\n\n\n<li>Users must be able to read what your website says easily. Content with low contrast and small fonts is very hard to read on a phone, especially when the visitor is outdoors.<\/li>\n\n\n\n<li>Do not use lots of animations, as they become tiring on mobile devices.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">One extra tip we can give you is to avoid sliders, because they do two bad things. First, they \u201cload\u201d lots of files and slow the website down. Second, in their place you could have 1 or 2 sections through which the user could easily find what they were looking for. <\/p>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1680276201643\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Why is it important for a website to be mobile-friendly?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can check whether your website or e-shop is mobile-friendly with Google\u2019s <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a>. For <a href=\"https:\/\/web-mate.gr\/en\/what-is-seo\/\">SEO<\/a> it is ideal for your website to follow responsive design and be mobile-friendly. Mobile-friendly websites have also been shown to keep visitors on the site for longer and to have a higher conversion rate.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In web design we often spend most of our time on animations, on perfect image quality, or even on designs that are mainly visible on desktops and laptops. But who will actually see our website on a desktop or a laptop in the end? Perhaps only us, our friends, the web designer and maybe 10-15% [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10254,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","rank_math_title":"Mobile-First Web Design: Why It Matters | WebMate","rank_math_description":"Why your website must be mobile-friendly and why mobile-first design brings more visitors, enquiries and sales. Practical tips. Get a quote.","rank_math_focus_keyword":"mobile first web design"},"categories":[249],"tags":[],"class_list":["post-15249","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-articles"],"_links":{"self":[{"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/posts\/15249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/comments?post=15249"}],"version-history":[{"count":2,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/posts\/15249\/revisions"}],"predecessor-version":[{"id":15516,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/posts\/15249\/revisions\/15516"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/media\/10254"}],"wp:attachment":[{"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/media?parent=15249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/categories?post=15249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/tags?post=15249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}