1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Mobilegeddon & The Google Mobile Friendly Update: How can you fix it - A DIY tutorial

Discussion in 'Web Design' started by darkportrait, Apr 30, 2015.

  1. darkportrait

    darkportrait Jr. VIP Jr. VIP

    Joined:
    Jul 22, 2014
    Messages:
    433
    Likes Received:
    15
    Gender:
    Male
    Seeing a lot of folks worrying about Google's recent (mobile) update. So heres my two cents on fixing your site -

    First off, Responsive/Mobile-friendly - features aren't anything new. back in 2012 it was the trendy term every theme developer tagged their themes with. Its actually pretty easy to implement.

    So if you are using a recent wordpress theme. chances are you already got yourself covered. go ahead and check it here -

    Mobile Friendly Test

    Now if your site isn't mobile friendly and still on wordpress, we can try out this plugin - Wp touch - free version does the job, havent used the paid features....

    If your site includes just a few static html files, heres what you can do -
    (note some knowledge of html and css will be helpful)

    A generic site markup goes something like this -

    html
    --head
    --body
    ----div:main-wrap
    ------div:article
    ------div:sidebar

    Heres what you need to do (will explain below)-

    1) in head, add boostrap css. heres the code you need to add


    Code:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
    Example:
    Code:
    <head>
      ...
    
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
      ...
    </head>
    
    2) in div:main-wrap, add the class "row".

    Example:
    Code:
    <div id="main-wrap" class="row">
    
    3) in div:article, add the class "col-sm-8 col-xs-12"

    Example:
    Code:
    <div id="article-wrap" class="col-sm-8 col-xs-12">
    
    4) in div:sidebar, add the class "col-sm-4 col-xs-12"

    And Magic! Your page is mobile-friendly. That was easy right. Read on, for a short description of what happened here.

    If you are new to bootstrap, you might be thinking what these numbers means, read on (i will try to keep it super short)-

    bootstrap display model works like a table. First you put the elements that go side-by-side in a ROW.

    We did that in step 2. Article and Sidebar appear side-by-side. So they are placed in the same row.

    Each row can hold a most of 12-columns. Here you can adjust the space, each element takes by mentioning the number columns they cover. The classes we added in steps 3 and 4 are exactly for that purpose.

    Still we have one missing component to explore, notice the SM and MD tags.
    Bootstrap allows you to change layout based on the screen size of the user.
    So,
    Code:
    xs = extra small, generally phones
    sm = small, generally tablets
    md = medium, generally desktop
    lg = large, desktop
    so, for example,
    Code:
    col-md-8
    means
    8 columns when showing to medium sized screens(tablets)
    Note one final thing, small screens take precedence over larger screens, say if you want the display to be same for medium and large displays, you can only define the medium layout.

    You can read more about the bootstrap css here

    Hope this helps.

    If you are developer, feel free share your tips, we all can learn new things