Simple Steps Make Website Mobile Friendly (Responsive Design)?

I have finally make my site: steakovercooked.com mobile user friendly and thus all web pages at all my 6 domains so far are qualified for user-mobile friendly.

The mobile user friendly now is a factor in ranking e.g. Google search engines tend to promote the sites that pass the mobile-user-friendly test.

mobile-friendly

Here are the steps to make mobile user friendly, also known with the Responsive CSS Design.

Clean up inline CSS in the HTML tags

Inline CSS in the HTML tags are bad, since they mix the presentation and HTML, for example,

1

<div style='color:red'>

<div style='color:red'>

The style is defined directly in the HTML div tag, which is not possible to change using external stylesheets.

Don’t use specified/fixed width pixels

If you define something like e.g. width:900px, it is likely that it is not mobile friendly. You can replace this with a percentage e.g. 30%. Smaller pixels are less likely to be a problem e.g. icons are fine in small screen resolutions. Just imagine, the smallest screen width is 300 pixels (roughly), so you don’t want any of your HTML elements to be wider than that.

Put the following inside the head tag

1
2

<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name=applicable-device content="pc,mobile">

<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name=applicable-device content="pc,mobile">

Images/Tables are the worst

Tables are worst for Responsive design, so you might need to replace them with simple div elements. Images should be specified with the following max-width style e.g.

1

img { max-width: 90%; }

img { max-width: 90%; }

That is it, no complex stuffs! Please note that a mobile user friendly page is not the same as AMP (Accelerated Mobile Pages).

–EOF (The Ultimate Computing & Technology Blog) —