Hi,
How do search engines like Google recognise that a site is a mobile site? What code should I include on my website?
Plus is the coding different? Or is it just the width of the pages that is the main difference when coding the mobile pages in HTML/CSS?
Thanks,
Matt.
Paul just posted about this and pretty much sums it up:
Coding isnât that much different. It should be a fluid layout from the get-go and if something doesnât work well in smaller widths, make a change to keep it good looking. Nothing big.
I do not want to use PHP web pages as Google finds it difficult to rank pages with a â?â in the domain name!
What do you suggest to get around this problem?
Matt.
Where did you ever get that idea? Certainly not from a reliable Google source.
I donât believe this is the case, but if youâre concerned about it use URL rewriting for all of your url parameters.
(I tried to find a SitePoint tutorial on this, but the last one was from 2002 and very long winded.)
I have found this Javascript code to detect small screens and it works! I am pretty sure you are going to tell me there are problem with using Javascript otherwise you would have suggested it to me?
I suppose one problem is I cannot redirect people to the FULL desktop site. Or is there a way to miss out this piece of Javascript if the user wishes to?
Matt.
<
script type=âtext/javascriptâ>
<
!â
if
(screen.width <= 500) {
window.location = âhttp://m.domain.comâ;
}
//â>
<
/script >
You could have a link that asks âClick here to go to mobile versionâ or something along those lines." Have that for mobile users.
Or the other way around: have a link that says âClick here to go to the Desktop version.â
You can detect screen width with CSS too you know, and itâs probably more reliable since Javascript can be turned off.
Hi Ryan,
How is it done in CSS? What is the code, please?
And if i had a link back to the Desktop Version how do you stop the CSS detecting mobile devices again?
Matt.
Mobile devices shrink down webpages to fit on their screens, so to avoid this, you need to add this in
<meta name="viewport" content="width=device-width, initial-scale=1">
Then the CSS could be something like this.
@media (max-width:575px)
{
/*this will affect 575px and down. Even on desktop (if you minimize your window enough). But this will mainlyaffect mobile and maybe some small tablets. Customize the pixel value!*/
}
This does not redirect the user to a separate mobile website, right?
So how would it work? Would I design two sites within one webpage?!?
Matt.
That would not redirect. You could make your website responsive, which is the way to go when making websites. Ideally, you wonât need to change that much about your website to make it great in mobile. Maybe make a hamburger type menu for mobile to make it easier, but if you actually code your website to be fluid and shrink down and expand as the screen changes, then media queries will be minimal.
I have a fully fledged website for hte most part here
codefundamentals.com
Actually, use this link for your testing: http://codefundamentals.com/portfolio.php
This is ALL I have in my media query
@media (max-width:575px)
{
.responsivefooter
{
width: 100%;
height: 200px;
} /*adsense*/
#container
{
max-width:95%;
min-width:initial;
padding:1px
}
#header>a
{
width: 100%;
min-width:initial;
max-width:none;
height: auto;
}
#header>a>img
{
max-height:none;
height:auto;
}
ul#navigation
{
float:none;
min-width:initial;
width:100%;
}
.portfolio #mainContent ul li
{
float:none;
text-align:center;
width:auto;
}
body #footer>div
{
margin:0!important;/*!important is for the .links so I don't have to add rules*/
float:none!important;
width:auto!important;
padding:5px;
overflow:hidden;
border-bottom:1px solid #666;
}
.followFooter a
{
clear:none;
margin-right:20px;
}
.followHeader a
{
margin-left:1px;
}
.followHeader
{
clear:none;
float:left;
min-width:initial;
}
.search
{
float:left;
margin-left:5px;
}
.search input
{
width:100px;
}
.followHeader img, .followFooter img
{
width:40px;
height:40px;
}
ul#navigation li:first-child
{
display:none;
}
ul#navigation li
{
width:16.66%;
}
#lightbox img
{
max-width:100%;
}
#sidebar
{
display:none;
}
#main
{
background-image:none;
}
#mainContent
{
border:0;
border-top:1px solid transparent;
left:0;
position:static;
padding:0;
margin:0;
}
.portfolio ul li
{
width:auto;
margin:0;
}
.portfolio ul li a img
{
width:auto;
}
#footer .links a:active
{
background-color:#38BCD9;
color:#000;
}
#footer input[type=submit]
{
vertical-align:middle;
}
}
If you shrink it to mobile, yo uwill notice the header changes, and the footer. I also remove the left navigation. Thatâs 90% of my responsive code right there. Very simple to do. So now it looks like I have two sites but in reality the HTML is one single webpage and then some CSS to style it to my liking for mobile.
I am trying to workout if you could have less clickable links in the navigation bar using this Media option in CSS?
How would I code it to say if the screen size is larger the 575px then show the larger navigation bar?
Matt.
Well have it shown by default and then in the media query (since it targets 575 and below) just give the navigation a display:none or something.
Letâs say on my codefundamentals.com page. Letâs look at the top menu.
Letâs say on mobile, I wanted the Portfolio link to go away. The portfolio link has a class on it already if I remember correctly so I donât need to do anything there.
In my media query, I would then target the .portfolio link for 575 and blow, and just dispay:none; that. Does that make sense?
If you wanted TWO navigation menus (one specifically for mobile and one specifically for large) then give the navigation menus a class each, and do the same thing. Hide one on hte media query etc.
OK.
I have managed to code in the @media that it gets rid of the main navigation bar. I have also coded it to say add a smaller navigation bar.
However, my problem now is if the screen is larger than 575px it is showing both what is in the @media and the larger navigation bar and it is not displaying properly (CSS is not applied).
On mobile devices it works fine though, as I said. So how do i code it to say if the screen is larger that 575px the smaller navigation bar is not there but the large one is? What are I missing?
Matt.
Post the HTML for the large and small navigation bar. And then post the CSS that you believe should be hiding the small navigation bar for small screens. Also give the media query code taht hides the big/shows the small.
Do not leave any of the above requests out please 
Sorry to disobey you but I am only including the HTML. I have sorted the problem apart from this HTML. The problem is in the @media the styling is applied. When the screen size is larger that 575px it is only the styling that is not applied (but the small navigation bar still shows without the styling). I have tried adding display:none; to the main CSS but then it never shows (i.e⌠the @media does not override the main CSS styling).
Any ideas? Basically when the screen is bigger that 575px the small navigation bar displays as well as the bigger navigation bar but the small navigation bar has no styling. But the small navigation should not be there at all.
<div id="navigation1">
<div id="smallmenu">
<ul>
<li><a href='iphone.htm'>Apple iPhone</a>
<ul>
<li><a href='iphone-6.htm'>iPhone 6</a></li>
<li><a href='iphone-5.htm'>iPhone 5</a></li>
<li><a href='iphone-4.htm'>iPhone 4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
Where is your big menu? Thatâs just the small menu? I donât see any .large_menu class or anything like that.
Nor did you post any CSS for me to look at.
You should see the problem using this code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/mobilestyles.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div id="navigation1">
<div id="smallmenu">
<ul>
<li><a href='iphone.htm'>Apple iPhone</a>
<ul>
<li><a href='iphone-6.htm'>iPhone 6</a></li>
<li><a href='iphone-5.htm'>iPhone 5</a></li>
<li><a href='iphone-4.htm'>iPhone 4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigation">
<div id="menu">
<ul>
<li><a href='iphone.htm'>Apple iPhone</a>
<ul>
<li><a href='iphone-6.htm'>iPhone 6</a></li>
<li><a href='iphone-5.htm'>iPhone 5</a></li>
<li><a href='iphone-4.htm'>iPhone 4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
</div>
</div>
<p>Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. </p>
<p> </p>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
h1{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h2{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h3{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h4{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h5{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h6{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h1, h2, h3, h4, h5, h6{
margin-top:20px;
margin-bottom:10px;
}
@media (max-width:575px)
{
#navigation1{
width: 300px;
float: left;
}
#smallmenu{
margin:0;
padding:0;
}
#smallmenu ul{
margin:0;
padding:0;
line-height:27px;
}
#smallmenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#009900;
}
#smallmenu ul li a{
background: url(../images/navigation/line.gif) bottom right no-repeat;
text-align:center;
font-family:"Helvetica";
text-decoration:none;
height:27px;
width:139px;
display: block;
color:#FFF;
border:none;
}
#smallmenu ul ul{
position:absolute;
visibility:hidden;
top:27px;
}
#smallmenu ul li:hover ul{
visibility:visible;
top:27px;
}
#smallmenu li:hover{
background:grey;
}
#smallmenu ul li:hover ul li a:hover{
background:#009900;
color:white;
text-decoration:underline;
}
#navmenu{
display:none;
margin:0;
padding:0;
}
#navigation{
display:none;
margin:0;
padding:0;
}
/*this will affect 575px and down. Even on desktop (if you minimize your window enough). But this will mainlyaffect mobile and maybe some small tablets. Customize the pixel value!*/
}
body {
max-width: 1024px;
font-family: Arial, Helvetica, sans-serif;
font-size:87.5%;
background-image:url('../images/navigation/wallpaper.gif');
}
#container {
width:975px;
margin:0 auto;
padding:5px;
border:1px solid #cccccc;
background:#ffffff;
}
#navigation{
width: 970px;
float: left;
}
#menu{
margin:0;
padding:0;
}
#menu ul{
margin:0;
padding:0;
line-height:27px;
}
#menu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#009900;
}
#menu ul li a{
background: url(../images/navigation/line.gif) bottom right no-repeat;
text-align:center;
font-family:"Helvetica";
text-decoration:none;
height:27px;
width:139px;
display: block;
color:#FFF;
border:none;
}
#menu ul ul{
position:absolute;
visibility:hidden;
top:27px;
}
#menu ul li:hover ul{
visibility:visible;
top:27px;
}
#menu li:hover{
background:grey;
}
#menu ul li:hover ul li a:hover{
background:#009900;
color:white;
text-decoration:underline;
}
Your mobile media query needs to be after your large desktop rules. Otherwise it wonât overrule the large desktop rules since you use the same specificity.
<!DOCTYPE HTML>
<html>
<head><link href="css/mobilestyles.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
<style>
@charset "UTF-8";
/* CSS Document */
h1{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h2{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h3{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h4{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h5{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h6{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h1, h2, h3, h4, h5, h6{
margin-top:20px;
margin-bottom:10px;
}
body {
max-width: 1024px;
font-family: Arial, Helvetica, sans-serif;
font-size:87.5%;
background-image:url('../images/navigation/wallpaper.gif');
}
#container {
width:975px;
margin:0 auto;
padding:5px;
border:1px solid #cccccc;
background:#ffffff;
}
#navigation{
width: 970px;
float: left;
}
#navigation1
{
display:none;
}
#menu{
margin:0;
padding:0;
}
#menu ul{
margin:0;
padding:0;
line-height:27px;
}
#menu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#009900;
}
#menu ul li a{
background: url(../images/navigation/line.gif) bottom right no-repeat;
text-align:center;
font-family:"Helvetica";
text-decoration:none;
height:27px;
width:139px;
display: block;
color:#FFF;
border:none;
}
#menu ul ul{
position:absolute;
visibility:hidden;
top:27px;
}
#menu ul li:hover ul{
visibility:visible;
top:27px;
}
#menu li:hover{
background:grey;
}
#menu ul li:hover ul li a:hover{
background:#009900;
color:white;
text-decoration:underline;
}
@media (max-width:575px)
{
#navigation1{
width: 300px;
float: left;
display:block;
}
#smallmenu{
margin:0;
padding:0;
}
#smallmenu ul{
margin:0;
padding:0;
line-height:27px;
}
#smallmenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#009900;
}
#smallmenu ul li a{
background: url(../images/navigation/line.gif) bottom right no-repeat;
text-align:center;
font-family:"Helvetica";
text-decoration:none;
height:27px;
width:139px;
display: block;
color:#FFF;
border:none;
}
#smallmenu ul ul{
position:absolute;
visibility:hidden;
top:27px;
}
#smallmenu ul li:hover ul{
visibility:visible;
top:27px;
}
#smallmenu li:hover{
background:grey;
}
#smallmenu ul li:hover ul li a:hover{
background:#009900;
color:white;
text-decoration:underline;
}
#navmenu{
display:none;
margin:0;
padding:0;
}
#navigation{
display:none;
margin:0;
padding:0;
}
/*this will affect 575px and down. Even on desktop (if you minimize your window enough). But this will mainlyaffect mobile and maybe some small tablets. Customize the pixel value!*/
}
</style>
</head>
<body>
<div id="navigation1">
<div id="smallmenu">
<ul>
<li><a href='iphone.htm'>Apple iPhone</a>
<ul>
<li><a href='iphone-6.htm'>iPhone 6</a></li>
<li><a href='iphone-5.htm'>iPhone 5</a></li>
<li><a href='iphone-4.htm'>iPhone 4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigation">
<div id="menu">
<ul>
<li><a href='iphone.htm'>Apple iPhone</a>
<ul>
<li><a href='iphone-6.htm'>iPhone 6</a></li>
<li><a href='iphone-5.htm'>iPhone 5</a></li>
<li><a href='iphone-4.htm'>iPhone 4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</ul>
<ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='ipad.htm'>Apple iPad</a>
<ul>
<li><a href='ipad-air-2.htm'>iPad Air 2</a></li>
<li><a href='ipad-air.htm'>iPad Air</a></li>
<li><a href='ipad-mini-3.htm'>iPad mini 3</a></li>
<li><a href='ipad-mini-2.htm'>iPad mini 2</a></li>
<li><a href='ipad-mini.htm'>iPad mini</a></li>
</ul>
</li>
</ul>
</div>
</div>
<p>Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. Mobile site. </p>
<p> </p>
</body>
</html>
OK - problem now is it works when resizing on a desktop but on my mobile device (iPhone4 and BlackBerry Z10) it shows the large screen version!?