How Do I Make My HTML/CSS Website Mobile Friendly

Hey there...Sure would appreciate any tips or suggestions on how to make my website more mobile friendly. Basically, I hate the "scroll bars" that appear when view my site on mobile!

Please bear in mind, I am no way a "coder", I just code the site by myself!
The website that I am referring to is http://myway2fortune.info

Thanks for viewing this thread and any help given!

 

Hi briguy.
Try bring your site to w3c validator and follow their suggestion, and what... must this following be there?

MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAmS9MNHbQzqMN7lQKJhfQDsNngYa5f7rpJANNXMhiKyEoA6tVDzmnrj3QWqfrjTYSgB3wUNAexIF5HVe1zIrdKLcKcojh9/nG8ru8Rc/iYMLlEM+KsROwzCghO2Wo+e0KSwpFAqYOAy0cmnejVIrLapUsh9gJR8tn7J7oatQnWshH0bRMUL/OPV37YCiu4rmgZhMIMgbEWiIvUg0We5LwW/cnRoec3i+gbpgmxj/AZlSBfK+dqXgtz/nk64Qy8JQjMbx+BEwbJjTBtkV3v1zlPWjAP+9SPDc8bJCYd6MXzH+soKmqm+/Kmiz3V9eG8sDLrCvBvex/Q10L63LPdvL3OwIDAQAB

Code (markup):

 

Not fully tested, so look closely at all results.

.wrapper {
  background-color: rgb(51, 102, 153);
  margin: 0 auto;
  width: 80%;
}

Code (markup):

And get rid of that text at the top. Odd thought; are you using some cut-rate or free hosting? If so, the host may be injecting content.

cheers,

gary

 

I normally build my sites over Bootstrap to make it responsive. Bootstrap is a free HTML + CSS framework and is a popular way of building responsive websites.

 

That code was a "verification" code that I put in to verify a site and I removed it.

Not sure what the w3c validator has to do with my question but ran the site through validator.w3.org. only 4 errors (and they are basic stuff like "there is no attribute "color""

@kk5st hosting is Godaddy economy

 

Yeah, just to make sure that the structure (HTML) is really ready for next step, the styling (CSS). Modern browsers are very forgiving for tiny mistakes like these, but just a couple years back one missing quote error would disable whole CSS selections. It happens.

Anyways, this might eliminate the need for horizontal scrollbar, in mobiles

@media screen and (max-width:830px){
   .wrapper{
      width:auto;
   }
}

Code (CSS):

 

One of the things it often seems people can't grasp is that responsive layout -- what people call "mobile friendly" is about more than just mobile vs. desktop. It's the final step in a long line of accessibility norms designed to make pages "device neutral" -- it shouldn't matter WHAT the page is being viewed on, your site should adjust to the capabilities present. That's why we have semantic markup for non-visual UA's (user agents, a browser is always a UA but a UA isn't always a browser), elastic layout and dynamic fonts for users of different default font sizes, semi-fluid layout to prevent long lines from being hard to follow, and finally responsive layout adjusting the width, number of columns or other bits of page information to best fit and fill the available screen space.

You have none of that -- nor do you have ANY of the good practices such as separation of presentation from content or semantic markup that are the stepping stones to providing any of that either!

Let's just go down the list of what's wrong with your page... it's mostly going to mimic my article on the topic:

http://www.cutcodedown.com/article/whats_wrong_with_YOUR_website_index

You start out with a tranny doctype, making your page unsure which bathroom to use. Transitional quite literally means "in transition from 1997 to 1998 development practices" and allows you to use a ton of crap that has ZERO business in any page written the past decade and a half! Said garbage includes rubbish like <center> tags, color="" attributes, target attributes shoving new windows down user's throats whether they like it or not, and a host of other things that generally just piss on your HTML from orbit.

You have your XML "prologue" AFTER the doctype, that's just nonsensical gibberish and really you should leave that altogether if working in XHTML 1.0. You have a incomplete favicon link, absolute URI's for zero legitimate reason, chartype declaration way too late into the document, multiple meta that nothing gives a flying purple fish about, Alexa crap guaranteed to throw up spyware warnings, etc, etc...

Amongst the greatest offenders of "how not to write markup" before we even get to the content is the keywords meta. It's called keyWORDS. NOT keyphrases, NOT keysentences, but keyWORDS!!! Seven or eight single words or proper names that exist between <body> and </body> as character data. If you say the same word over and over again like:

"need free money now, how to make free money, how to get free money now, free cash fast, free money, easy cash now, surveys money, no scam, survey, honest, make Money online, government money"

You are pretty much guaranteeing that words like free, money, and now are going to be ignored, and risking having your page flagged for abuse by search engines -- which given its already scammy nature is the last thing you need to risk.

Believe it or not, this:

need,free,money,now,how,cash,fast,survey,scam,honest,online,government"

Code (markup):

Is what that should be, though again you need to cut that down to just eight words, no more!

It gets worse when we get into your document body where the HTML is outright gibberish. As if the multiple DIV for NOTHING with presentational classes and presentational tags like CENTER weren't bad enough, you've got some real herpaderp nonsensical use of numbered headings and horizontal rules.

A H1 is the heading that EVERYTHING on the page is a subsection of. Generally speaking it's the only one you seemed to have used properly. An H2 indicates the start of a subsection of the H1, an H3 indicates the start of a subsection of the H2 preceding it... so how can you have a H3 when you haven't even used a H2 yet. Likewise a HR means the start of a new thought or subsection where a heading is unwarranted or unneccessary -- so why are you using them right before perfectly good H2?!? These tags do not mean "text in different sizes" or "draw a line across the screen" -- that's just their default appearance.

