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

Make a custom html site mobile friendly

Discussion in 'Web Design' started by qlithe, Jul 22, 2016.

  1. qlithe

    qlithe Power Member

    Joined:
    Feb 14, 2012
    Messages:
    657
    Likes Received:
    96
    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"?
     
  2. leo29

    leo29 Junior Member

    Joined:
    Jun 23, 2014
    Messages:
    128
    Likes Received:
    17
    Gender:
    Male
    Using tools like "test my site with google", "mobiready" can help you figure out whats going wrong when it comes to mobile.
     
  3. redarrow

    redarrow Elite Member

    Joined:
    Apr 1, 2013
    Messages:
    4,372
    Likes Received:
    998
    • Thanks Thanks x 1
  4. qlithe

    qlithe Power Member

    Joined:
    Feb 14, 2012
    Messages:
    657
    Likes Received:
    96
    And how exactly do I tell other devices to use another menu for example? I mean html/css/php-wise
     
  5. redarrow

    redarrow Elite Member

    Joined:
    Apr 1, 2013
    Messages:
    4,372
    Likes Received:
    998
    Your have to use php to do that .....

    Use google million examples geo
     
  6. redarrow

    redarrow Elite Member

    Joined:
    Apr 1, 2013
    Messages:
    4,372
    Likes Received:
    998
  7. BlogPro

    BlogPro Power Member

    Joined:
    Apr 23, 2012
    Messages:
    521
    Likes Received:
    451
    @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.
     
    • Thanks Thanks x 1
  8. qlithe

    qlithe Power Member

    Joined:
    Feb 14, 2012
    Messages:
    657
    Likes Received:
    96
    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
     
  9. _claps

    _claps Newbie

    Joined:
    Jul 28, 2016
    Messages:
    5
    Likes Received:
    0
    Gender:
    Male
    This is not a solution, you do need to use media queries for this.
     
  10. Grozzy

    Grozzy Newbie

    Joined:
    Jan 1, 2013
    Messages:
    17
    Likes Received:
    13
    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.
     
  11. randyman

    randyman Jr. VIP Jr. VIP

    Joined:
    May 13, 2014
    Messages:
    147
    Likes Received:
    56
    You should check out bootstrap, and view their source code. Find out how they "manage" viewports. At least it's a start.