We help IT Professionals succeed at work.

Mobile Friendly vs. Rendering Well on Mobile and Desktop

Bob Schneider
Bob Schneider used Ask the Experts™
on
Can someone comment on this topic?  What is the best way to get a website to render well on mobile devices as well as computers and also have a google "mobile-friendly" rating?  Also, is there value in having a "mobile-friendly" rating from google (SEO, etc)?

Thanks~
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Bob, the easy answer is to make your site responsive.  Essentially you are using CSS media queries to account for 3 to 4 screen sizes and use percentage in between.  

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Below will hide something like <div class="some_class">small box of data</div> when the screen goes below 800px
<style>
@media (max-width: 800px) {
  .some_class{
    display: none;
  }
}
</style>

Open in new window

You should at least read up on how media queries work.  In addition to the mozilla link these are also good sources http://www.w3schools.com/cssref/css3_pr_mediaquery.asp,

While this is the basis, it is best to use a responsive library like http://getbootstrap.com/ or http://foundation.zurb.com/.  These libraries include CSS, jquery and some widgets.  I have extensively looked at both and both are very good. Actually zurb has a lot more information on their site about responsive websites and it is a great site to learn.  For whatever reason bootstrap has been more popular and many other libraries and templates seem to use bootstrap more.  

There will be a learning curve but well worth it.
Prasadh BaapaatWeb Designer & Developer
Commented:
Scott has answered it perfectly, but I would add that going for a mobile friendly (responsive) site is now become a necessity rather than keeping it as an addon.

Google introduced a new algorithm In April 2015 and you can find more info here

As of now the update will affect the search rankings on mobile devices only, but I feel that its important for you to consider going mobile friendly with your website considering that a large number of people use mobile as primary devices to access the internet.

thanks,
Prasadh
Bob SchneiderCo-Owner

Author

Commented:
This makes a ton of sense but there is not much there from a page layout perspective.  I really want to do this correctly.  Right now I have a "three-column" site and, from what I have seen in the links above, it would be ideal to have the page "rearrange" based on screen res, right?  I found a site offering 5 keys to responsive sites but, again, it did not give me a "template" of sorts to re-design around.  Any ideas?

I also wonder about image sizes (header, backgrounds, in-line images, etc) and how they affect the rendering of the page.
Prasadh BaapaatWeb Designer & Developer
Commented:
Yes you can use bootstrap or foundation as a base and arrange your page design to make it responsive. If you can give me your site url, I will be able to help integrate your existing design into a responsive one by giving you pointers.

once I see the website, I will be in a better position to answer your questions regarding image sizes & and lots of other things.
Bob SchneiderCo-Owner

Author

Commented:
Lets start with the home page on www.pro-tree.com, and thank you!
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Bob, we can help guide you and I think that is what we have done here.  But I think writing all the code would be something to hire out for.

The first thing you need to do is get out your pen and napkin and draw out your layout for each screen resolution.   Phone, iPad, partial desktop and full desktop.  Some things on the phone you may want to hide all together and some items you just want to move to the top or bottom.

Read up on the grid http://getbootstrap.com/css/#grid and actually all of bootstrap. Study how they coded the examples http://getbootstrap.com/getting-started/#examples

The basics include a row and columns.
<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>
</div>

Open in new window


Here is a very quick layout I did using 2 columns,header an footer that could be a nice hint on what to do.  Note that the left side moves to the top.  This is because the grid is in 12 parts .I have spec'd out the left side to be 4 parts up to a small screen. After that it will go to 12 parts (full width).  The same goes for the right side.  To understand this better look at the grid.  
http://getbootstrap.com/css/#grid


<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="header" class="row">
  <div class="col-xs-12">This is my header</div> 
</div>
<div id="nav" class="row">
  <div class="col-xs-12">This is my nav</div> 
</div>
<div id="container">
 
     <div id="left" class="col-sm-4">
       <img src="http://placehold.it/350x150" class="img-responsive">
       <p>Vestibulum justo justo, laoreet quis tellus eget, sagittis condimentum lacus. Praesent et venenatis felis. Maecenas quam dolor, facilisis sed imperdiet at, efficitur vitae tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sodales tellus et diam finibus, lobortis aliquam mauris posuere. Fusce a est at diam fermentum suscipit feugiat in augue. Mauris vestibulum, orci id elementum pellentesque, dolor dui semper augue, at imperdiet mi eros at lorem. Nunc vel scelerisque nunc.</p>

