Updating my Website for Mobile

[TravG]

I want to update my main website so it is mobile friendly but unsure which way to go. I do not want the site to be down so I do not lose rankings or money.

Currently the website is built using Microsoft Expression Web. I really do not know what all would be involved to make the current website mobile friendly but I assume there is a way it can be done. Now if you view the website via a phone, it looks OK, it is just to small in certain areas. I am also using an iPhone which has a small screen anyway, but I would like Google to recognize that the site is mobile friendly.

In webmaster tools I have done some of the suggestions they offer in the "Mobile Usability" section but honestly a lot of that is over my head. I would need to do a lot of research or hire someone if I were to complete that. If I were to get the website to not have any errors when I view the mobile usability tab, would it then be considered mobile friendly by Google?

I guess the other option would be to transfer it over to WordPress using a mobile friendly theme, but that seems like it would be a lot of work.

So I guess my question is - if I were to fix all the errors suggested in the mobile usability section in Webmaster Tools, would the website be considered mobile friendly?

And two, do you think that is the best way to accomplish this, or should I take the time to transfer it over to WordPress and do it that way?

The website is xwww.onlineunitedstatescasinos.comx if anyone can take a look.

Thanks!

[casinoplanet]

I'm not familiar with Expression Web, I use Dreamweaver, but I agree it should be possible to make it mobile friendly, but it's a lot of work. Most important is that the width of all layout containers have to be set to percentage. Max-width in pixels can be used though. Use float to align columns and media queries in the css file to show/hide certain elements, like hiding the sidebar when screensize is below a certain width.
I also suggest to switch to HTML5 and ditch XHTML 1.0 protocol.

Switching to a responsive Worpress theme is probably the "easiest" solution, but you'll have to redirect all your old pages to the new ones.

[dfiocch]

CSS media queries.
It's the best, quick (quicker than others) and affordable solution.
Avoid to use "resizers" built with Javascript, Jquery etc...

[Alex911]

I use google mobilizer and google speed test for optimization.

[Storebuilder]

There are a few mobile friendly expression web templates available so maybe that is a first avenue to explore?

It's a nice looking site so maybe converting it into wordpress with a responsive theme is the second option. Although it seems like a big job having the content already done is the major part.

I would convert to wordpress and 301 redirect your URL's in .htaccess file.

Although having just looked at your site on an Ipad (which looks great) and a Sony Xperia (not so good but still scaleable) take your time.

I've not seen an Expression website before (if I knew it) but this seems really fast and responsive.

[TravG]

Thanks everyone for the responses. After doing a little research I am just going to make the current site mobile friendly. Since I have a "master" page it wont be to terribly time consuming with using the css files. Converting to WordPress would be a major job I think.

One question I do have if anyone knows, because sizing the elements of the web pages is the main job, I know I have to use percentages so it appears correctly using a mobile but what do I use for padding and margins? For large things using a percentage is not a problem but when I want say padding of 10px I wouldn't think using 1.65% or something like that would be the right thing to do.

Also if anyone knows off the top of their head, because I am going to make the sidebar appear at the bottom, when calculating the percentages do I use the size of the website with or without the side? For example the entire website is 1000px. The sidebar is 300px and main content section is 700px. If I have something that is half of the content do I use 50% or 35%? Other words do I use 1000px or 700px for the calculation.

Thanks again!

[sweetbet]

After making most of my sites mobile friendly, they dropped in the serps and many have not recovered. If you must make your site mobile friendly, (a) try if possible to maintain the current file structure, and (b) use 301 redirects to redirect old pages to new pages.

[TravG]

After making most of my sites mobile friendly, they dropped in the serps and many have not recovered. If you must make your site mobile friendly, (a) try if possible to maintain the current file structure, and (b) use 301 redirects to redirect old pages to new pages.

That isnt good news. How did you do it? Did you change platforms?

Actually the way I am going to do it - pages will not change as far as structure. All the changes I will be making will be only to the css files. The only change I will be making to the actual pages is adding a viewport meta tag in the head section. Hopefully by going this route it wont hurt anything. It shouldnt as the content isnt changing nor is file structure.

[casinoplanet]

Thanks everyone for the responses. After doing a little research I am just going to make the current site mobile friendly. Since I have a "master" page it wont be to terribly time consuming with using the css files. Converting to WordPress would be a major job I think.

One question I do have if anyone knows, because sizing the elements of the web pages is the main job, I know I have to use percentages so it appears correctly using a mobile but what do I use for padding and margins? For large things using a percentage is not a problem but when I want say padding of 10px I wouldn't think using 1.65% or something like that would be the right thing to do.