Remember, HTML tags have MEANINGS separate from their appearance and if you choose tags based on their appearance, you're choosing the wrong tags for all the wrong reasons.

Like those pointless bold tags inside your headings.

You have NO quotes on the page -- you aren't quoting people directly from other sources or providing testimonials that would include a citation, so what the blazes are all those blockquote tags in there for?!? Much less you quite clearly have paragraphs, so why in blazes aren't you using pargraph tags... the same goes for the non-breaking spaces at the start of obvious paragraphs doing the text-indent attribute's job!

Even your menu is rubbish as what in blazes makes a menu a third level heading? There's no content for that to even be a heading OF! Worse, it's a run-on sentence thanks to the lack of block level tags, again the stupid malfing target attributes shoving new windows down users throats (which again has been invalid code since 1998 in PROPER documents), and pointless title attributes.

It just gets worse and worse the deeper into it we get... can I assume some sort of ignorant "tool" like frontpage or dreamweaver was used to vomit up this nonsense as it has a lot of the telltales that no human wrote the markup. Doesn't even seem to keep EM, STRONG, B and I straight. Remember, <b> and <i> are for when somethign would be bold or italic in a professional written document for a reason not covered by a semantic tag -- like a book title when you aren't citing it is <i> or an entity name would be <b>... EM and STRONG mean "emphasis" and "more emphasis" respectively. Friend ages ago came up with this EXCELLENT example showing how all four work and should be used.

<i>GURPS</i>, <b>Steve Jackson Games'</b> flagship roleplaying game, was first released in 1985. Several licensed adaptations of other companies' games exist for the system, such as <i>GURPS: Bunnies and Burrows.</i> However, <b>SJ Games</b> has no connection with <b>Wizards of the Coast</b>, producers of the <i>Dungeons and Dragons</i> RPG. <em>No <i>GURPS</i> content is open-source.</em> <strong>Do not plagarize <b>SJ Games</b> work!</strong>

Code (markup):

So a lot of your <b> shouldn't even be in there, and your <i> should mostly be <em>.

Likewise your overuse of title attributes also reeks of being scammy sleazy just begging for search to slap you down; good rule of thumb is if you have words inside a anchor, and you feel the "need" to put a title attribute on it, there's something wrong with those words!

Once the markup is fixed, the layout being a single centered column should be easy-peasy. You only need one outer DIV, you set a min-width and max-width on it in EM, (keeping font declarations in EM), throw a fixed width at legacy IE if you actually still care about them, then use media queries to make it smaller adjusting down things like padding to make better use of the available space.

... I'd also axe the harsh yellow for maybe more of a cream colour, and throw more than half your copy in the trash as SEO scam artist hoodoo-voodoo word stuffing, again more likely to get your page slapped down HARD over time for, well... reeking of SEO scam artist hoodoo-voodoo; to go hand in hand with the topic itself also being scam artist hoodoo-voodoo!

A better command of English may help as well, get a professional writer in there to punch up your copy as trying to read it makes me want to poke out my eyeballs.

So... first step is drag the HTML kicking and screaming out of the 1990's -- there is likely little legitimate reason for the HTML of that page to be much more than:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="keywords" content="free,now,fast,cash,money,survey,honest,online">
<meta name="description" content="This site can help you earn extra money today without investing anything, scam free. Everything listed here is free!">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<title>How to Make Free Money Now!</title>
</head><body>

