• 0

How best to make a website mobile friendly?


Question

Hi everyone.

 

I have an html / css website that we like a lot, but I want to add mobile support to it.  As I've never done this before, I wanted to ask the forum for some assistance with how best to do that.

 

Would I do this with a 'mobile.css' or would I need to do something more?

 

As I know that Google just made a change to their crawler that looks for mobile friendly websites, I want to make sure that anything that I do also is in line with their expectations so that they see that it is mobile friendly as well.

 

I appreciate any help that I receive on this, as I want to get support for mobile devices up and running.

 

Thanks for the help,

Link to comment
Share on other sites

21 answers to this question

Recommended Posts

  • 0

You should look into media queries.

 

Or, you could convert your site to use Bootstrap, which does all of the hard work for you. Though, I find bootstrap's library and syntax too bloated for my tastes.

 

Media queries don't require you to do any sub domain or JavaScript agent detection nonsense. As long as you have proper separation of concerns between your content and design mark-up, it shouldn't be too hard to add mobile support to your site.

Link to comment
Share on other sites

  • 0

Unless the mobile site is broken, then what Google is doing won't hurt. It's only if the desktop site does a broken redirect to the mobile site that it'll hurt (e.g. "example.com/article" redirects to "m.example.com/" instead of the mobile variant of the original page) And if you're doing a responsive site that it won't change anything for Google, they're only doing the mobile crawling because so many sites (like Twitter) insist on doing redirects to mobile variants instead of just doing it properly.

You will have to change a fair bit of the CSS for your site, not stuff like colours or styling, but making sure the site that used to go no thinner than 960px, can now handle going down to like 320px (And the devtools for most browsers have live updating test environments for that, so you can see how your existing site handles it).

Link to comment
Share on other sites

  • 0

If you REALLY want to go mobile.  I suggest looking into bootstrap.  It's crazy simple for the most part.  Like you have built in sizing options and such it's pretty slick.


ie)
 

<div class="container">
  <div class="col-md-6">
      If this div is on a medium screen or larger, it will fill HALF the container.  If it is on anything smaller.. it will take up the whole screen.
  </div>
</div>
Link to comment
Share on other sites

  • 0

Best way is to use media queries to adjust the layout on different screen sizes.

 

Google's algorithm is sh*te though, reports a few sites i've looked at recently as mobile friendly, but weren't. 

Link to comment
Share on other sites

  • 0

Thank you everyone for your help.  I had heard of media queries but wasn't very familiar with them.  I hadn't heard of bootstrap at all, so I will definitely take a look at that to see what that's about.

 

What about 'responsive design'?

 

I've been reading up some about that.  I've never done it, but it appears that it would make sense...  It looks like, though I would have to redo the website completely, it does everything for you...

 

I'm not sure which is better or honestly what Google is looking for.  I saw the comment about the algorithm they're using being rather poor, so I want to make sure that they like whatever it is that I do...  lol

Link to comment
Share on other sites

  • 0

What about 'responsive design'?

 

I've been reading up some about that.  I've never done it, but it appears that it would make sense...  It looks like, though I would have to redo the website completely, it does everything for you...

That's where the media quesries come in, combined with a meta viewport tag.

<meta name="viewport" content="initial-scale=1">
That tag will ready your site for responsiveness.

Stick that tag in and then shrink your browser down to mobile sizes and this should give you an idea of what you're actually facing.

Sometimes the code already in place will flex well, sometimes you'll be knee deep in changes. Never know till you try.

If you attach a separate style sheet to the head, then you can easily just comment the meta tag and mobile css out whilst your not working on it, and the visitors won;t see any difference.

Got a link?

Link to comment
Share on other sites

  • 0

That's where the media quesries come in, combined with a meta viewport tag.

 

<meta name="viewport" content="initial-scale=1">
That tag will ready your site for responsiveness.

Stick that tag in and then shrink your browser down to mobile sizes and this should give you an idea of what you're actually facing.

Sometimes the code already in place will flex well, sometimes you'll be knee deep in changes. Never know till you try.

If you attach a separate style sheet to the head, then you can easily just comment the meta tag and mobile css out whilst your not working on it, and the visitors won;t see any difference.

Got a link?

 

Thank you for that.  I just tried that on a copy of one of my pages, and it looks like I'm knee deep in changes... 

 

The web domain is www.disasterblaster.com if you'd like to see it for yourself.  I would probably take this opportunity to make some other changes, but due to the size of the site it's not something I'm looking forward to...

Link to comment
Share on other sites

  • 0

