Make a custom html site mobile friendly

qlithe

qlithe

Supreme Member
Joined
Feb 14, 2012
Messages
1,252
Reaction score
288
So I have made my own custom shop from scratch (html/css/php/mysql), which is working great

But I feel like my placement in the serps isnt exactly in line with the amount of SEO I've done

I realized that compared to all the other results for my keywords, I'm the only one missing the "mobile friendly" tag

How do I go about achieving that? What exactly defines a site as "mobile friendly"?
 
Advertise on BHW
Using tools like "test my site with google", "mobiready" can help you figure out whats going wrong when it comes to mobile.
 
And how exactly do I tell other devices to use another menu for example? I mean html/css/php-wise
 
Your have to use php to do that .....

Use google million examples geo
 
@qlithe Use CSS media queries. A media query determines the size of the viewport and then loads a set of css specifically for that width.

There are two kinds of mobile designs - responsive and adaptive

Responsive - When you utilize CSS media queries and load css based on the width of the viewport. Which is the most common and acceptable standard.

Adaptive - When you determine the device server side and load a version of your site adapted to that device. m.facebook.com is an example of adaptive design.

For your shop, using media queries would be your best option.
 
I managed to solve it quite easily.. i thought

I simply added:
Code: 
<meta name="viewport" content="width=device-width, initial-scale=1">

And when I check the site with my phone, it works great, both in landscape and portrait

But when I check my site with googles "mobile friendly"-tool it's showing the landscape version in portrait view, making it zoomed-in and giving me the error "content wider than screen"

It's weird, because when I check it on my own, its all looking good
 
This is not a solution, you do need to use media queries for this.
 
I personally like to let a library handle CSS media queries.
There are plenty of solutions found in e.g. Bootstrap, 960 grid system and Pure CSS.
You can Google CSS responsive utilities to find more.
 
You should check out bootstrap, and view their source code. Find out how they "manage" viewports. At least it's a start.
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top