There are just a few things you need to do in order to optimize your website for mobile viewing and use. The process is simple, and just involves pasting some simple code into your website Header HTML. You’ll need to add code for (1) mobile css, (2) a meta viewport tag, and (3) apple icons. This article briefly explains each item and how to add them to the Header HTML of a HubSpot site.
Mobile CSS
Mobile CSS allows you to change the way your website is organized and displayed on mobile devices. Just as you can have a printer friendly version of your page, you can have a mobile friendly version with mobile CSS.
If your site is missing mobile css, you need to add the following line of code to the header section of your website.
Meta Viewport Tag
The meta viewport tag tells a mobile device how to orient a page when it’s loaded. It also determines if a page can be scaled larger or smaller and if it should rotate as the user rotates their mobile device.
If your site is missing a meta viewport tag, you need to add something like following line of code to the header section of your website.
Apple Icons
The iPhone and iPad both allow users to add a quick link to the desktop of their device for easy access. Defining the icon that will be displayed is a great branding opportunity, as otherwise the device will just take a screenshot of your site
If your site is missing the Apple iPhone and iPad icons, you will need to do two things. First, design a 57×57 pixel icon that you would like to use for your Apple iPhone and iPad icon, and upload it to the file manager of your website. This can be something as simple as a screenshot that you crop to the appropriate size. Second, add the following LINK element to the Header HTML of your website pointing to the new icon you created.
Related Posts