<div id="top">

	<h1>How to Make Free Money Now</h1>

	<ul id="mainMenu">
		<li><a href="/getmoretraffic.html">Traffic</a></li>
		<li><a href="/MoneySavingRecipes.html">Money Recipes</a></li>
		<li><a href="/TopPayingSurveySites.html">Survey Sites</a></li>
		<li><a href="/makeextraMoneyfromaffiliates.html">Affiliate Money</a></li>
		<li><a href="/disclaimer.html">Disclaimer</a></li>
	</ul>

	<h2>
		I NEED FREE MONEY NOW<br>
		HOW TO MAKE FREE CASH ONLINE
	</h2>
	<p>
		Do you <strong>need to make free money now</strong> and have you just spent hours searching online for accurate and honest information on how to earn a little extra online income without being scammed?
	</p><p>
		If you have been searching for ways to make extra cash online, then you came across the right website to help you to earn extra cash online! Like the majority of people, I also needed to make some easy extra spending money to help pay for my bills, buy food among other life necessities. So, in order to solve my financial problems (my fancy way of saying, that I ran out of spending cash fast and was going deeper into debt). I started to spend my free time researching  "different ways to make free cash online" and sad to say, I was scammed for a lot of money by bad sites a few times!
	</p><p>
		But not no more will I be scammed (and neither, will you) because since 2006, I have been making a little extra online income from doing easy things to  makes some extra cash (<em>I listed them below</em>). To share my good fortune I made this free money info site, (hence the domain name, MyWay2Fortune.info). I really do want to help you earn extra cash starting today without investing a cent or losing any of your hard earned money!
	</p><p>
		The only real investment that is required from you from any of the extra money making opportunities that I have listed below is that you put in a little of your time and effort daily (maybe a hour a day) to start making a online income. Notice that I never claimed that you will become a millionaire overnight (get rich quick or that I am a Guru) by following my suggestions. Any of the suggestions or tips that I listed, will help you make money for college, school, to pay bills, buy gifts and just about anything that you need an extra income for!
	</p><p>
		On this make extra money site, I have listed a few different ways to earn a extra income online. I made sure that there are <strong>no scams sites listed</strong> here, each and every site that I have listed has been thoroughly researched! They are the sites that I have been using for a few years now to make a monthly online income!
	</p>
	<a href="http://realstat.info">
		<img
			alt="Make Easy Money"
			src="/MakeMoney_MyWay2Fortune.gif"
			class="plate"
		>
	</a>
	<dl class="qna">
		<dt>
			(Q) <em>Is it possible to make extra money from the Internet</em>?
		</dt>
		<dd>
			(A) Yes, it is possible because there are plenty of free and easy ways to make cash online that only cost you your time and effort. Believe it or not, you can even make money even when you are not on the computer! This is commonly known as making a passive income online. If I can make a extra income online..anyone can!
		</dd>
	</dl>

	<h2>First Free Money Making Suggestion</h2>
	<p>
		Probably the easiest way to make a little extra money is from doing free offers and surveys from free survey sites! Now there are plenty of legitimate free survey sites available online but there are also plenty of survey sites that are plain scam sites that are designed to waste your time and fatten their wallets, not yours! The following four established survey websites have proven to be extra money makers, year after year for me and thousands of active online users!
	</p>
	<h3>TOP PAYING FREE SURVEY SITES</h3>
	<p>
		Below, you will find my suggested <strong>top paying survey sites listed in order</strong>. Yes, you can join all three of the site listed below or even just one of them and make extra money even if you are very limited in time that you can spend online. All three of these survey sites have been around for a long time and have been paying their members, regularly (once they have reached minimum payout!)
	</p>
	<ol>
		<li>
			<a href="http://realstat.info">REAL STAT</a>
			A great paying survey site that pays your from Paypal.
		</li><li>
			<a href="http://hexei.com">HEXEI</a>
			Another good paying survey site to check out!
		</li><li>
			<a href="http://dealbarbiepays.com/members/register.php?ref=danasurvey">DBP</a>
			Our third pick for a survey site that pays you for your time.
		</li>
	</ol>
	<p>
		Every site listed above requires no selling, no licenses, no surprise upgrades, just a willingness to put in a little time and effort online.
	</p><p>
		Please, remember, that this site wasn't designed to scam you...We want only to share your success...You will be making money FOR yourself, not FOR them (the scammers)!
	</p><p>
		If you are interested in or confused about the difference between doing surveys and belonging to <a href="http://mw2f.blogspot.com/2009/10/focus-groups.html">Focus groups</a> (info link).
	</p>

	<h2>Second Way To Make Extra Money</h2>
	<p>
		Get Paid To Visits Sites! Another easy way to earn extra money online is to get paid to visit sites! Yes you can even get paid to "surf the web" (visit sites)! Now, you won't make millions of dollars by visiting websites but this is another source that you can use to <em>make extra money online</em>! Pretty easy way to make some extra cash and the best part is that you don't have to do anything, you just have to visit their sites for a few seconds or more! This is a probably the top <strong>get paid to visit site</strong> for doing this, <a href="http://www.clixsense.com/?2746277">Visit Sites And Get Paid</a> (<em>this site pays by paypal</em>)
	</p>

	<h2>Third Way To Make Extra Money</h2>
	<p>
		If you don't mind writing, there are a few great ways for you to make extra cash online! You can get paid to ask or answer questions, write products reviews or make your own blog (see suggestion #5) <a href="/MakeFreeMoneyFromWriting.html">Make Free Money Now From Your Writing</a>
	</p>

	<h2>Fourth Way To Make Easy Money</h2>
	<p>
		Selling your items on auctions sites is becoming a very popular way to make some extra money! You can sell your items locally or internationally (worldwide) on online auction sites. For more info and money making tips and easy step by step suggestions for selling your items online, visit <a href="http://makeMoneyfromauctionsites.blogspot.com/">How To Make Money From Auction Sites</a>
	</p>

	<h2>Fifth Way To Make Easy Money</h2>
	<p>
		Do you know that you can make some real easy money just by shortening links? Yes, you can! This is a pretty easy way to make a little more free money especially if you have lots of outbound links on your website or blog! Especially links that go to other sites that are not yours! Or you can make money by using these link shorteners on your social sites like Twitter, Facebook and other popular social media sites! If this way of making some easy money passively (just post your shortened links and forget about them and hopefully make money months later from the same links!) catches your attention, well here is our <strong><a href="/MakeFreeMoneyFromShorteningLinks.html">Make Free Money From Shortening Your Links</a></strong>
	</p>

	<h2>Sixth Way To Make Extra Money!</h2>
	<p>
		Another easy way to make an extra income from the Internet is to have your own <strong>free web page or a blog!</strong> Even if you don't have the gift of writing! You can still set up a free blog or website and make a little online income! Who knows maybe it might turn out to be a full time income! All is take is a little time and effort!
	</p><p>
		A excellent tip is to start a website on a free website hosting company and to design it till you are satisfied with the look. Then when you start to get enough traffic to your site, have your website hosted on a domain! For more detailed free information, visit <a href="http://mw2f.blogspot.com/2009/11/free-web-sites.html">Free Web Sites or Free Blogs</span> </a>
	</p>

	<h2>Government Free Money</h2>
	<p>
		So far, I mentioned a few different ways to earn money online. Well, there is another potential way for you to get money online. How, you may ask, well, maybe your are entitled to a check (cheque) from your Government. The Government owes billions of dollars in <em>Unclaimed Free Money</em> and you might one of the people that is owed money from the Government. <em>To find out if you have any Unclaimed Money, visit <a href="http://mw2f.blogspot.com/2010/09/does-government-owe-you-money.html">DOES THE GOVERNMENT OWE YOU MONEY</a></em>
	</p>

	<h2>Free Money Now Saving Apps</h2>
	<p>
		As a bonus feature of this site, we have also researched and collected the best ten (10) <a href="/FreeMoneyNowSavingApps.html" title="Free Apps to save you free cash now">Free Money Now Saving Apps</a> for you to save more money from. After all, when you save money, you are also making money. Be sure to check out this page, we are sure you will profit from the free apps from Mint.com, J.P.Morgan Chase, Master Card and Coupons.com and other well known businesses.
	</p>

	<h2>Free Money Prayer Requests</h2>
	<p>
		If you are a spiritual person and believe in the power of prayere  and would like to make a "free money request, we just just added another page to this site. it is our <a href="/FreeMoneyFromGodPrayers.html">"Free Money From God Prayers</a>.
	</p>

	<h2>Free Business Start Up Guide</h2>
	<p>
		To add more value to this site, we have also include a <a href="/FreeBusinessStartUpGuide.html">Free Business Start Up Guide</a> to help you to earn money from starting your own business.
	</p>

	<h2>Free Automatic Backlink</h2>
	<p>
		In order to become successful online, you need to get more traffic to your site! Generally, the more traffic you get, the more chances someone will buy something on your site and the more buyers, the more money that you make money online!
	</p><p>
		One of the main ingredients of getting more traffic is to get your site or blog to rank higher in the search engines (Google, Bing, Yahoo, etc)! and a key factor in higher ranking is basically to get more backlinks to your site!
	</p><p>
		To be more helpful, which is the intention of this site we offer a backlink for free and very fast for your sites.
	</p><p>
		<em>Hey look, links to giant scams on a site claiming not to be scammy... RIGHT...</em>
	</p>
	<ul class="moneyLinks">
		<li>
			<a href="/getmoretraffic.html">
				For more information on FREE BACKLINKS click here!<br>
				<img
					src="http://4.bp.blogspot.com/-i43opTOOElQ/Tm1WvkTOZuI/AAAAAAAAAa8/mxtTGfTKC9Y/s320/GetMoreTraffic-backlink.jpg"
					alt="Free Automatic Backlink"
				>
			</a>
		</li><li>
			<a href="/makeextraMoneyfromaffiliates.html">
				Make Extra Money From Affiliates Program
			</a>
		</li><li>
			<a href="http://makingextraMoney-theeasyway.blogspot.com/">
				More Easy Money Making Suggestions
			</a>
		</li>
	</ul>

	<h2>I Need Money Now!</h2>
	<p>
		We hear a lot of people saying, "I need money now"! Whether it is for starting a business, for educational purpose, for purchasing your home, emergency situation or any other work, all people need urgent money at some point of their time or other.
	</p><p>
		In such times finding an easy and reliable route through which you can lay your hands on some much-needed cash becomes crucial.
	</p><p>
		If you are in need of immediate cash for a work that needs urgent attention, then getting money through the shortest and simplest route is essential. In such cases, sorting out your priorities and looking through your expenses and totalling them should be your first priority. Once you have finished creating a list of expenses and the total money needed, searching for sources that could lend you money is your second step.
	</p><p>
		If you have savings in your fixed deposit or investments like shares, bonds, etc., then they could be a handy resource in these situations. However, if you have neither of these then finding other possible sources from which you can borrow money on a short notice is necessary.
	</p><p>
		Your family, relatives and friends are usually the first people you think of when it comes to borrowing money. There are many banks, firms and money lenders who also will lend you money. Banks lend you money immediately, however they do look at your credit score and how have you been as a customer before handing out the money. Filling applications, documents and going through the procedure normally takes couple of days, which can be too late, if you are looking for instant cash.
	</p><p>
		Payday moneylenders (they usually give you loan with no credit check till your payday) is also a good way where you can get money immediately. You can easily do a google search for these lenders online. However before borrowing money, look for all the terms and conditions. You might approach a moneylender and say I need money now and the lender might also hand you cash promptly, but beware of an exorbitant interest rate that can come into picture anytime and that can make repayment difficult. Always check  the authenticity of the moneylenders through reviews on the online forums, before borrowing money.
	</p><p>
		In order, to keep this site up to date and a good resource to help you earn extra cash, we are currently researching more <a href="/FutureExtraMoneyMakingSites.html">Future <strong>Extra Cash Making Site</strong></a>
	</p><p>
		Yes, the free money making info that you found on this site will help you to make extra cash for travel, birthday gifts, food, rent and help pay your bills in the following states, provinces and regions and you will never have to say <em>i need money now</em>... Alabama, Alaska, Alberta, Andhra Pradesh, Anhui, Arizona, Arkansas, Bihar, British Columbia, California, Colorado, Connecticut, Delaware, District of Columbia, East of England, Florida, Georgia, Guangdong, Guangxi Zhuang, Gujarat, Hawaii, Henan, Hebei, Hubei, Idaho, Illinois, Indiana, Iowa, Jawa Barat, Jiangsu, Jiangxi, Kansas, Karnataka, Kentucky, Labrador, Liaoning, London, Louisiana, Madhya Pradesh, Maharashtra, Maine, Manitoba, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana, Nebraska, New Brunswick, Newfoundland, New Hampshire, New Jersey, New Mexico, New York, Nevada, North Carolina, North Dakota, North East England, North West England, Northwest Territories, Nova Scotia, Nunavut, Ohio, Oklahoma, Ontario, Oregon, Pennsylvania, Prince Edward Island, Punjab, Quebec, Rajasthan, Rhode Island, Saskatchewan, Shandong, Sichuan, South Carolina, South Dakota, South East England, South West England, Tamil Nadu, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Midlands, West Virginia, Wisconsin, Wyoming, Yorkshire and the Humber, and even in the Yukon! Making extra money can be done, the legit way! No more saying "<em>I need cash</em>".
	</p><p>
		Thank you for visiting this <strong>I need extra money site</strong> especially grateful if you found this site from a search engine like <em>Google, Yahoo, Pinterest, Stumbleupon or Bing</em> and were searching for I Need Free Money Now Unclaimed Money, I Need Money Bad, I Need Big Money Fast, I Need Money No Income, Give Me Money, Lost Job Need Money, Free Money Need Now, Please Someone Help Need Money, I Need Free Money, I need money now, i need free money now for real, I need free money now unclaimed money, I need free money now please, I need free money now no payback, I need free money now to pay bills, I need free money now for school, I need free money now loan and especially, I Need Free Money Now Government and other need to make money searches. We are especially grateful if you used this site for a "<i>Yahoo Answers</i>" question, Thanks! MyWay2Fortune.info was last updated on January 1st 2015
	</p>

	<div id="footer">
		<hr>
		<ul>
			<li><a href="http://winner.2fortune.com">Free Money</a></li>
			<li><a href="/sitemap.html">My Links</a></li>
			<li><a href="http://www.activesearchresults.com">ASR Search Engine</a></li>
			<li><a href="http://x.co/TopSite">Today's Top Site</a></li>
		</ul>
		All trademarks and servicemarks are the properties of their respective owners.<br>
		&copy; MyWay2Fortune.info All rights reserved.
	<!-- #footer --></div>