<p>Vestibulum nec nisi quam. Proin ut justo lorem. Etiam volutpat neque eu ipsum placerat, sed ornare magna vulputate. Donec justo nulla, mattis eget risus at, mollis hendrerit massa. Maecenas ut est nulla. Vivamus congue gravida orci rhoncus blandit. Aenean dictum magna leo, non vulputate ipsum cursus blandit. In hac habitasse platea dictumst. Fusce laoreet a purus sed vestibulum.</p>
  </div>
  
  <div class="col-sm-8">
     <p>Vestibulum justo justo, laoreet quis tellus eget, sagittis condimentum lacus. Praesent et venenatis felis. Maecenas quam dolor, facilisis sed imperdiet at, efficitur vitae tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sodales tellus et diam finibus, lobortis aliquam mauris posuere. Fusce a est at diam fermentum suscipit feugiat in augue. Mauris vestibulum, orci id elementum pellentesque, dolor dui semper augue, at imperdiet mi eros at lorem. Nunc vel scelerisque nunc.</p>

<p>Vestibulum nec nisi quam. Proin ut justo lorem. Etiam volutpat neque eu ipsum placerat, sed ornare magna vulputate. Donec justo nulla, mattis eget risus at, mollis hendrerit massa. Maecenas ut est nulla. Vivamus congue gravida orci rhoncus blandit. Aenean dictum magna leo, non vulputate ipsum cursus blandit. In hac habitasse platea dictumst. Fusce laoreet a purus sed vestibulum.</p>
     <p>Vestibulum justo justo, laoreet quis tellus eget, sagittis condimentum lacus. Praesent et venenatis felis. Maecenas quam dolor, facilisis sed imperdiet at, efficitur vitae tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sodales tellus et diam finibus, lobortis aliquam mauris posuere. Fusce a est at diam fermentum suscipit feugiat in augue. Mauris vestibulum, orci id elementum pellentesque, dolor dui semper augue, at imperdiet mi eros at lorem. Nunc vel scelerisque nunc.</p>

<p>Vestibulum nec nisi quam. Proin ut justo lorem. Etiam volutpat neque eu ipsum placerat, sed ornare magna vulputate. Donec justo nulla, mattis eget risus at, mollis hendrerit massa. Maecenas ut est nulla. Vivamus congue gravida orci rhoncus blandit. Aenean dictum magna leo, non vulputate ipsum cursus blandit. In hac habitasse platea dictumst. Fusce laoreet a purus sed vestibulum.</p>
    
  </div>
  
 </div>
<div id="footer" class="row">
  <div class="col-xs-12">This is my footer</div> 
</div>  
</body>
</html>

Open in new window


If you don't do your napkin drawing first, you will be lost because you want to first plan out what the page will look like for each screen size.


> What is the best way to get a website to render well on mobile devices as well as computers
I think we have answered that.  For details on coding, ask a separate question for any part but just avoid asking how to code an entire page in one thread.
Web Designer & Developer
Commented:
Scott is correct, we cannot help you code an entire website, we can just guide in right direction.

To help you understand how easy it is to add bootstrap, lets look at your home page. It consists of 4 main parts, VIZ: Header, Menu, Content & footer. So if you add bootstrap here, you should have 4 rows for all 4 main parts.

so in a rudimentary way, your design can be modified using bootstrap in below way:

In the header, you have content further split into divs.... these can be your columns (1col + 11 col)

The menu can take up entire row with 12 cols

The Content will be in a row with columns like (4 col + 8 col)

The footer will go in the entire row 12 cols.

so if you want to try out a very basic modification to understand how it works, add the bootstrap.min.css to head like:
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

Open in new window


then rearrange your content into rows & columns like below:

<div class="row"> <!--header row->
      <div class="col-sm-1"></div>
      <div class="col-sm-11"></div>
</div>
<div class="row"> <!--menu row->
      <div class="col-sm-12"></div>
</div>
<div class="row"> <!--Content row->
      <div class="col-sm-4"></div>
      <div class="col-sm-8"></div>
</div>
<div class="row"> <!--footer row->
      <div class="col-sm-12"></div>
</div>

Open in new window


try it out and check out... I guess you will understand the basics of how bootstrap rows & columns work to make your site responsive.

further reading & practice will get you where you want to go.
Bob SchneiderCo-Owner

Author

Commented:
This is far more than I could have hoped for.  Once again, those of you that help on this site have gone above and beyond the call of duty.  Words can not express my appreciation enough...not just for what you have done for me but for the things I learn as a result.  Kudos!!!