[av_textblock size=” font_color=” color=”]
With Google prioritizing mobile-first search results in its future indexing strategy, it is more important than ever to be familiar with design techniques for mobile-first web design. While there are many interesting and offbeat techniques to stand out in mobile search results, let us review some of the fundamental principles and techniques used in mobile-first web design and mobile-friendly SEO.
[/av_textblock]
[av_heading heading=’Mobile-First Web Design Strategies’ tag=’h3′ style=” size=” subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=”][/av_heading]
[av_textblock size=” font_color=” color=”]
The main strategies used when building a static website or dynamic web application that is accessible on both mobile and desktop are responsive design, dynamic serving, and separate websites. Responsive design uses a single page on a single URL that adjusts its layout based on the device, typically with CSS either by using CSS media queries to determine screen size, or a responsive CSS grid layout framework that adjusts based on browser window size. Dynamic serving uses a single URL that serves two different versions of a page, usually by using server-side scripting to insert a Vary: HTTP header and setting up the content to load dynamically after detecting user-agent, or else by checking the screen size directly before loading the DOM. Older websites may also redirect to a separate URL specially for mobile, which by convention usually uses a m. prefix before the domain, e.g. https://m.www.getfoundquick.com. Each of these techniques has their advantages and disadvantages during the design phase and search engine optimization phase.
[/av_textblock]
[av_heading heading=’Responsive Design’ tag=’h3′ style=” size=” subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=”][/av_heading]
[av_textblock size=” font_color=” color=”]
Responsive design is often the quickest, easiest, and lowest cost method to achieve multi-platform accessibility because only one version of the content needs to be prepared, with CSS used to adjust the layout based on screen size. If you use a responsive WordPress theme, for example, your theme designer likely used responsive design as the most intuitive strategy for building their theme. Responsive design also has the advantage of being very SEO-friendly, as there is no risk of duplicate content penalties for incorrect usage of canonical tags. However, responsive design has some limitations. For example, your site speed can be affected if your layout is complex, as the user is required to load extremely large stylesheets or JavaScript files. Responsive design also can have risks of bugs in unusually sized phones or tablets, which could potentially lead to a poor user experience.
If you want to use responsive design on your current desktop site to make layout adjustments for mobile, usually CSS Media Queries are the easiest way to achieve this. Here is an example of a CSS Media Query that wraps a CSS class in a query that will only display when viewed on screens smaller than a certain number of pixels:
@media screen and (max-width: 768px) {
#sample-mobile-class {
background-image:url('smaller-version-of-image.jpg');
}
} [/av_textblock]
[av_heading heading=’Dynamic Serving and Mobile-Only Sites’ tag=’h3′ style=” size=” subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=”][/av_heading]
[av_textblock size=” font_color=” color=”]
The alternative to responsive design is to completely redesign each webpage for both mobile and desktop. You can either serve these pages over the same URL using the dynamic serving technique, or simply have the mobile version redirect to a separate URL entirely. This strategy has the advantage of letting a user access specially-designed mobile version of sites that are completely optimized for viewing on their device. However, one disadvantage for this strategy should be obvious: content design will take nearly twice the amount of time, as each individual page accessible on both devices needs to be designed twice or more. SEO faces challenges as well, as you will need to ensure that all pages have corresponding canonical tags when duplicate content is present.
To set up dynamic serving, typically you will need to use server-side scripting or edit your .htaccess file.
[/av_textblock]