<!-- #top --></div>

</body></html>

Code (markup):

EVERYTHING else should be done from inside the CSS and there are MORE than enough hooks to do everything you've done from there. If I have time later I may belt together the CSS for that just to illustrate what I mean.

 

Ok, I made a live copy rewrite of your homepage just to what I mean... You can see it live here:

http://www.cutcodedown.com/for_others/briguy/template.html

I made a number of stylistic changes to "modernize" it, as well as allow it to gracefully degrade on legacy devices and browsers.

You can follow along with the code and files here:
http://www.cutcodedown.com/for_others/briguy/

The HTML is largely unchanged from what I put in my last post, but let's review the how/what/why of that first. I put a copy in as a .txt for the people who can't figure out how to "view source"

http://www.cutcodedown.com/for_others/briguy/template.html.txt

Let's break it down. While I'm NOT a fan of much of HTML 5 in terms of the allegedly semantic and ultimately redundant new tags like <section>, the new smaller doctype and header is somewhat... elegant. It's the most recent, and we might as well go with it if for no other reason than you might want some of the stuff being shoved down our throats like the new pointlessly redundant AUDIO and VIDEO tags.

I put the doctype, html declaration with language, <head> and charset meta all on one line first as they need to be in that order with the charset as soon as possible before any content elements, and second as a reminder that NOTHING ELSE should EVER go between those tags besides whitespace. I do the same with </head><body> and </body></html> -- a simple reminder NOT to put stuff there. It's something simple, and it's surprising how often people screw it up.

