How to make your website mobile friendly?

Short 'How-To' step by step instructions - NOT a place for questions!

Moderators: BobCP, agsone, gregtutor, Lem3, art0l0

How to make your website mobile friendly?

Postby tony on Thu May 14, 2015 10:03 pm

Hello KompoZer webmasters,
I have been getting warnings in webmaster tools and emails from Google, that they are updating their algorithms. they say I need to make my website mobile friendly. It already displays with mobile devices, but is not considered mobile friendly. Our ranking is falling quickly, and I wondered if there Is a quick and an easy way to do this through Kompozer? I'm hoping I can change my style sheet rules to conform to this so I'm not penalized during our summer months as this is our busy time. Here is my style sheet. Any help greatly appreciated.
Code: Select all
/* Generated by KompoZer */
body {
  margin: 0px;
  padding: 0px;
  background-color: black;
}
#wrapper {
  margin: 10px auto;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 1em;
  background-color: white;
  width: 986px;
}
#crown {
  color: white;
  background-repeat: no-repeat;
  background-position: left center;
  background-color: transparent;
  background-image: url(website-photos/backgrounds/gradient100028blue.png);
  height: 28px;
}
#crown .para_01 {
  margin: 0px;
  padding: 5px 0px 0px 10px;
  color: white;
  font-size: 14px;
}
#crown .para_02 {
  margin-bottom: 0px;
  padding-bottom: 0px;
  color: white;
  text-align: right;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 15px;
  font-size: 14px;
  margin-top: -17px;
}
#header {
  background-color: black;
  color: white;
  height: 180px;
  background-position:  center center;
  background-image: url(website-photos/irwin/irwin_team_header.jpg);
}
#header2 {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  background-color: #336699;
  color: white;
}
#header p {
  margin: 0px;
  padding: 10px 0px 0px 10px;
  font-weight: normal;
  color: black;
  font-style: italic;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 42px;
}
#header .para_01 {
  text-align: right;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 40px;
  font-family: Arial,Helvetica,sans-serif;
  font-style: italic;
  margin-top: -64px;
  font-size: 27px;
  margin-right: -17px;
  color: black;
  font-weight: normal;
}
#header .para_02 {
  padding-bottom: 0px;
  text-align: right;
  margin-top: 0px;
  padding-top: 8px;
  color: red;
  font-weight: normal;
  font-family: Arial,Helvetica,sans-serif;
  font-style: italic;
  font-size: 17px;
  margin-bottom: 0px;
  padding-right: 27px;
}
#header .para_03 {
  padding-bottom: 0px;
  text-align: right;
  font-style: italic;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 5px;
  font-weight: normal;
  font-family: Arial,Helvetica,sans-serif;
  color: black;
  font-size: 16px;
  padding-right: 41px;
}
#header .para_03 a {
  background-color: transparent;
  color: black;
}
#header .para_04 {
  text-align: right;
  font-family: Arial,Helvetica,sans-serif;
  padding-top: 11px;
  font-weight: inherit;
  color: black;
  padding-right: 35px;
  font-size: 1.4em;
}
#header .par_05 {
  margin-right: 10px;
  margin-top: 3px;
}
#header .par_06 {
  margin-left: -7px;
  background-color: white;
}
#hmenu {
  border: 1px solid black;
  text-align: center;
  background-repeat: no-repeat;
  color: white;
  background-color: black;
  font-weight: normal;
  font-size: 12px;
  line-height: 2.4em;
  height: 25px;
  background-position:  center center;
  background-image: url(website-photos/backgrounds/gradient100028blue.png);
}
#hmenu ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  background-color: transparent;
}
#hmenu li {
  border-right: 1px solid black;
  padding: 0px 20px;
  float: left;
  background-color: transparent;
  line-height: 25px;
}
#hmenu a {
  margin: 0 -20px;
  padding: 0px 20px;
  display: block;
  text-decoration: none;
  font-family: Arial,Helvetica,sans-serif;
  color: white;
  background-repeat: no-repeat;
  background-position:  center center;
  background-color: transparent;
}
#hmenu a:hover {
  background-color: black;
}
#content {
  border-top: 1px solid black;
}
#col1 {
  float: left;
  background-color: white;
  padding-bottom: 200px;
  padding-top: 20px;
  width: 158px;
}
.box5760404 {
  background: transparent url(boxmid86534548.png) repeat-y scroll 0% 50%;
  margin-left: 1px;
  width: 156px;
}
.box5760404 .boxtop {
  padding: 6px 8px 4px 10px;
  background: transparent url(boxtop_blue_158.png) no-repeat scroll center top;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  height: 17px;
}
.box5760404 .boxbot {
  margin: 0 0 20px;
  padding: 10px;
  background: transparent url(boxbot23918749.png) no-repeat scroll center bottom;
  text-align: left;
  color: #000000;
  font-size: 13px;
}
.vmenu1 {
  border: 1px solid #cccccc;
  text-align: center;
  color: black;
  font-weight: normal;
  font-family: Arial,Helvetica,sans-serif;
  line-height: 2.5em;
  margin-top: -9px;
  font-size: 0.7em;
}
.vmenu1 ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.vmenu1 li {
  border-bottom: 1px solid black;
  background-color: transparent;
}
.vmenu1 a {
  margin: 0 0px;
  padding: 0px 20px 0px 0px;
  display: block;
  text-decoration: none;
  color: black;
  font-weight: normal;
  background-color: transparent;
  font-size: 2.6ex;
}
.vmenu1 a:hover {
  background-color: #cccccc;
}
#col3 {
  float: right;
  background-color: white;
  padding-bottom: 200px;
  width: 158px;
  padding-top: 20px;
}
.col3_clearfill {
  height: 10px;
}
#vmenu2 {
  text-align: center;
  font-family: Arial,Helvetica,sans-serif;
  font-style: normal;
  background-position:  center center;
  font-weight: normal;
  background-repeat: repeat;
  background-image: url(website-photos/kellyslater1.jpg);
}
#vmenu3 {
  background-repeat: no-repeat;
  background-image: url(website-photos/loadedboards/kevin_gile_vmenu3.jpg);
  background-position: center bottom;
}
#vmenu4 {
  background-image: url(website-photos/irwin.jpg);
  background-position: center top;
  background-repeat: no-repeat;
}
#vmenu4 a {
  border-color: silver;
  font-weight: normal;
  font-size: 1.1em;
}
#vmenu4 a:hover {
}
#vmenu5 {
  background-image: url(website-photos/orangatangwheels.jpg);
  background-position:  center center;
}
#vmenu5 a {
  text-decoration: underline;
  font-size: 1em;
  background-color: transparent;
  font-weight: normal;
}
vmenu5 a:hover {
}
#col2 {
  border-left: 1px dotted #999999;
  border-right: 1px dotted #999999;
  margin-top: 20px;
  background-color: white;
  margin-right: 163px;
  margin-left: 163px;
  padding-right: 8px;
  padding-left: 8px;
}
#col2 h1 {
  border-color: #666666;
  border-width: 1px;
  border-top: 1px dotted #666666;
  border-bottom: 1px dotted #666666;
  margin: 0px -8px 10px -7px;
  padding: 5px 0px;
  text-align: center;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: normal;
  background-repeat: no-repeat;
  background-position: left center;
  color: black;
  background-color: white;
  font-style: normal;
  font-size: 21px;
}
.gallery {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.gallery li {
  border: 1px solid #cccccc;
  margin: 2px;
  padding: 5px;
  float: left;
  color: #333333;
  text-align: center;
  background-color: white;
  width: 196px;
  height: 255px;
  font-family: Arial,Helvetica,sans-serif;
  line-height: 1.2em;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
}
.gallery img {
  margin-right: auto;
  margin-left: auto;
  display: block;
}
.gallery p {
  margin-top: 190px;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 1em;
}
.clear {
  clear: both;
}
#col2 .p_insert {
  border: 1px solid #cccccc;
  margin: 3.5em;
  padding: 1em;
  line-height: 1.5em;
  background-color: white;
  font-size: 0.8em;
  text-align: center;
}
#col2 .p_insert2 {
  border: 1px solid #cccccc;
  margin: 3.5em;
  padding: 1em;
  line-height: 1.5em;
  background-color: white;
  font-size: 0.8em;
  text-align: center;
  clear: both;
}
.gallery_surround {
  border-bottom-style: hidden;
  border-bottom-width: 1px;
  overflow: hidden;
  padding-bottom: 200px;
}
#footer {
  border-color: black;
  border-width: 0px;
  color: white;
  clear: both;
  background-repeat: no-repeat;
  font-family: Arial,Helvetica,sans-serif;
  font-style: italic;
  text-align: left;
  background-color: transparent;
  background-position:  center center;
  height: 28px;
  background-image: url(website-photos/backgrounds/gradient100028blue.png);
}
#footer p {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 10px;
  padding-top: 5px;
  font-size: 0.8em;
}
.fill {
  height: 10px;
}
#col2 .p_insert3 {
  margin-top: 1000px;
}
#col2 h2 {
  font-style: normal;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: normal;
  font-size: 17px;
}
.quicklinks {
  border: 1px solid black;
  text-align: center;
  background-repeat: no-repeat;
  color: white;
  background-color: black;
  font-weight: normal;
  font-size: 12px;
  line-height: 2.4em;
  height: 25px;
  background-position:  center center;
  background-image: url(website-photos/backgrounds/gradient100028blue.png);
  margin-top: 5px;
}
.quicklinks ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  background-color: transparent;
}
.quicklinks li {
  border-right: 1px solid black;
  padding: 0px 20px;
  float: left;
  background-color: transparent;
  line-height: 25px;
}
.quicklinks a {
  margin: 0 -20px;
  padding: 0px 20px;
  display: block;
  text-decoration: none;
  font-family: Arial,Helvetica,sans-serif;
  color: white;
  background-repeat: no-repeat;
  background-position:  center center;
  background-color: transparent;
}
.quicklinks a:hover {
  background-color: black;
}
Last edited by tony on Thu May 14, 2015 10:05 pm, edited 1 time in total.
Tony
Safari Town Surf Shop
http://www.safaritownsurf.com
tony
 
