Mobile Sizing

Since 2015, google has started to delist sites in searches that are not mobile friendly, making it even more imperative that you have a website that fits mobile devices. WordPress has many plugins that make this very simple. A key to having a site that works on mobile is to choose a WordPress theme that is responsive. Pretty much all new ones are – WordPress makes it easy to check your work as well.

Here are 4 rules to follow when designing a page or post that will still work for mobile or tablet screen, taken from the second video below:
Rule 1: The mobile preview
– preview pages as you develop them to avoid mistakes early. When you preview, pay attention to what happens to your menus, images, paragraphs, etc.
Rule 2: Optimal image size – don’t upload images that are bigger than you need, as even if it is shown small, it will load the full picture file and then downsize it to fit your screen. If this rule is not followed, your site may load very slowly on mobile.
Rule 3: Use margins and padding with care – around paragraphs, photos, etc. so everything doesn’t crash together. Be careful not to set them too big either.
Rule 4: Alignments versus column layouts – columns are often better for side-by-side content than left/right alignments are.

mobile fitting 2

From your dashboard, click on your site name in the red box above to go to the screen from the picture below, where you can preview your site on different sized screens.

mobile fitting 3

The buttons in the red box indicate which kind of screen you are previewing from.

Another easy way to check is to have your website open, and squish your browser very thin so that it is representative of a mobile phone. Most decent WordPress themes will be responsive and will form fit the new screen. You can obviously just use an actual mobile phone instead of this, but that isn’t so easy if the page hasn’t been published yet, and it’s not quite as quick as just doing this.

mobile fitting 1.png

When I thin out this tab of my site, I can see that the content conforms to the new shape, instead of making me need to scroll sideways to see all the content.

Additional Videos:

Tutorial on making your site mobile friendly:

Thanks to QuickRegister SEO for the video.

4 Simple rules to create perfectly responsive mobile pages:

Thanks to Thrive Themes for the video.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s