The viewport meta is there to tell mobile browsers not to lie to us about their resolution, nor to apply any automatic zoom to the page. This does NOT actually completely prevent it -- thanks Apple -- but it makes mobile a bit more manageable. There are other values people set like maximum values and that's rubbish that breaks the ability of the user to zoom -- what I have there is what SHOULD be used. Anything else is likely developer ineptitude and/or ignorance.

As mentioned, I gutted the keywords META down to what it should be... seven or eight WORDS that exist in the document. Likewise I shortened and rewrote the description META so as to be more useful for it's actual purpose of showing on the SERP... and removed redundancies since if you repeat yourself over and over and over in your copy, the higher the chance of search engines like Google slapping you down on suspicion of being a sleazy scam.

Hence why I still say about two thirds the copy on the page needs to go in the bin too... I left that part alone for now.

The favicon gets the proper declaration. When possible name it favicon.ico and place it in the root of your hosted domain. NOT all UA's obey the <link> and will just blindly look for it there. As to the link, use "shortcut icon" as the type for maximum compatibility.

The stylesheet link thanks to HTML 5 we no longer need to say "type" on... the validator will bitch about my using the deprecated projection and tv types, but it suck it for all I care as there are too many devices that still report that and/or apply extra rules if you omit them (like the Wii) for me to risk removing them. Basically the valid values for media types has zero damned business in the specification anyways, since it limits what hardware and browser makers can make for NEW targets! Again where I think the people at the WhatWG who made HTML 5 failed to grasp a lot of the point OF HTML.

Either way, if you include a stylesheet it should have a media target stack -- and if you omit it or say "all", you are probably doing something wrong.

From there it's just the title and we're into the body.

I call the primary wrapping div "top" so that you can link to it from the bottom of the page if desired as href="#top" -- it's just a good name for the "overall wrapper". The H1 is as described above, the heading under which everything on the page (and every page of the site) is a subsection -- as per top level headings in professional writing.

The menu is a list of choices, that's why the semantic markup for a menu is a unordered list.

The H2 is the start of the first content section. As the first content section it's text should have the most "import" on the page in terms of "weight".

I switched all your grammatical paragraphs of text into being PARAGRAPHS. That's what the tag is FOR! If you're doing <br><br> you're probably doing something WRONG!!! (or using some rubbish halfwit WYSIWYG editor). Likewise I went through and corrected a few of the <b> that should have been <strong>, <i> that should have been <em>, and again killing off all the blockquote since you weren't quoting a damned thing.

The plate image just got a class "plate" as a hook to for styling. The questions and answers I did up as a definition list as that's the closest in semantic meaning and a fairly well accepted practice. Basically it lets you have a semantic link between "questions" and "answers" as "terms" and "definitions" should you expand upon that section.

With the "TOP PAYING SURVEY SCAMS" section I made that a H3 as you clearly weren't starting a new major section -- it's a subsection of "First Free Money Making Suggestion" which is what a H3 after a H2 MEANS.

