[Basics of a mobile website for SMBs] 2. Bring it in: Viewports, zoom and plugins

TL;DR

Learn to optimize mobile websites for better user experience and search ranking.

Transcript

Hello, good afternoon. My name is [INAUDIBLE]. I'm from the Google Search Quality Team, and welcome to this week's installment of basics of a mobile website for SMBs. This is a series of four presentations over the month of March, where we hope we'll be able to give you quick, actionable tips for you who probably own a website for a small medium bu... Read More

Key Insights

• The importance of mobile-friendly websites is emphasized due to an upcoming algorithm change that will consider mobile-friendliness as a ranking factor in search results.
• Viewports are crucial for mobile web design as they instruct browsers how to display web pages on mobile devices, preventing the need for users to zoom excessively.
• Fixed width elements can hinder mobile-friendliness; using percentage-based widths or media queries can enhance adaptability across devices.
• Avoid using unsupported plugins like Flash on mobile websites to ensure all users can access content without errors.
• Responsive design allows a single webpage to adapt to various devices, reducing the need to maintain separate desktop and mobile sites.
• Using CSS media queries can dynamically adjust styles based on device properties, improving user experience without altering desktop site design.
• Testing websites using Google's Mobile-Friendly Test and PageSpeed Insights can identify areas for improvement in mobile optimization.
• Community resources and forums are available for additional support in implementing mobile-friendly web practices.

Questions & Answers

Q: What is the significance of the viewport in mobile web design?

The viewport is a critical component in mobile web design as it tells the browser how to display a webpage on mobile devices. Without a viewport, browsers may render pages at desktop screen widths, causing users to zoom excessively to view content, leading to a poor user experience.

Q: How can fixed width elements affect mobile-friendliness?

Fixed width elements can negatively impact mobile-friendliness by not accommodating the narrower views of mobile devices. This can result in users needing to scroll sideways to view content. Using percentage-based widths or CSS media queries can help make designs more adaptable across various devices.

Q: Why should unsupported plugins be avoided on mobile websites?

Unsupported plugins, like Flash, should be avoided because they can prevent users from accessing content on mobile devices. Many mobile browsers do not support certain plugins, leading to a poor user experience and potentially driving users away from the site.

Q: What are the benefits of using responsive design for mobile websites?

Responsive design allows a single webpage to adapt to different devices, eliminating the need to maintain separate desktop and mobile sites. This approach simplifies management, reduces costs, and ensures a consistent user experience across all devices.

Q: How can CSS media queries improve mobile web design?

CSS media queries enable dynamic style adjustments based on device properties, such as screen width. This allows web designers to tailor the appearance and functionality of a site for different devices without altering the desktop version, enhancing user experience on mobile devices.

Q: What tools are recommended for testing mobile website optimization?

Google's Mobile-Friendly Test and PageSpeed Insights are recommended tools for testing mobile website optimization. These tools provide insights into areas that need improvement, helping ensure websites are user-friendly and perform well in search rankings.

Q: What resources are available for additional support in mobile web design?

Google offers community resources and forums where webmasters and developers can seek advice and support in implementing mobile-friendly web practices. These platforms provide a space for collaboration and sharing of best practices among industry professionals.

Q: How does the upcoming algorithm change affect mobile search rankings?

The upcoming algorithm change will consider mobile-friendliness as a ranking factor in search results. Websites that are optimized for mobile devices are likely to rank higher in search results, emphasizing the need for businesses to ensure their sites provide a good mobile user experience.

Summary & Key Takeaways

• The presentation focuses on optimizing mobile websites for small and medium businesses, highlighting the importance of viewports, zoom, and plugins. It prepares businesses for an algorithm update that will factor mobile-friendliness into search rankings.

• Viewports are essential in mobile web design, preventing excessive zooming by adjusting page display to device width. Fixed width elements should be avoided in favor of percentage-based or media query adjustments for better adaptability.

• Unsupported plugins, such as Flash, should be avoided on mobile sites to ensure accessibility. Responsive design is recommended for maintaining a single adaptable site, and testing tools like Google's Mobile-Friendly Test can guide optimization efforts.