{"id":2777,"date":"2021-04-01T20:44:18","date_gmt":"2021-04-01T09:44:18","guid":{"rendered":"http:\/\/vjdesign.com.au\/?p=2777"},"modified":"2021-07-21T19:16:06","modified_gmt":"2021-07-21T09:16:06","slug":"mobile-friendly-web-design","status":"publish","type":"post","link":"https:\/\/vjdesign.com.au\/mobile-friendly-web-design\/","title":{"rendered":"Mobile-friendly web design is crucial for online presence"},"content":{"rendered":"\n

The use of smartphones to consume data is on the rise – already more than 50%. Mobile-friendly sites have content that neatly stacks and fits the window and is easy to browse. Non-mobile-friendly sites are difficult to navigate on mobiles and require you to pinch or zoom in to read the content.<\/p>\n\n\n\n

\"Non-mobile-friendly
Google: Non-mobile-friendly sites are difficult to navigate on mobiles and require you to pinch and zoom in order to read the content. Mobile-friendly sites have content that neatly stacks and fits the window and is easy to browse.<\/figcaption><\/figure><\/div>\n\n\n\n

Why make a website mobile-friendly?<\/h2>\n\n\n\n

More of your customers (and mine) are visiting our sites from smartphones (and other smaller devices); let’s make mobile users feel like first-class citizens rather than as an afterthought.<\/p>\n\n\n\n

\"More
Google Analytics: More than 50% of my client’s users visit them via mobile.<\/figcaption><\/figure><\/div>\n\n\n\n

Use of mobile phones to consume data is on the rise and is now higher than that of desktops: <\/p>

– Mobile (52%)<\/p>

– Desktop (45%)<\/p>

– Tablets (3%)<\/p>Source: Stats Counter<\/a> (March 2020)<\/cite><\/blockquote><\/figure>\n\n\n\n

Google and other search engines place heavy emphasis on accessible and mobile-friendly sites. I test my sites on the Google Mobile-Friendly Test<\/a> site to ensure that the site is mobile friendly and easy to use on smartphones.<\/p>\n\n\n\n

\"Google
Client Site tested on Google Mobile-Friendly Test<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n

Techniques for implementing website that works well on mobiles<\/h2>\n\n\n\n

There are three techniques to implement a mobile website: responsive, dynamic or separate sites. <\/p>\n\n\n\n

Technique<\/th>Does the URL change?<\/th>Does the HTML change<\/th><\/tr><\/thead>
Responsive Design<\/strong><\/a> is when you serve the same HTML for all devices using the same URL.
It is my<\/strong> preferred approach to web design (and also Google’s<\/a>).<\/td>		No<\/td>No<\/td><\/tr>
Serve 2 different sites\/content on the same URL with different content dynamically<\/strong>: one for mobile users and another for desktop users. <\/td>No<\/td>Yes<\/td><\/tr>
Separate URLs and separate<\/strong> sites<\/td>No<\/td>No<\/td><\/tr><\/tbody><\/table>
Three techniques for implementing the mobile web design<\/figcaption><\/figure>\n\n\n\n

Mobile friendly web design at VJ Design: Responsive Design<\/h2>\n\n\n\n

All WordPress websites that I build look good and work well on all devices – this is known as responsive web design<\/a>. I also embrace Mobile First Web Design<\/strong> principles – where I design for content to look good on small devices first and adapt the layout to suit larger devices.<\/p>\n\n\n\n

\"Responsive
Responsive Web Design – content looks good and readable across devices<\/figcaption><\/figure><\/div>\n\n\n\n

Mobile-friendly WordPress web designer\/developer from Melbourne, Australia<\/h2>\n\n\n\n

I build websites that are fast loading and mobile-friendly out of the box at an affordable price. <\/p>\n\n\n\n

I am a GeneratePress<\/a> designer\/developer. It is a feature-rich, accessible, light-weight, fast-loading, SEO friendly and responsive theme. I use GeneratePress (GP) and a handful of thoroughly tested plugins to design and develop all my websites. <\/p>\n\n\n\n

The layout and typography modules in GP allow me to create mobile-friendly sites. After checking how the content looks on mobile, I can optimise it for tablet and desktops…<\/p>\n\n\n\n

\"When
Use GeneratePress for lightweight, good looking sites – responsive design<\/figcaption><\/figure><\/div>\n\n\n\n

Since the sites are built on WordPress, you can create hundreds of pages and posts on your site or add thousands of products to your online store. I will show you how. Get one of my affordable web design packages<\/a>.<\/p>\n\n\n\n

Responsive Design – Advantages<\/h2>\n\n\n\n
  1. Responsive Design provides a unified experience across all the devices: mobile, tablet and desktop<\/li>
  2. Save money – you don’t need separate sites for desktops or mobile (or apps)<\/li>
  3. It is better for your rankings on search engines. As indicated above, Google prefers responsive design<\/a> pattern<\/li>
  4. By thinking mobile-first, you eliminate all the cruft and present just the information your users need and nothing more.<\/li>
  5. Since there is no need to dynamically switch between website versions (one for mobile and another for desktop), the site loads fast. Using GeneratePress we can easily load sites in under 3 seconds (or less). <\/li>
  6. Simpler and easy to understand design patterns improve customer engagement and, leading to longer retention and therefore you have a better conversion rate. View my landing page design built with just the theme blocks (no page builder).<\/a><\/li><\/ol>\n\n\n\n

    Do I need a separate site for mobile users?<\/h2>\n\n\n\n

    No, you don’t. Responsive Design is the easiest web design pattern to implement and maintain. <\/p>\n\n\n\n

    The same site can be used on a smartphone; the layout changes to suit the smaller device. Your content will look good on any device.<\/p>\n\n\n

    \n
    \n\n
    \"Responsive
    Vitamins for all on Desktop<\/figcaption><\/figure><\/div>\n\n<\/div><\/div><\/div>\n\n
    \n\n
    \"Responsive
    Vitamins for all on mobile device<\/figcaption><\/figure><\/div>\n\n<\/div><\/div><\/div>\n<\/div>\n\n\n

    Do I need an iPhone or android app?<\/h2>\n\n\n\n

    It depends. In most cases you don’t need an app… <\/p>\n\n\n\n

    Ask yourself:<\/p>\n\n\n\n

    1. Is your website optimised for mobile? Since all the sites I build are responsive, your site is already mobile-ready.<\/li>
    2. Does your competitor have an app? Most users install and use very few apps – in particular, they focus on social media (Twitter, Facebook) or productivity (Email) apps.<\/li>
    3. Do you need to use some core functionality of a mobile device?<\/span> For example, the camera<\/li>
    4. Will your app solve a problem that your customers face?<\/li><\/ol>\n\n\n\n

      There are 2 types of mobile apps:<\/h3>\n\n\n\n
      1. A native<\/strong> app built for Android or iPhone is a heavy investment of time and energy and can cost you a fortune. <\/li>
      2. A web app<\/strong> is a cheaper alternative – this is where we just serve the responsive version of your website. It can work on any mobile device or operating system because it is delivered using a mobile browser. If you answered yes to the above 4 questions, then please contact me to build you a WordPress powered web app<\/a>.<\/li><\/ol>\n\n\n\n

        Mobile Ranking Factors – Make your SEO mobile friendly?<\/h2>\n\n\n\n

        Just make your site user friendly<\/strong>\u2026 It will be SEO friendly<\/strong>!<\/p>\n\n\n\n

        \"SEO
        Factors that make your SEO Mobile friendly<\/figcaption><\/figure><\/div>\n\n\n\n

        Good – Do more of these to make your site easy to use on a mobile device<\/h3>\n\n\n\n