Below that you have list you had numbered... We have a tag for that called "Ordered List" -- USE IT!

From there the rest of the page is just lather, rinse, repeat... though I did take that "Free Backlinks" image that was uselessly tiny and rendered like crap and replace it with a bit of CSS trickery to recreate it as text.

Finally is the footer -- since this does not have a clear heading and the content is NOT part of "<h2>I Need Money Now!</h2>" we give it a <hr> to start with. The style of the HR isn't entirely desirable on the layout so we typically hide these. Again we use them for their meaning and for non-visual users, not just "to draw a line across the screen" as that's NOT what they MEAN.

Again, a menu list, this doesn't need a class as we can inherit off #footer. The final text is semi-incomplete thoughs and doesn't really warrant a paragraph, and I got rid of the Copyright Copyright nonsense -- use the symbol or the word, NOT BOTH! Likewise you don't need to say the year anymore, at least not for US, Canadian, or EU courts.

Close out our div, close out the markup, and we're done with the HTML. Gimme a few and I'll write up a breakdown of the CSS.

 

Ok, on to the CSS, follow along at:
http://www.cutcodedown.com/for_others/briguy/screen.css

I start out all my stylesheets with a "reset" -- the idea of a reset is that thanks to HTML not clearly defining the default appearance of elements (nor should it, that's not HTML's job) and browser makers all going their own direction on what the default appearance is in terms of padding, margins, and borders we have to set them all to a clear baseline.

There are smaller resets like the so called "universal" one of "* { margin:0; padding:0; }" but that can cause headaches styling form elements across browsers. There are larger resets like Eric Meyer's "reset reloaded", but that's such a fat bloated pig wasting time setting things you are either going to change or shouldn't need resetting in the first place, it's what gives the practice of using resets a bad name.

The one I use (made by a dearly departed friend) is a nice safe middle-ground changing only what needs to be changed, and at a quarter K in size nobody should bitch about how big it is.

I then hide all my HR. Again they are for non-CSS and/or non-visual users, they are not there for screen style so I get rid of them.

body -- I pad the top and the bottom to show some background, and set a min-width so that pre CSS3 capable browsers will not shrink narrower possibly breaking things. We can unset this later on in a media query for when we know it's safe to go smaller.

That's part of my "legacy first" approach, which is the opposite of the "mobile first" approach you'll hear some people trumpeting. The thing is, we can target small screen and most all modern devices with media queries, so why would you make that the starting point? Shouldn't you start with what you CAN'T target? That's why I make the page with semantic markup with zero concern for appearance when I make the base HTML, that's why I progressively enahnce it for screen media appearance, then use the modern stuff to further refine it. Starting out with bleeding edge latest devices is going to gracefully degrade HOW exactly?!?

I always set the default font size for the majority of my content as well as a sans-serif face on BODY, so the only thing I should be dicking with font-size for is headings. I go with a taller line-height based on the legibility and flow of the text. Your copy lacking columns benefits best on the legibility front on larger displays from a fairly high line-height. The 85% delivers 14px on "standard" displays, 17px to large font users like myself, and 20px on properly adjusted media center type devices as the default font size. This scaleability of the fonts is why all of our widths and padding are done in EM so they too scale to the font. Remember, not all browsers or users start out with the same 16px default, and declaring fonts in pixels is a giant middle finger to the accessibility needs of such users. Anyone telling you to declare fonts in pixels in all but the rarest of corner cases (like under gilder-levin) probably doesn't know enough about websites to be flapping their gums on the topic.

Mind you that describes a lot of slimy, sleazy, lazy, fly-by-night scam artists under the DELUSION that they are "designers".

The background has a fallback colour should the image not load or be blocked -- more and more users are blocking images, or at least presentational images as things like bandwidth caps become more and more commonplace. I use a smaller image that's lower-contrast so the repeat is less obvious, and I use a flat tileable image instead of a massive pre-shadowed one. I fixed the background so it doesn't scroll as with this layout that just seems to work better.

body:before -- this creates what's known as "generated content" which I use to place the box-shadow over the background. This creates that edge fade your larger image had, but adjusts it to fit whatever display it is displayed on. Sadly this should NOT be neccessary, but for some jacktard reason they up and decided that body will not obey box-shadow, even inset ones. HERPADERP. I use PX here despite my NOT wanting to as for some jacktard reason browsers will NOT let you make a box-shadow value bigger than 128px (which works out to a render section of 256x256). Pain in the ass, but whaddayagonnadoaboutit?

a -- I just like to have animated transitions on hovers for all my anchors.

#top -- The relative positioning means it will depth sort over anything in the DOM before it, in this case over our generated content box-shadow. The max-width prevents the lines from getting too long, but will still let the layout shrink to the 40 declared on body. The auto margin centers the entire box, and I went with a lighter background colour that (to my eyes at least) is nowhere near as harsh as the generic house brand mustard yellow you had. I gave it rounded corners and a box-shadow to further pretty it up a hair. Simple effects used with a light touch can go a long ways.

Mind you, box-shadow, border-radius and RGBA won't work in older browsers (IE8/earlier) -- OH WELL!!! They don't get some goofy effects who cares so long as the resulting page is still usable. You'll see people waste idiotic bloated scripttardery on trying to make this stuff work -- don't bother. Waste of time, waste of bandwidth, waste of effort. People using outdated browsers should get used to sub-optimal site rendering! At the same time, the page should at least WORK for them in a usable fashion -- it's a balancing act. As long as they can navigate it and get at the content in legible colour contrasts, the rest can take a flying leap.

