{"id":6187,"date":"2023-08-10T11:38:23","date_gmt":"2023-08-10T11:38:23","guid":{"rendered":"https:\/\/inspiration.ie\/?p=6187"},"modified":"2023-11-09T16:26:33","modified_gmt":"2023-11-09T16:26:33","slug":"6187-2","status":"publish","type":"post","link":"https:\/\/inspiration.ie\/6187-2\/","title":{"rendered":"Mobile-Friendly Web Design"},"content":{"rendered":"
Mobile Friendly Website Design \u2013 the Low Down.<\/strong><\/p>\n It\u2019s mad to think that there are 5.2 billion smartphone users in the world<\/a>, and that there are probably more phones than people! So, it\u2019s essential now to develop websites that work effectively in mobile devices.<\/p>\n So, should it always be \u201cmobile-first\u201d?<\/p>\n As Inspiration works with a lot of B2B businesses<\/a>, we do come across clients occasionally who consider mobile phone visits to their websites to be in the minority. And in certain sectors this is possible; take professional services businesses, for example, where prospective clients are likely to be in front of a PC for much of the day. However, Google\u2019s stats show an increase in mobile use for B2B websites<\/a>, and that is something that they predict will continue to grow as the younger generations enter the workspace.<\/p>\n But it can vary considerably.<\/p>\n Here\u2019s the stats from a local Irish SME that runs a consumer eCommerce website \u2013 you can see that about 88% of visitors are coming from mobile devices.<\/p>\n <\/p>\n <\/p>\n On the other hand, here\u2019s stats on a sample month of visitors to the website of an Irish B2B client operating in a highly niche manufacturing sector, albeit with a radically higher turnover than the client above. Big diff in terms of the number of visitors but also the profile of devices used by site visitors \u2013 with 80% using desktops.<\/p>\n <\/p>\n So, it shouldn\u2019t always be mobile first but here’s a few thoughts;<\/p>\n <\/p>\n <\/p>\n So, what\u2019s the difference between the design approaches for each device type?<\/p>\n <\/p>\n First up you can tap your smartphone screen, so a mobile version of a news website, for example, will display a simplified homepage with easily tappable headlines and images. Scrolling is smooth, and navigation is accessible through a sticky top bar (always visible even as you scroll down the content \u2013 see www.healthmatters.ie<\/a> as an example of this, on a mobile). The site\u2019s content is organised in a vertical flow, allowing users to consume information effortlessly.<\/p>\n <\/p>\n This is great if you want to showcase visuals as the desktop can easily display large, high-resolution images and immersive parallax effects. The navigation menu is visible across the top, offering a comprehensive view of services and projects. A site can use hover effects for PC design, because the mouse is being used to navigate the site. Check out how the Project images make a big impact on PC for this client site for example www.mmp.ie<\/a><\/p>\n <\/p>\n Inspiration designs websites in a responsive manner because this allows the site to automatically re-configure depending on the device. On mobile, products are presented in a single column with vertical swipe navigation, while on desktop, products are displayed in a grid layout with hover effects for additional impact or information. See www.atcelec.co.uk<\/a> across the different devices and you\u2019ll see how it is quite different for each one \u2013 but there was one design process.<\/p>\n <\/p>\n <\/p>\n Here’s the Googley Science Bit<\/strong><\/p>\n Core Web Vitals are metrics used by Google to assess the User Experience. The three main vitals are<\/p>\n Google uses these measurements as part of their assessment of how to rank your site. A good web agency (and ye might try Inspiration \u2013 just sayin\u2019) will not only make sure the design accommodates a good user experience, but they will make sure the technical implementation of that design takes these considerations into account. And performance can vary according to the device used so this testing needs to be across devices.<\/p>\n Have you noticed the way many websites on mobile phones now use three bars \u2013 a hamburger \u2013 as a Menu bar? What do you think of them \u2013 not so delic. as the food right ???? ? They have also crept into the design of some sites on PCs, where a \u201cmobile-first\u201d design approach has been taken. There\u2019s some pro\u2019s and cons.<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n There\u2019s no definitive answer to the hamburger choice; it\u2019ll depend on what you think will work best for your audience and your site objectives.<\/p>\n There are some definite \u201cbest practice\u201d considerations though for mobile design and here\u2019s where we\u2019ve rounded up the 8 that we think are most important.<\/p>\n <\/p>\n <\/p>\n <\/p>\n Is Inspiration the best option to help you sort your web design project? To borrow a phrase \u2013 probably!<\/p>\n\n
\n
Effective Web Design Considerations <\/strong><\/h2>\n
Mobile Design:<\/h3>\n
PC Design:<\/h3>\n
Responsive Design:<\/h3>\n
Core Web Vitals\u00a0<\/strong><\/h2>\n
\n
Hamburger Menus \u2013 but not as you knew them! <\/strong><\/h2>\n
\n
\n
8 Top Tips for Mobile-First Design <\/strong><\/h2>\n
\n