Also if anyone knows off the top of their head, because I am going to make the sidebar appear at the bottom, when calculating the percentages do I use the size of the website with or without the side? For example the entire website is 1000px. The sidebar is 300px and main content section is 700px. If I have something that is half of the content do I use 50% or 35%? Other words do I use 1000px or 700px for the calculation.

Thanks again!

By using media queries, you can set easily set and manage different margins and padding (in pixels) for each screensize you define.

I use a main container set to 100% and max-width of 1000px. Within, I have content divs, floating left with width set to 72% and a sidebar div, floating right and width set to 22%. This automatically leaves some nice space between them, but of course this isn't necessary. Just test some widths and find out what works best for you.
In a media query I've choosen to hide the sidebar when screensize is below 800px and the content divs get 100% width, filling the whole screen nicely. Just check my site and fiddle with the browsers width to see what I mean.

As you are using a master-page, I wouldn't worry about serps since the content will stay intact. Some people hide content though for certain screen sizes and that of course does affect the serps. So just be careful with hiding content or creating duplicate content.

[TravG]

By using media queries, you can set easily set and manage different margins and padding (in pixels) for each screensize you define.

I started playing with media queries last night but didnt get very far. I understand the concept but for some reason my site just isnt responding and doing what I want it to. I dont have much free time today but plan on getting back at it tomorrow. For some reason it is like the website isnt recognizing the query. It always uses the format for the how it is suppose to look in desktop mode. If I delete the css setting for desktop mode it looks like it is suppose to for a smaller screen size but for desktop also.

I will take a look at your source code and see if I can use that as an example.

[casinoplanet]

I started playing with media queries last night but didnt get very far. I understand the concept but for some reason my site just isnt responding and doing what I want it to. I dont have much free time today but plan on getting back at it tomorrow. For some reason it is like the website isnt recognizing the query. It always uses the format for the how it is suppose to look in desktop mode. If I delete the css setting for desktop mode it looks like it is suppose to for a smaller screen size but for desktop also.

I will take a look at your source code and see if I can use that as an example.

The standard part of the css file handles the normal web content. The media queries handle any desired element per screensize, with min or max widths. See the example below (the first class is part the standard setting):

.examplecontainer {
margin: 30px;}

@media only screen and (max-width: 600px)
{
.examplecontainer {margin: 20px;}
}

@media only screen and (max-width: 320px)
{
.examplecontainer {margin: 10px;}
}

[casinoplanet]

Some interesting info:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://css-tricks.com/css-media-queries/

[sweetbet]

I converted pure HTML sites to wordpress which changed the files and site structure, but if you're not going to be changing content or file structure, then that should be ok. Adding a new meta tag shouldn't affect the site in the serps.

[TravG]

So what is the freaking odds! Right when I am starting to try to get this taken care of, I get an email from Google this morning telling me my site inst mobile friendly and as a result will be ranked accordingly for mobile users in search. Ug! I wish I would have started working on this a few weeks ago. I guess I know what I am doing for the next day or two non-stop.

[casinovegas]

Its good that they have sent you an email about it at least.

Sent from my SM-T530 using Tapatalk

[offyourface]

I converted pure HTML sites to wordpress which changed the files and site structure, but if you're not going to be changing content or file structure, then that should be ok. Adding a new meta tag shouldn't affect the site in the serps.

Hi Sweetbet, curious why the site structure was changed. Are you aware that you can still keep .html pages the same with wordpress? If you aren't, it's as easy as doing /%postname%.html in your permalinks.

[dfiocch]

After making most of my sites mobile friendly, they dropped in the serps and many have not recovered. If you must make your site mobile friendly, (a) try if possible to maintain the current file structure, and (b) use 301 redirects to redirect old pages to new pages.

It's a normal behavior of search engines: if you change the structure of your site(s), SE bots need to understand it before placing sites in the SERPS.

[TravG]

Well I finally have this site mobile friendly and it was quite a bit of work but now its done! The mobile version needs a few tweaks to make it look nicer but it has a 99/100 now for mobile usability from Google in Webmaster Tools.

Just wanted to thank everyone who gave me some pointers on here on how to get this accomplished as there is surprisingly very little info on the web about it. A lot of articles talking about why to do it, and some general tips but not much in the way of giving good examples and step by step instructions on how to get it done. So thanks everyone!

[casinoplanet]

Congrats!

You're right, information is quite scattered and sometimes difficult to find.

I've visited the site on both an iOS and Android phone and content nicely scales to the screens and the sidebar jumps to the bottom. However, because of this scaling, buttons are getting quite small and also is the text. Also in the header, the logo is cut off and the same goes for the footer. So that needs some tweaking imo.

[TravG]

Did you just look today? I thought I finally had that logo figured out that it didn't cut off anymore. The footer, yes, I plan to get that squared away today hopefully.

Thanks for looking!