* html #top -- speaking of old browsers, really old versions of IE can't do min or max width, so I give them an elastic 40em. Again, OH WELL!!! Most developers wouldn't even go this far on supporting those anymore, but given it's barely any code I go that extra mile. The "* html" part is just an easy way to target IE6 and earlier... some people rail against it's use because, uhm, well... it's something they can rant about while pretending to have a clue when really they need a nice big helping of sierra tango foxtrot uniform.

h1 -- double size text for the heading, with appropriate padding. Remember that EM is relative to the current elements scale, so that 200% font on H1 means 0.5EM is the same as 1EM in #top or body. I always redeclare the line-height when I change the font size, at which point I go ahead and use the full font declaration. There is a measurement called "REM" that's always relative to the browser value, but it's unreliable in legacy browsers and really the math is NOT that hard. Anyone who can't keep the math of using EM straight probably has zero damned business creating websites in the first damned place!

h2 -- 50% enlarged text, 1.5em padding around it to match the padding on our paragraphs (we'll declare that shortly)

h3 -- 25% enlargement, I gave it only 0.4em (0.5 body EM / REM) bottom padding as the full padding looked a bit wonky. the 1.2em side padding works out to 150%/1.5EM body/1.5REM -- same as the paragraphs.

p, .qna -- both our paragraphs and that special definition list get the same padding, 1.5em (150% the font-size) at the sides and bottom. I use padding with none at the top instead of margin so I don't have to even think about a woe known as "margin collapse". I only resort to margins once I've expended padding and something like a border or background-colour is involved.

ul, ol -- same deal, both get the same generic paddings across the whole document. The larger left padding is there to make room for the bullets/numbers.

li -- I pad the bottom of these slightly as it just looks nicer to have the bullet points pushed apart a bit. I wish more people did this on their designs as bullet points without that gap are often hard to follow.

#mainMenu, #footer ul -- both menus get the same style... no bullets, centering, half an EM padding, and a different background-colour. I made this closer to your yellow so the menu stands out like a band. I also went with a much more subdued border as the divider before these menus.

#mainMenu li, #footer li -- I set these to display:inline so as to strip most formatting off them. This avoids a lot of cross browser headaches when styling menus. Instead we'll be styling the anchors inside them for our appearance. I have to declare padding:0 on them to override the global rule for our normal content lists.

#mainMenu a, #footer li a -- these anchors are set to inline-block so they'll obey top and bottom padding and exhibit other block-level behaviors while remaining on a single line. The border you had between them (using the vertical break character, which is a no-no) really didn't look good so I just went with a nice fat padding between them. I bump the font size, lower the line-height, kill off underlines and colour them. Nothing too fancy.

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover,
#footer li a:active,
#footer li a:focus,
#footer li a:hover -- the hover and keyboard navigation states just change the colour to make the mouse-over or key nav more visually apparent. TECHNICALLY :focus is the keyboard hover state, but some older browsers misuse :active (which on an anchor should only fire when it's been clicked) for that. Good rule of thumb is that if you have a hover effect on an anchor or input, use all three!

.plate -- standard plate image behavior of block level centering with a bottom padding. Again, nothing fancy.

.qna dt -- I added a little bottom padding to the definition terms just to tweak the appearance slightly.

.fancyLink,
.fancyLink span -- I replaced one of your images by generating it with CSS. This means the text is proper text images off and/or for search and non-visual UA's. Setting them to inline-block puts them into a mode where we can pad the top and bottom, and the vertical align makes them have the same alignment behavior across all browsers.

.fancyLink -- the outer one I margin the top just to push it away clean, give it 1px of padding with a white background for that inner border, with the outer-border being black. I punched the line-height to increase the size of the content vertically without needing to try and use padding.

.fancyLink span -- the inner span gets the orange background and padding on the left to push the text away from that edge. I gave it some text-shadow to increase legibility on modern platforms and some shadow effects to make it look more like a copper-top. (which I assumed was the look the image was aiming for). End result is a "rounded" effect.

.fancyLink span span -- the span inside the span inside the span gets padded on both sides, and a margin on the left to push away from the text on that side. That margin is lower as there's a space in the text we want there so that the text makes sense grammatically. (remember, <span> does not imply any semantic meaning to it's contents!)... I then give it the dark grey background (I didn't use black as I wanted to see the gradient on the bottom) and that white left border to divide the copper top from the black bottom.

Boom, no image needed for that button. You could go even further to style it for hover effects and the like.

#footer -- text align, bottom padding, yawn.

#footer ul -- bottom margin pushes the text after the menu away from it mimicking the bottom padding on #footer. Likewise a border-bottom on the menu makes the divider appearance more consistent with the rest of the page.

... and that's most of our base "legacy" and "modern desktop" appearance. On to our media queries.

max-width:46em -- for this query if the page is narrower than that, and we can detect it thanks to the media query we know we can adjust the layout, so drop the min-width on body allowing the page to go smaller. I decrease the line-height as a smaller display it's nice to fit more text in, likewise I kill the top and bottom padding as serving no purpose. Likewise I strip the rounded corners off #top and lower the padding on all the content elements so we can squeeze more into that smaller space. I also tweak the menu padding so the menu items are larger "finger sized" targets making it easier to be sure you are clicking on the right ones.

I would consider giving the menu items background shading and clear divisions between them to make it clearer that they are in fact buttons on mobile, but that's a personal preference thing. I left that alone for now.

For this layout that's all we really need to do in terms of being "responsive" from a layout perspective. A more complex layout with columns would need to strip those off or re-arrange them appropriately. All that remains is a couple bug fixes.

max-width:512px -- on legacy iOS and Windows devices they will incorrectly force a text-resize on our layouts. While this has been dropped on newer high resolution devices, there are many such units still in circulation so we need to tell them not to do that. Thankfully none of the devices that "need" this are more than 480px wide, I use 512px as the trigger. Normally you'd think we could send this to all devices, but Safari on OSX will incorrectly read that value and use it to disable zooming -- a giant no-no from an accessibility standpoint. What makes that laughably pathetic is that this value does NOT disable zooming on iOS (mobile) based Safari making it a real herpafreakingderp on crApple's part. The media query is a decent choice since it's highly unlikely that a desktop user seriously using the page is going to have the render space narrower than 512px... and if they do, OH WELL. We can only bend over backwards to support people so far before everything breaks.

(-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
(min-resolution:172dpi) and (min-width:1600px)

This one's a doozy. While Apple's newer "retina" displays will flat out lie to use about their resolution no matter what we set for CSS or viewport meta or whatever, many newer high resolution devices -- like Amazon's Kindle Fire HDX -- do not. Amazingly Apple's behaivor in this case is a good thing as it makes supporting the really small displays with really high resolutions a non-issue... but on "HDX" devices you end up with illegibly useless tiny pages leaving you diving for the zoom. Thankfully the device-pixel-ratio and min-width values can be used as triggers to detect said units, allowing us to bump the font-sizes page-wide. Since ALL the measurements used up to this point is %/EM on fonts and EM for widths and paddings, and we declared those on BODY, we can set them to 200% on HTML and the entire page will double the render resolutions -- normalizing the appearance on HDX devices.

That's a stopgap fix for now -- as more such devices come down the pipe I'm hoping through experimentation to come up with a more robust and reliable solution; or hoping that maybe the vendors themselves will give us one.

... and that in a nutshell is how you'd take that existing layout, fix the accessibility issues, tart it up a bit, and make it work across as many size devices in as usable a manner as possible.

Hope that helps. I do these types of rewrites from time to time, and I know this is a LOT to take in; but take your time, digest it all, and come back with questions.

Remember, there's no such thing as stupid questions, only stupid answers.

Examples of stupid answers:
"Use jQuery"
"Use Bootstrap"
"Use Dreamweaver"

 

Simply use Adobe Dreamweaver to build your sites. Dreamweaver can preview your sites in different media. Then tweak accordingly.

 

As @deathshadow wrote immediately before your comment:

cheers,

gary

 

Because some bloated, overpriced, idiotic halfwit mouth-breathing dumbass WYSIWYG is going to let you do a full graceful degradation plan; and if you don't use it as a WYSIWYG why would you waste the time, money and effort on what actual browsers and a free flat text editor can accomplish.

As Dan used to say, the only thing you can learn from Dreamweaver is how NOT to make a website.

... hence why it's usually a pretty good indicator that when someone says "use Dreamweaver" they don't know enough about HTML, CSS, accessibility, or websites in general to be flapping their gums on the topic.

 

Did you not read the OP's post? He said he's not a coder.

 

He also said he's coding it himself, so which is it. Either way if you don't want to code, dumbass crap like Dreamweaver isn't going to magically fix it. All that's going to do is blow smoke up his ass like the rest of the predatory sleazy dirtbag bullshit out there!

Sorry, I'm through playing nice on the subject. (Oh, crap, NOW he's through? What the hell's the past decade been? You mean he's been playing NICE until now?!?)

Can't handle that, probably shouldn't be making websites in the first damned place!

 

I'm aware of that but an 11 year old can also build a website too. If you bother to look at his website, you will know right off the bat, he's not a coder by any means (as he admitted to) - and it's going to take quite some time to learn real coding (not html and css). I only recommend Dreamweaver as a quick fix, for someone who is not a coder.

 

What you should tell people who are not "coders" is "hire a coder" - because adding bloat, cost and such on top of other issues will not really help in any way. Given that you will have to buy Dreamweaver, use that money to hire a coder for a few quick fixes instead. Or, even better, follow along @deathshadow when he rebuilds your site for free.

Sidenote: calling yourself a coder when writing HTML and CSS is... not really accurate. You're not coding anything, you're at best putting stuff within semantic tags, to define their importance and order. Hardly coding.

 

You need to build a responsive website to get more traffic on it. If you are going to run a mobile friendly website then you must allocate the best positioning of each option. Make tabs that are more relevant and design it in an easy way to understand. Language should be easy and concise. The best thing is hiring a company who could provide you these services so that you could drag the relevant traffic as well for your business. All the information that you people shared over here is useful and good learning for new business entrants specially.

 

First off..thanks everyone for their input/suggestions! Very much appreciated!

Okay..maybe I can explain my understanding of what a coder is to me and why I never will call myself a coder (kinda stating the obvious).
Just cause I can use a hockey stick, doesn't make me a NHL superstar..
or just cause I can dribble a basketball, doesn't make me a LeBron James..

That site was my first attempt at making my own website (pretty sure around the "GeoCities" days (yahoo site and before Google)). Coding sure has changed since then!
So every now and then, I would "change" the site, and obviously with out-dated coding. Guess cause it my first site, kinda don't want to let it go...
Anyway, thanks again for all the input!

 

Website are made mobile friendly by employing media queries in the CSS. You can also use framework like bootstrap to make your website mobile friendly. Bootstrap is a free framework and can be downloaded from http://getbootstrap.com/getting-started/ .
Just to go in a little bit details on it. In bootstrap the width of page is divided in a grid of 12 and the framework automatically adjust and breaks this grid based on what screen (mobile, pc, tablet ) the website is viewed.

 

Yes. And to do that, Bootstrap fucks up semantics and proper HTML/CSS, and adds thousands of lines of code for simple procedures. Bootstrap isn't "easier", it's just lazy.