Thank you for that.  I just tried that on a copy of one of my pages, and it looks like I'm knee deep in changes... 

 

The web domain is www.disasterblaster.com if you'd like to see it for yourself.  I would probably take this opportunity to make some other changes, but due to the size of the site it's not something I'm looking forward to...

Yep, looks like you've actually got quite a bit to do. I'd start of by making the main container flexible and then working my way down.

Set the main container to a width of 100% and a max-width of what ever it is now.

The main problem i see at that link is there's quite a few inline styles in place that will cause a bit of a headache.

Link to comment
Share on other sites

  • 0

Your best option is to rebuild your website around a responsive framework, if you just want a barebones then go with Skelton CSS.

 

If you want to give your website a full modern makeover go with Bootstrap, it has components for almost all areas of a website with responsiveness baked right in.

Link to comment
Share on other sites

  • 0

 

If you REALLY want to go mobile.  I suggest looking into bootstrap.  It's crazy simple for the most part.  Like you have built in sizing options and such it's pretty slick.

ie)

 

<div class="container">
  <div class="col-md-6">
      If this div is on a medium screen or larger, it will fill HALF the container.  If it is on anything smaller.. it will take up the whole screen.
  </div>
</div>

 

Don't forget the row :D

  • Like 2
Link to comment
Share on other sites

  • 0

Bootstrap is by far the most popular choice. There's other alternatives such as Foundation, etc but you will probably be much better of going with Bootstrap simply due to it's popularity and ecosystem...

  • Like 1
Link to comment
Share on other sites

  • 0

if you want to learn real code,

the correct answer should be by learning css, take this examples

 

@media (max-width: 1024px) {

div { width:xxx  }

}

 

@media (min-width: 1367px) and (max-width: 1440px) {
div { width:xxx }
}

 

 

kind of

Link to comment
Share on other sites

  • 0

In general I'd say not to rely on frameworks, it's ok to use them but you need a understanding of exactly how they work (I've seen a few popular frameworks that have issues because even their devs are just copying or repeating things they saw once without understanding why you should do it)

A fair few of the grid based frameworks are dumb because they're using tricks and hacks to accomplish what they're trying to do, so upgrading to a proper grid system would require half the HTML to be re-written, avoiding that was the whole reason to use CSS in the first place.

Link to comment
Share on other sites

  • 0

RESS as in this page, or this page? Because both have some issues. First page suggests tailoring your HTML to the device type loading the page, which is the exact opposite of what responsive design is (And the dev can't know how the user on the device is using their site, somebody screen mirroring their mobile to a TV probably doesn't want the mobile view). Second one is a generic "site optimization" service, which doesn't really have anything to do with mobiles (It's more about how bad HTTP 1.1 is at handling resource loads, HTTP 2 ifxes that and works across mobiles and desktops, etc.)

  • Like 1
Link to comment
Share on other sites

  • 0

As many member have suggested earlier, you can rely on CSS frameworks like bootstrap, foundation etc. However, since you have not prepared your website for mobile responsiveness at the time of designing, there will plenty of changes required in both CSS as well as the HTML. In this case, starting a fresh design with mobile first layout is worth considering. Go for Bootstrap or Foundation. Bootstrap is quite popular too.

But learning media query is also very essential and will come handy while working on your current and future projects.

Link to comment
Share on other sites

  • 0

I just use duda mobile since it helps offload mobile traffic off the main server.

Link to comment
Share on other sites

  • 0

To make your web site mobile friendly you need to include bootstrap in your website design. now every web designer uses bootstrap for making responsive web design. it is very handy method. 

Using bootstrap means a whole rewrite since you'll be using bootstrap as a framework, instead it's more realistic to make a existing site mobile friendly by using media-queries. Also if you want to use a framework you can consider a lot of frameworks these days besides the(in my opinion) ugly bootstrap, as example there's material design light as a new lightweight framework.

Link to comment
Share on other sites

  • 0

Using bootstrap means a whole rewrite since you'll be using bootstrap as a framework, instead it's more realistic to make a existing site mobile friendly by using media-queries. Also if you want to use a framework you can consider a lot of frameworks these days besides the(in my opinion) ugly bootstrap, as example there's material design light as a new lightweight framework.

Agree with this; as it's an existing site, media queries are the way to go. Adding a framework to an existing design would likely be difficult and also add significant overhead to downloading and rendering the page. Also I do find I can generally tell which framework a site is using nowadays easily; they all have the same look and feel. Boring.

Link to comment
Share on other sites

This topic is now closed to further replies.