Posts: 235
Joined: Sat Nov 07, 2009 1:40 am
Country: United States (us)

Re: How to make your website mobile friendly?

Postby gregtutor on Thu May 14, 2015 10:27 pm

Hi Tony,

We really need to look at the whole site to get an idea of the issues. Please post the URL.

I am no longer using KompoZer for my day to day web development and have moved to BlueGriffon as that can handle the latest HTML5 and CSS3 protocols. As a result I haven't even checked whether KompoZer can create a mobile-friendly site with ease. I fear it might over-write necessary CSS3 code with non-equivalent CSS2 code.

You could check out my post at:
http://wysifauthoring.informe.com/forum/general-q-a-f15/mobile-friendly-design-t4359.html#p28449
to see where I have got to on Mobile-Friendly design.

Since that post I have completed the conversion of the existing site at:
http://www.aivuk.org.uk/
(Content-wise it is not brilliant. I am awaiting my client to provide more material and will do some further work then).

Technically the biggest challenge was the "Contacts" page and converting the Post Code menu bar (like your ZIP codes) so that it would operate vertically on a narrow screen - I am sure there is a neater solution to the problem of moving the menu from above the body text to below it!

(It's late here now, and I'm off to bed, so don't expect instant any instant response from me.)
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3744
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: How to make your website mobile friendly?

Postby tony on Thu May 14, 2015 10:31 pm

Okay, here is my URL http://www.safaritownsurf.com
Tony
Safari Town Surf Shop
http://www.safaritownsurf.com
tony
 
Posts: 235
Joined: Sat Nov 07, 2009 1:40 am
Country: United States (us)

Re: How to make your website mobile friendly?

Postby gregtutor on Fri May 15, 2015 10:22 am

I've had a quick look at your Home and About Us pages.

Generally, my fears that the HTML code might not work on a narrow screen were unfounded. There's a lot of use of lists rather than tables, and that is good for setting up alternative styles for wide and narrow screens. However, currently, content is not styled to collapse gracefully when one narrows the window below the size at which it is designed to be viewed - even on a desktop computer - That is bad practice but relatively easy to fix and is one step towards making the site mobile-friendly.

However, your main problem will be settling on a practical navigation system for a small screen (which I suspect will also aid navigation enormously on a large screen too).

You need to have a long hard think about how to rationalise navigation if every page is not going to be interminably long on a small portrait screen with more menu than content on every page. At the moment I see no sub-folders in your site structure that indicate which products link with what.

The lack of structure in the way you present your product line has led to a "I need a link to everywhere on every page" approach to navigation. As a result there also appears to be a huge overlap in function in the upper and lower horizontal menus and left and right-hand sidebars. There's no way that it will be tolerable for all those menus to be displayed on every page on a small screen.

In a real world department store you walk in and see a sign that says:
Basement: Household and Electrical
Ground Floor: Ladies Fashions
First Floor: Menswear
Second Floor: Furniture and Restaurant
Then on each floor they'll be banners hanging from the ceiling with brand names or product types on them to guide you to an appropriate area on that floor.

So, your online store needs a general sign on your home page indicating where to find different categories of product (The sign showing what each floor holds). I'd expect your site to have folders (equivalent of floors) and menus (equivalent of ceiling hung banners) that only show in that folder. It is not essential to have folders, but it would be very helpful for aiding your thinking of how your products link with each other. For example, what needs to appear on menus that serve skateboarders but have no interest to those looking for a wet suit.

Once you have got navigation on your existing site sorted, and tweaked the styling of your existing pages to allow them to collapse when the windows is narrowed, then will be the time to get your head round the further styling changes needed to display your menus differently on a small screen.

Just my thoughts... Hope they are helpful.
Last edited by gregtutor on Fri May 15, 2015 10:31 am, edited 2 times in total.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3744
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)


Return to 'How-To' Articles


Who is online

Users browsing this forum: No registered users and 0 guests