1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with CSS / responsive menu

Discussion in 'HTML & Website Design' started by Kenneth LaVoie, Apr 10, 2015.

0
  1. #1
    Hi there
    I'm just getting started in responsive design and need some help. I want the navigation buttons at www.jimsmoving.com to be nice and big and fat and wide when viewed on phone sized port (i.e. <480). My css isn't perfect and I'm sure there's SOME little thing I'm not doing...

    I have a second mouseover color, so when I "force" the the buttons bigger (like min-height: 45px; or min-height: 1.4em or the like) it works, but the mouseover color only happens in a small area...I've tried tweaking the hover state but to no avail. I could "hack it' and make it NOT change color on mouseover on the small view port, but I'd like to learn properly as I go along. Another small issue, the way it is now, you'll notice that when viewed on smallest port, the mouseover color obscures the bottom margin of the buttons.

    www.jimsmoving.com is the site
    www.jimsmoving.com/style.css is the style sheet. Should I paste the code in? I resist because it might be easier to trouble shoot (I'm thinking) if you can see the breakdown as the media queries are introduced...
     
    Kenneth LaVoie, Apr 10, 2015 IP
  2. braulio

    braulio Active Member

    Messages:
    70
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    95
    #2
    Greetings Ken,

    I suggest that you give foundation dot zurb dot com ( responsive website framework ). Learning curve is fast if you know html and css. Plus it is free.

    We have been using foundation on all our customer move to mobile and new customers also.

    It will alleviate all your issues.

    Contact me directly via my digital points contact page, you can also private message me directly.
     
    braulio, Apr 10, 2015 IP
  3. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #3
    You are inlining some of the CSS both directly and with script. that destroys the cascade and make the styling absolutely unreliable. To make matters worse the validator reports 33 errors and some of them look to be structural, which means all kinds of issues on most mobile devices which are very sensitive to unstable structuring.

    Cd&
     
    COBOLdinosaur, Apr 10, 2015 IP
  4. Kenneth LaVoie

    Kenneth LaVoie Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    I did fix a couple errors, but the only errors now (according to CSE validator) are things like I have a <div align = "justify"> (All "errors" are not created equal). I did try removing the two links to external "reset" css's but no changes...
     
    Kenneth LaVoie, Apr 10, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    You don't have a responsive layout, how are you expecting to add a responsive menu?

    Generally speaking what you have there is a laundry list of how NOT to build a website typical of what happens when you let ASP piss out markup the way it wants, instead of how HTML should be written. You've got a slew of issues like tables for layout, a complete and utter lack of logical document structure or semantic markup, a lack of separation of presentation from content, scripting doing CSS' job, and host of other issues that means if you care about mobile, or more importantly accessibility and device neutrality, that whole mess needs to be pitched in the trash and started over from scratch. There is little if anything I'd even try to salvage from that disaster of a codebase. (lemme guess, visual studio? Maybe something REALLY outdated like Frontpage?)

    Even the first line of code proudly proclaims many of the problems: "transitional" -- which literally means "in transition from 1997 to 1998 coding practices". Tranny is for taking sites written prior to 1997 and adding new stuff to them, NOT for writing new websites.

    Oh and anyone tells you to use a "framework" like foundation, blueprint or bootcrap? Ignore them, they aren't qualified to be flapping their gums on the topic as those ignorant halfwit mouth-breathingly dumbass sleazeball shortcuts are little more than code bloat creating MORE work, not less. Sorry @braulio, but no... just... ***** no.

    In any case, the first order of business would be to at the very least drag the markup kicking and screaming out of the mid 1990's... which would go something like this:
    <<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; height=device-height; initial-scale=1.0"
/>

<meta
	name="Description"
	content="Jim's Moving is a Burnaby based moving company providing moving services within the lower mainland and cross country"
/>

<meta
	name="keywords"
	content="movers,burnaby,pianom,vancouver,surrey,residential, commercial,langley"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Vancouver Moving Company, Burnaby Piano Movers, Surrey & Langley
</title>

</head><body>

<div id="top">
	
	<h1>
		Jim's Moving<br />
		<small>Relocation Experts</small><br />
		The best move with the least stress, PERIOD.
	</h1>
	
	<!--
		seriously, lose this flashtardery! this isn't 1997,
		AND it's an invalid flash embed in HTML 4. HTML 5 allows for it
		but that doesn't make it good practice.
	-->
	
	<embed
		id="headerFlashCrap"
		width="531" height="257"
		src="/_mnweb/swf/imagerotator.swf"
		wmode="transparent"
		allowscriptaccess="always"
		allowfullscreen="true"
		flashvars="file=/ImageListXML.aspx%3FImagePrefix%3Drotat%26size%3Dnormal&amp;shownavigation=false&amp;transition=fade&amp;rotatetime=2&amp;shuffle=false&amp;screencolor=0xFFFFFF"
	></embed>
	
	<ul id="mainMenu">
		<li><a href="/">Home</a></li>
		<li><a href="/quote">Quote</a></li>
		<li><a href="/specials">Specials</a></li>
		<li><a href="/testimonials">Customer Testimonials</a></li>
		<li><a href="/contact">Contact</a></li>
	</ul>
	
	<div id="content">
	
		<div class="trailingPlate">
			<a href="/quote">
				<img
					src="images/1138209.jpg"
					alt="Moving? Click here for free estimate!"
				/>
			</a><br />
			<a href="http://www.yelp.com/biz/jims-moving-burnaby">
				<img
					src="images/yelp.png"
					alt="We have twenty-six five-star reviews on YELP!"
				/>
			</a>
		<!-- .trailingPlate --></div>
			
	
		<p class="featured">
			<strong>SPECIAL SPRING RATES $96 PER HOUR FOR TWO MEN AND A TWO TON TRUCK AND $99 PER HOUR FOR TWO MEN AND A THREE TON TRUCK! IT'S NICE TO HAVE CHOICES!</strong>
		</p>
		<ul class="featureList">
			<li>Plus travel time and tolls (If applicable)</li>
			<li>No other hidden fees, and we mean it!</li>
		</ul>
		<p class="featured">
			Proudly Presenting 25 Years of EXCELLENCE In Moving! How Do We Know? Customers Tell Us SO!
		</p>
		<blockquote>
			<p>
				The best move with the least stress, period.
			</p><p>
				I would like to thank you for your service on November 11th. There's a saying in our language which goes something like "A move is worse than a fire". But thanks to you and Tyler, moving from our old house to a new one was the most pleasant that I've been a part of, and this includes helping my old buddies years back at grad school! Thank you for being so careful, attentive, and positive. I'll recommend you guys to my friends and colleagues.
			</p><p>
				All the best
			</p><p>
				<cite>Alexei , Delta, BC</cite>
			<p>
		</blockquote>
		
		<ul class="specialties">
			<li>Commercial</li>
			<li>Residential</li>
			<li>Piano Moving</li>
			<li>Local and Long Distance</li>
			<li>Furniture Installation</li>
			<li>Wall Mounted TV Installation</li>
			<li class="feature">LICENCED</li>
			<li class="feature">BONDED</li>
			<li class="feature">INSURED</li>
		</ul>
		
		<h2>NO MOVE TOO BIG OR TOO SMALL!</h2>
		<p>
			2, 3 and 5 ton trucks available
		</p>
		
		<div class="locations">
			<h2>STORAGE AND BOXES AVAILABLE AT THESE FINE LOCATIONS</h2>
			<a href="http://freewayministorage.ca/">
				<img
					width="253" height="104"
					src="/_mndata/jimsmoving/uploaded_images/1195573.jpg"
					alt="Freeway Mini Storage"
				/>
			</a>
			<a href="http://bungobox.ca/">
				<img
					width="381" height="110"
					src="/_mndata/jimsmoving/uploaded_images/1264441.jpg"
					alt="BungoBox. Move, Pack, Now Give'em back."
				/>
			</a>
		<!-- .locations --></div>
		
		<p>
			We service ALL OF WESTERN CANADA! With JIMS MOVING you can be sure that your furniture will arrive in the condition it left because at JIM'S MOVING  we care.  We back every move with our track record of 25 years of experience and our <strong class="standout">UNCONDITIONAL SATISFACTION GUARANTEE!</strong>
		</p>
		
		<h2>No Stress, PERIOD! Worry Free Move!</h2>
		<p>
			CALL NOW FOR A FREE ESTIMATE<br />
			<a
				href="skype:+16042993227?call"
				title="Call us on Skype Now"
			>604-299-3227</a>
		</p>
		<blockquote>
			<p>
				"I have used Jim's Moving four times now over a span of ten years. In that time I tried using another moving company once, and boy did I regret it; I ended up calling Meredith when the first moving company couldn't get the job done. There has never been a task that these guys couldn't tackle: sofas that barely fit through the stairwell, commercial treadmills, apartment buildings without elevators, they even used leftover time to help us dismantle an old piano so that it would cost less when we had it removed by the rubbish company. As important as the actual move is, attitude is equally important and Meredith knows when to joke with the client and when to be professional; by the end of your move you feel like you've gained a friend.
			</p><p>
				If I ever move again, and I do hope it's a long time before that day comes, I won't even waste my time trying another moving company - I'm going straight to Meredith and Jim's Moving."
			</p><p>
				<cite>Tanya Edwards -Moved May 28th, 2013.</cite>
			</p>
		</blockquote>
		
	<!-- #content --></div>
	
	<div id="footer">
		<a
			href="skype:+16042993227?call"
			title="Call us on Skype Now"
			class="trailingNumber"
		>604-299-3227</a>
		Burnaby, BC
	<!-- #footer --></div>
	
<!-- #top --></div>

</body></html>
    Code (markup):
    Which at barely over 6k is less than a tenth the decade and a half out of date code that was being vomited up for that page.
    .
    I'm out the door for another EKG/EEG/bleed me like a stuck pig appointment, but if I have the time this evening I'll belt out the relatively simple CSS that would drive the functionality of that rewrite, including full responsive design. I do these rewrites from time to time for people to show all the advantages of the proper site building techniques that most of these automated/nonsense "tools" and "frameworks" saddle people with... and out of kindness.

    -- edit -- wait, you might already know my rewrites since I seem to have a Maine fence company site rewrite I showed you at some point? Gah, my memory is getting horrible.
     
    deathshadow, Apr 10, 2015 IP
  6. Kenneth LaVoie

    Kenneth LaVoie Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    OH MY GOSH! That's NOT my website. Mine is www.jimsmovingME.com and the stylesheet is jimsmovingme.com/style.css - I'm so sorry for that.

    I was wondering why everyone was jumping on it so badly! Tables? Not s single one! Then I looked at my URL .. argh...sorry to waste your time. Take a look now and you'll see a MUCH simpler structure. This is straight from notepad, using tutorials. CSS3, html5. I'm sure if you're at all experienced, you'll find flaws but not he ones you found from jimsmoving.com! haha.

     
    Kenneth LaVoie, Apr 10, 2015 IP
  7. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #7
    OOOPS!

    Edit to remove comment aimed at the wrong site. :oops:

    Cd&
     
    COBOLdinosaur, Apr 10, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Ok, that makes a heck of a lot more sense, and is way more consistent with what I helped you with in the past.

    That page's biggest problems seems to stem from your fixing the heights of things that shouldn't be fixed and the use of pixel metric elements mixed with dynamic ones. That shouldn't be too hard to clean up, I'll take a closer look when I get back.
     
    deathshadow, Apr 10, 2015 IP
  9. braulio

    braulio Active Member

    Messages:
    70
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    95
    #9
    This is a forum and everyone is welcome to express their opinion. It is up to the person posting the question to filter through all the possible options and select the best solution which can be implemented quickly and also provide a learning experience.

    Reinventing from scratch is an option but it is not always the most practical and efficient solution.

    We must assist the person asking the questions by providing all the possible options and recommend one. There may be differences of professional opinion but we must all remain objective and emotionless like good engineers.

    Every suggestion that I post is an engineered solution well thought out and arrived at it in a logical manner. It is how my engineering mind is programed. I am a suma cuma laude in engineering.

    I prefer to use standard i beams instead of reinventing beams to build a building. This is an analogy of the situation and there are many other analogies. For example, I will buy car but I prefer to build it myself.

    The person asking the question must select the best solution and reviewing every possible option using a pro and con for each option. His selection must not be based on who best insults, yells the loudest, pushes the hardest or solves his problem by solving it for him, this is the neanderthal way of convincing people and lacks finesse.

    Let us all back up our recommendations with data. In god I trust, all others bring data.

    Braulio
     
    braulio, Apr 10, 2015 IP
  10. Kenneth LaVoie

    Kenneth LaVoie Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #10
    No offense taken! That site had it coming!
     
    Kenneth LaVoie, Apr 11, 2015 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    Ok, I actually did 90%+ of this yesterday but ended up having company over so I didn't finish up until now.

    Now that we can see the site you ACTUALLY wanted help with, while it's nowhere near as bad as the other one it still has a number of failings... like the presentational use of classes, presence of things like "align" in th emarkup, a lack of logical document structure or useful document order, and some other issues I would HIGHLY suggest cleaning up before worrying about making the menu mobile friendly. There's no reason to throw silver bullet fixes at a page this early in it's development cycle when the fixes/changes are minor at best.

    So let's go through the list of issues and new markup first.

    First thing that grabs my attention is your META. The description META exists to be the text shown below the link on the SERP You combine your existing TITLE with your existing "description" and search should be showing this on the SERP:

    Moving Companies Central Maine - Jim's Moving 32 Pines Rd. Benton Maine (207) 453-0070
    Moving Companies Central Maine - Jim's Moving 32 Pines Rd. Benton Maine .

    That's not a very useful SERP. Since TITLE's job is to be shown as the window title, tab title, and the link on the SERP I would suggest gutting that down to

    <title>Jim's Moving</title>

    For the home page, and on sub-pages go with:

    <title>About - Jim's Moving</title>

    or

    <title>Our Services - Jim's Moving</title>

    Which is consistent with how browsers format them (seriously why the hell do people use vertical breaks there?) and would be FAR more useful as window/tab/serp titles. Then make the description somethign in natural language that's more useful than data (like the physical address) that doesn't convey meaning to the visitor.

    <meta
	name="description"
	content="An affordable locally owned dependable and fully insured moving company in central Maine. Call (207) 453-0070 for a quote."
>
    Code (markup):
    Which would give a home page SERP listing of:

    Jim's Moving
    An affordable locally owned dependable and fully insured moving company in central Maine. Call (207) 453-0070 for a quote.

    A far more useful and professional looking result.

    Your META[keywords] pretty much misses what keywords is for -- It's called keyWORDS -- not keyphrases, not keysentences, but keyWORDS -- even or eight words that exist inside your BODY tag as CDATA you want a slight upranking on. MOST people think keywords is ignored just because they don't use it right. MOST of your "keywords" in there don't even exist inside BODY, so you are guaranteed to have that tag be nothing more than code bloat serving no purpose.

    <meta
	name="keywords"
	content="mover,moving,company,maine,local,budget,stress"
>
    Code (markup):
    Again, seven or eight words that exist inside BODY -- that's ALL "keywords" is for. Do not stuff it with terms that don't exist in the document or it WILL be ignored.

    Next you have no media target on your LINK... I'm so sure your for screen layout is meaningful on print, aural or legacy handhelds (not). I suggest this:

    <link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>
    Code (markup):
    Screen is quite obvious; a lot of browsers in KIOSK or full screen operation (Opera, FF) report themselves as projection instead of screen, and there are devices fully capable of using screen layout (Wii and MSN boxes for example) that report themselves as TV instead... it's safest to include these three so you hit the relevant devices, while not sending CSS to devices where it's pretty much gibberish.

    Having an outermost width constraining DIV makes sense, but simply calling it "container" is a bit vague. I prefer to use an ID like #top for it, so in addition to having a nice wrapper I can also reference it using getElementByID or by hash in the URL. If later on you had a really long page and wanted to add <a href="#top">Back to Top</a> it already provides the hook for that.

    The next bit is the "lack of logical document structure" part -- you are loading a static image that REALLY isn't meant for responsive design inside a "DIV for nothing". That should be a H1 with text and preferably an anchor linking back to the home page. I would put ALL the text used in the image on the page as text. You want the fancy appearance use a webfont. (I skipped that for now).

    	<h1>
		<a href="/">Jim's Moving</a>
	</h1>

	<div class="headingInfo">
		32 Pines Road, Benton Maine <span>(207) 453-0070</span>
	</div>
    Code (markup):
    H1 is the heading under which EVERYTHING on the page is a subsection. That's why the site title makes the most sense there. The address isn't a complete grammatical thought in document flow, so it gets a DIV instead of a semantic tag like P. I tossed the span in there so if desired we can target the phone number separate from the addy.

    You're opening up a sidebar with two DIV that aren't really doing anything for you, and double-breaks doing padding's job. Honestly that extra gap is ugly anyways so I'd axe that. I would retain ONE of the DIV for use as a show/hide on the menu when the screen is smaller. This can be done with two anchors using :target and generated content without any scripting or abusing a form element thus:

    	<div id="mainMenu">
		<a href="#mainMenu" class="showMenu"></a>
		<a href="#" class="hideMenu"></a>
		<ul>
			<li><a href="index.shtml">Home</a></li>
			<li><a href="about.shtml">About Jim's Moving</a></li>
			<li><a href="services.shtml">Our Services</a></li>
			<li><a href="facilities.shtml">Request an Estimate</a></li>
			<li><a href="contact.shtml">Contact Us</a></li>
			<li><a href="jobs.shtml">Other Resources</a></li>
		</ul>
	<!-- #mainMenu --></div>
    Code (markup):
    Due to how it ends up on mobile, rather than confusing things trying to use flex-box I would build the layout with the firstLeft-contentRight-secondOverflow negative margin trick... This moves the extra copy of address, contact info and hours after the page content which is slightly more useful at mobile resolutions. This requires a double-div on the content so we can have 100% width and a negative margin, with padding or margin on the actual white content box. Since we have a H1, the content area should start with a H2, aka the start of a subsection of that h1. In that same way the "extras" area of contact info and hours should both be h2 as well; siblings structurally to the content. (Since H3 would make them subsections, and that's gibberish).

    	<div class="contentWrapper"><div id="content">

		<h2>Small, Locally Owned, Dependable, <span>and FULLY INSURED</span></h2>
		<img
			src="images/moving-boxes-sm.jpg"
			alt="some small boxes"
			class="trailingPlate optional"
		>
		<p>
			Jim's Moving is considered one of the best local moving companies in the Central Maine area and provides quality moving services to many customers each year. Our professional, caring local movers are trained to provide the highest quality service.
		</p>
		<h3>Why are we different from other local moving companies?</h3>
		<ul>
			<li>We care about delivering a stress free move</li>
			<li>We have exceptional moving skills</li>
			<li>We tackle moves small and large</li>
			<li>We offer the best possible value for your moving budget</li>
			<li>We aim to be the Best Moving Company</li>
			<li>We have 15+ years of local moving experience</li>
		</ul>

	<!-- #content, .contentWrapper --></div></div>

	<div id="extras">

		<h2>Contact Info:</h2>
		<b>Jim's Moving</b><br>
		32 Pines Rd.<br>
		Benton, Maine 04937<br>
		Phone: <a href="tel:+12074530070" class="phoneLink">(207) 453-0070</a><br>
		Email: <a href="mailto:support@jimsmovingme.com" class="mailLink">support@jimsmovingme.com</a><br>
		
		<div class="hours">
			<h2>Hours:</h2>
			Monday - Friday,<br>
			8:00am - 5:00pm<br>
			Eastern Time
		</div>
		
	<!-- #extras --></div>
    Code (markup):
    I put the extra DIV around hours should we want to style it diferently (which I ended up doing). Remember that you aren't actually emphasizing the company name, it's a title. Titles would be bold in professional writing without emphasis, making <B> the semantically correct tag. Remember, B and I do have the semantic meaning of "would be" not the presentational meaning of "must be" or "are". Hence why STRONG and EM are NOT replacements for B and I, all four have separate meanings!!!

    Since the footer doesn't have or warrant a heading and is NOT part of "hours" we put a HR in there. We don't want the line or that style of line we hide it. All of this being why the mouth-breathing dumbass HTML 5 nonsense of SECTION, NAV, ARTICLE and FOOTER are pointless code bloat and semantically redundant/pointless.

    There's not really a flow paragraph gramattically there either so just the wrapping DIV will get the job done.

    	<hr />

	<div id="footer">
		Website &copy; 2015 <b>Jim's Moving Company</b> <span>|</span>
		Website Design &amp; Hosting by
		<a href="http://centralmaineweb.com">Central Maine Web Responsive Design</a>
	<!-- #footer --></div>
    Code (markup):
    Again, bold since it's a title non-emphasized. I put the vertical break in a span so it can be hidden when reformatting occurs at smaller sizes.

    Then we just close out the document.

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

</body></html>
    Code (markup):
    One other thing to mention, notice my commenting style? You had this:

    </div><!--end contact div-->
    Code (markup):
    That's bad for a few reasons. First off you don't have to say "end" or "div", that's what </div> means! Second and much more important comments between sibling level elements can trip rendering bugs in legacy IE and every other update to FF (just like how IE8 and every other release of FF screws up the behavior of LI). Putting the comment after the element runs the risk of either the "disappearing content" bug, where the element renders but the CDATA does not... or the "double render" bug where the element is drawn twice on the screen offset by 8 to 14px over itself. It can drive you NUTS when it rears it's ugly head trying to figure out what's causing it, and it is often what makes many people dive for hacks to try and correct something that's as simple as just changing the commenting style to:

    <!-- #content --></div>

    It's silly, it's stupid... and it works. I don't argue with what works. Though I am increasingly finding with all the scripttardery, frameworks and other ignorant mouth-breathing dumbass BS out there my definition of "works" is wildly different from that of others.

    Bending that markup to our will with CSS, this is the result:

    http://www.cutcodedown.com/for_others/KennethLaVoie/site2/template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/KennethLaVoie/site2/

    is unlocked for easy access to the bits and pieces.

    Behaviorally I made it adjust the layout as needed to fit the different resolutions, axing the header image at smaller sizes. REALLY that header image is pointless, ugly, and completely irrelevant to the content so I'd REALLY rework that into something that was actually responsive friendly. Remember fixed size images and image scaling is for suckers when it's presentational nonsense.

    ... and really during content generation -- which should have been done LONG before markup or layout were created -- RELEVANT images should have been pulled from the client to fill out the page and presentation; like pictures of the actual staff, them moving something into one of those trucks they're bragging about, etc, etc... remember, content FIRST, and placeholders/stock images just look like stock images.

    Try it at differerent screen widths on modern browsers. It also works after a fashion in legacy browsers as a fixed elastic layout. It could be semi-fluid with a narrower fixed for even older browsers once you get a more 'useful' and design friendly heading/logo design in place... While it loses some stuff like shadows and rounded corners, this approach should be 100% compatible back to IE 5.5 and 5.2 Mac with little to no extra effort having been involved.

    Gimme a while and I'll belt out a breakdown/explanation of the CSS to go with this after lunch.
     
    Last edited: Apr 12, 2015
    deathshadow, Apr 12, 2015 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    Alright, here's the CSS breakdown, follow along with:
    http://www.cutcodedown.com/for_others/KennethLaVoie/site2/screen.css

    As my starting point when designing responsive I always use the lowest common denominator. For some jacktard reason many alleged "experts" out there seem to think that means non-media query capable mobile. This is back-assward thinking since those devices never amounted to significant numbers even in their heyday, and are still vastly outnumbered by a much more common browser target: Pre CSS3 desktop browsers.

    This works with the notion of semi-fluid elastic layout and graceful degradation as it's usually easier to take things away from a layout (like columns) than it is to add them. It's just simpler to say "Let's make our IE8/earlier layout first" and then enhance it with media queries, than to try and take a mobile design and turn it into a desktop one.

    I always start out with this reset in my code:

    /* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}
    Code (markup):
    It gives a nice easy baseline cross-browser so I dont' have to fret about saying margin and padding on EVERY blasted element. It's just simpler. There are smaller resets like the so-called 'universal' one of "* { margin:0; padding:0; border:0;}" but that can REALLY screw with form elements making a right mess of things. There are larger resets like Eric Meyer's 'Reset Reloaded', but that bloated train wreck is damned near a framework and wastes time setting several dozen things that have nothign to do with how I build a page; to be frank resets like Meyer's are what gives them a bad name and why many developers rail against the very notion of using a reset.

    The one I use is a nice compromise middle-ground. One we can all thank Dan Schulz for coming up with.

    HR -- since HR are for a semantic change in topic and does NOT mean "drawi a line across the screen", we hide them for our screen media target. They will still show up for non-screen media devices and provide our semantic document structure.

    @media (max-width:480px) -- this query up top deals with that some Winblows and iOS devices with smaller screens will try and disastrously screw with the text size on the assumption that websites were NOT designed to be mobile friendly. This is basically a cousin to the "viewport" META that tells these browsers "Hey jackass, we know what we're doing". I put this in a media query to deal with the fact that if -text-size-adjust gets sent to desktop OSX Safari, it disables zooming which is, well... really jacktarded when it does NOT screw up zooming on iOS Safari. (yeah, that makes sense, thank's crApple!)

    html, body -- I set 100% height here so that background stretches properly and if we want to use a 100% min-height we can. I'm in the habit now of saying it just so I don't have to worry about the various oddball behaviors that can crop up without it.

    body -- bottom padding so that we can see some nice rounded corners on #top later on... Background colour is nothing to write home about, and then there's the font setting. I always use the condensed FONT property so I can see EXACTLY what's being set and where. I set on body the font that 90%+ of the content will be so that I only have to set different the handful of things like headings that have a legitimate reason to be different.

    #top -- I rarely go with a fixed elastic width, and would probably axe that on a production site, but that static heading image is such a mess it's the only practical option for non-query capable browsers. This size is also bigger than I would care for in a fixed size, but one works with what's available. Rest of it is just centering and style. I created a 'stripe' of the left-most 1px wide of that header image and tile it here so that when the screen is wider than that image (like that 72em delivering 1224px width at 120dpi/large fonts) we continue the general "look" of it. Realistically if I were to rework that header area I'd separate out the smiley with a cap so it could be moved or removed, letting us leverage the rest of that header as sliding doors.

    h1 -- set the height, load that header image as it's background. Nothing fancy.

    h1 a -- setting it to block lets us pad it top and bottom and have text-align obeyed. I pad the top and sides and strip off the underscore. Normally PX metric fonts are an accessibility /FAIL/, but since we have a image interaction we're pretty much forced into it. If you want that fancy script I'd do that here using a webfont instead of putting it into the image, that way it stays a legible size instead of that useless "shrink" you had going on.

    h1 a, .headingInfo -- these share alignment, colour and text-shadow, so put them together.

    .headingInfo -- padding and size are nothing fancy, again PX since we've got that pesky image interaction. The negative top margin rides it up over the h1 to where we want it appearance-wise. We then pad the bottom to make sure the menu goes where we want it.

    .headingInfo span -- setting this to block moves the phone number to it's own line. At different sizes we may want it as a single line... see the media queries later on.

    #mainMenu -- the start of our "left-right-overflow" content in the middle of a column method. I add clearing just to be sure we're pushed past the floated H1. The relative positioning depth-sorts this element over any non-positioned siblings, important since our .contentWrapper will in fact be overlapping this element. (stick with me on this, it's tricky but slick). Float it, give it an elastic width, and we're good.

    #mainMenu ul -- strip bullets, padding, YAWN.

    #mainMenu li -- whenever possible I prefer on menus to set the LI to display:inline basically stripping formatting off them. This can avoid all sorts of headaches with how both IE8 and some builds of Gecko based browsers treat LI.

    #mainMenu li a -- we include the LI in this selector since we also have the show/hide anchors as children of #mainMenu. Styling on these is pretty straightforward and shouldn't need much explanation.

    #mainMenu a:pseudo -- this I don't include the LI so when we show the hide/show menu anchors they too have a hover state. Remember that :focus is for keyboard navigation behavior, and that some legacy browsers use :active (which is supposed to be when it's clicked on) instead of :focus. Usually if you make a hover state, set these as well if it's an input or anchor. ... and remember that things other than input/textarea/select/button or anchors do NOT have :active or :focus so don't waste time with that on those!

    .contentWrapper -- here's the start of our real magic. A 100% width right float usually has no space to fit next to a left float. By setting a negative right margin equal to the width of #mainMenu we narrow this box in "flow" so it's 17em narrower than the declared 100%, but will still DRAW 100% width. This makes it overlap our left floated #mainMenu hence that positioning to depth-sort it. If you need positioning on .contentWrapper in the future be sure to add z-index to both, otherwise you won't be able to use the menu.

    #content -- the left margin pushes the content area over to where we want it while keeping it fluid. Rest of it is just padding and style.

    #content h2 -- again, just some simple style.

    #content h2 span -- as the width changes I thought it looked nicer to keep that section of text together. We will set and unset this a few times in the media queries.

    #content h3 -- simple style at the start of that subsection.

    #content ul, #content ol, #content li, #content p -- simple padding for the content area version. I like to do padding instead of margin particularly at the bottom of elements so I don't even have to THINK about margin-collapse issues.

    #extras -- since the right floated #content is 17em narrower, and we have a 17em float above, this will ride up into the available empty space. Setting overflow:hidden makes the element obey both floats (instead of riding up behind them!) and a haslayout trigger makes it work all the way back to IE 5.x. some simple style and we're done with the left-right-overflow two column design.

    #extras h2 -- headings for the subsections, simple style.

    #extras a, and it's pseudo -- just some simple colouration to match the different background.

    .trailingPlate -- a float style for plate images.

    #footer -- again a clear just to be sure we're past any and all floats, padding... I added text-shadow to make it a bit easier to read since the background lacks sufficient contrast for white text, but black text was ugly as sin.

    Style the anchors for the footer and we're ready to do media queries.

    max-width:63em -- I declare 63em since the 72em on BODY is off 85% font-size while media queries are NOT. It's a bitwider but this is so we can make the layout take up the entire screen space instead of wasting extra padding.

    First we restyle body to lose the background-image and excess padding, then we open up #top to be fully semi-fluid with auto-width. Min-height will stretch the background to cover the entire page. I added a box-shadow to mimic the 'fade' that your image had. The h1 I float left and adjust the paddings of it and the anchor so that .headingInfo can be moved up next to it on the opposite side. I hide any elements with the "optional" class (like those boxes) as a waste of space since that's more presentation than content. If you end up with an actual content image lose the optional class there but with that image? Just get rid of it.

    max-width:50em -- at this size splitting the footer into two lines just looks nicer. By making the vertical break inside the span not render using visibility:hidden and shrinking the font-size and line-height to 1px, setting display:block splits the footer into two lines.

    max-width:48em -- at this size it's time to hide the menu as it takes up too much space before what people came to the page for -- the CONTENT. First we move the h1 and .headingInfo back to being on the right one over the other so we can make room for the "show/hide" anchors. We strip off all floats from the menu, the UL, .contentWrapper and #content so it's a single column layout, then adjust the menu so it can wrap floats. Setting the LI to floated and 50% width lets us have the menu as two columns since there IS enough room at this point to do so. Alternating borders on the anchors with nth-child lets us have 2px right down the middle.

    Using the direct child selector #mainMenu>a we can set style common to both of the show and hide anchors. We then use generated content to plug in the "show menu" or "hide menu" text with some nice UTF-8 geometric characters to give it a bit of extra indication. When #mainMEnu is targeted we want to hide .showMenu but when it's not targeted we want to hide .hideMenu and the menu itself (the UL). When it is targeted we want to show .hideMenu and the UL. Boom, there's a show/hide menu using nothing more than a pair of hash links... The reason we use generated content is so that search engines don't see those links and they don't appear to non-css users. (something scripttards often lose sight of, if it's CSS only or Scripting only it should be added by the CSS or scripting!)

    From there we just tweak the padding, margins and borders of everything furhter down the page. I also killed the line-breaks on .hours as it looks better as a single line filling that space.

    max-width:30em -- down this narrow the heading looks better centered and the menu set to fill width. Really that's all this query does to change things up is kill the two column float on the menu and adjust paddings and some of the white-space behaviors so as to better fit the screen size.

    max-width:20em -- this small just force the title (b) and anchors to go to single lines and turn back on word-wrapping behavior of the whitespace. While there aren't a lot of phones still in circulation with displays this small, it's 100 bytes at which point it's good to take the extra step.

    ... and that's how I'd have gone about it... kind of. Again, that header image thing needs to be redone to something responsive friendly.

    Hope that helps.
     
    deathshadow, Apr 12, 2015 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Sadly, in the case of the incorrect website, it would have been the only sane and rational approach; It would have been like trying to shore up the Tacoma Narrows bridge instead of just tearing it down. There is a point at which no amount of bailing wire, chewing gum and duct-tape is going to fix it; Sadly most 'fixes' people offer for sites like that being exactly that -- the engineering equivalent of getting advice from Uncle Red.

    ... because Joe forbid anyone be passionate about their craft, or WORSE, dare to call all the blaoted halfwit manure EXACTLY what it is.

    Well, it's all fine and nice to be waving around one's credentials, but to then piss on them by suggesting the maggot ridden pile of filth known as foundation greatly undermines that.

    Frameworks like Foundation, Blueprint, jQuery, Bootstrap and the rest are all the programming equivalent of having specifications (like HTML and CSS) specifying #5 bolts, and then being a cheap bastard and using #2's. Of course a GOOD engineer will go "I need 60K pounds of load bearing capability", figure out a number 5 exceeds that, and then write down #8's on the assumption that some sleazy contractor will go and use the next grade down to try and save a few cents per bolt; just as a good contractor would see #5's and put #8's in just so that it doesn't come back to haunt them in a few years. A good engineer is always a wee bit conservative on paper.

    ... and interesting comparison, but to be brutally frank most 'frameworks' -- including the disaster known as Foundation is the equivalent of ordering high carbon steel I-beams and someone shipping you pig-iron. Hell, some of them are so bad it's like having a specification say to use steel I-Beams, and the contractor decides a pine 10x18 will do the job.

    If you know even the SIMPLEST of things about what HTML and CSS are and how to use them, then you'd recognize that this:

     <div class="row">
        <div class="large-3 columns">
          <h1><img src="http://placehold.it/400x100&text=Logo"></h1>
        </div>
        <div class="large-9 columns">
          <ul class="button-group right">
            <li><a href="#" class="button">Link 1</a></li>
            <li><a href="#" class="button">Link 2</a></li>
            <li><a href="#" class="button">Link 3</a></li>
            <li><a href="#" class="button">Link 4</a></li>
          </ul>
        </div>
      </div>
    Code (markup):
    or this:
          <div class="row">
        <div class="large-4 columns">
          <img src="http://placehold.it/400x300&text=">
        </div>
        <div class="large-8 columns">
          <h4>This is a content section.</h4>
          <div class="row">
            <div class="large-6 columns">
    Code (markup):
    Is presentational use of classes, quite likely DIV for nothing, endless pointless classes (like button) due to a lack of understanding the "cascading" part of cascading stylesheets, and the antithesis of why HTML and CSS even exist. If you don't see anything wrong with that, to be brutally frank you likely have NO damned business building websites! - that or you might as well go back to using HTML 3.2 for all the semantics, accessibility and graceful degradation their nonsense provides. Idiots don't even seem to know how to use numbered headings properly... and we're suppsoed to trust that their bloated framework that gzipped is five times what an equivalent page should be WITHOUT compression is worth using?

    ... I want to call things like bootcrap or foundation "sleazy shortcuts" but they aren't -- as their presentational nature and bloated markup generally make MORE work. It's not easier, it's not less code, it's not even what I'd call functional design and it flips the entire development process around just as back-assward as what PSD jockeys try to call "design". At that point it's just sleazy, nube predation, and a way to have a sick buzzword to impress ignorant clients with while you scam the hell out of them.

    ... and I for one am sick to HELL of the scam artist bullshit being promoted as good practices.

    That may lack finesse, and may be a bit of missing link chest-thumping, but after watching client after client, user after user, and nube after nube being led down the garden path to failure by this idiocy that completely misses why HTML exists, throws EVERY good practice in the trash and pisses on the speed, accessibility and functionality of websites from orbit in a giant "**** you" to visitors to said sites... I'm FAR past done playing nice about it!

    Which is why when someone recommends idiotic halfwit mouth-breathing dumbass ignorant bloated bull like foundation, blueprint, bootcrap, YUI, etc, etc... I'm going to take them to task for it and question their mental fortitude; and if they can't handle that approach then I guess I just have to question their testicular fortitude as well.

    ... if nothing else, I'm so sure that the 500k+ (uncompressed) in a dozen or more files NOT even counting images that a foundation version of this page would end up is SO superior to the 12k in 2 or three files that it should be. The real laugh being the idiots (yes, I said IDIOTS) using foundation would probably end up writing MORE code in the process... because writing more markup is "easier", writing more CSS and starting out with twenty times the CSS a site should even have is "easier", saying what things should look like for ONE media target instead of what things ARE is "easier", throwing scripting at the page for nothing must be "easier"...

    [​IMG]

    Idiocy like frameworks is why for me as a user 80%+ of the web is less useful to me than it was a decade ago, why I have to dive for user.css and user.js to override crappy site design on places where the content is good enough for me to bother, and why if it wasn't for the fact that media delivery has migrated to the web (Netflix, Hulu, WWE Network, Pandora, Youtube) I'd have ripped the cable out of the wall and said **** it YEARS ago. Hence my disgust with the industry as a whole and why for the majority of people sleazing out these train wrecks of inaccessible crap all I've got is two birds; one for the developer and one for the source they code in on.

    Hardly a shock with the current trend in development throwing all the progress of the past decade and a half in the trash and instead going for the bleeding edge of pre-STRICT 1997 coding practices since again, most people crapping out websites still haven't bothered extracting their craniums from 1997's rectum!

    So... well engineered? Not so much. Engineers might actually bother following things like specifications and the intent of the medium. I have yet to see a website built with any framework -- including Foundation -- that is anything more than the engineering equivalent of DC-10 Cargo doors (because doors opening outward is brilliant on a pressure vessel), building multi-story concrete and steel housing on fill too close to a river, or the overhead walkway at the Hyatt Regency (what was that about a contractor cheaping out on parts?). Number of sites I've seen built with those types of tools that I'd consider to be "quality"? I can count them on no hands.
     
    Last edited: Apr 12, 2015
    deathshadow, Apr 12, 2015 IP
    COBOLdinosaur likes this.
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    Not to flog the deceased equine into the ground... but...

    As evidenced by code like:

    <div class="row row1">

    <div class=" small-12 columns medium-4 large-4 columns"><a href="index.html"
                                                               title="mobile website design | tablet, smart phone friendly | laredo"><img src="img/websitemedia.png"
                                                                                                                                 width="232"
                                                                                                                                 height="97"></a>
    </div>

    <div class="small-12 columns medium-4 large-4 columns aligntabletphonepic">
    Code (markup):
    or

    <!--start of 2nd row-->
<div class="row row2">

    <div class="small-12 columns medium-2 columns large-3 columns aligntabletphonepic">
        <img src="img/3471-101413-gs3471.png"
             width="220"
             height="220"></div>

    <div class="small-12 columns medium-4 columns large-4 columns"><h4>ABOUT OUR WEBSITE DESIGN</h4>
    Code (markup):
    Or...

        <div class="small-12 medium-6 large-5 columns"><h4 id="servicestitle">WEBSITE DESIGN SERVICES</h4>
        <ul>
            <li><h5>Custom website design layouts.</h5></li>
            <li><h5><a href="http://www.websitemedia.net/mobile-website-design/?p=34"
                       title="mobile website design | tablet, smart phone friendly website design | laredo">Mobile friendly
                                                                                                   website design -
                                                                                                   tablet and smart
                                                                                                   phone friendly</a>.
            </h5></li>
            <li><h5>Existing website design replaced with custom mobile friendly website design layout.</h5></li>
            <li><h5>Website redesign of existing website to fit mobile friendly website design.</h5></li>
            <li><h5>Search engine optimization ( seo ).</h5></li>
            <li><h5>Domain name registration.</h5></li>
            <li><h5>Email setup and adminstration.</h5></li>
        </ul>
    </div>
    Code (markup):
    You don't know what's wrong with that, you shouldn't be trying to make websites!!! In fact, if you would deploy markup like that you probably shouldn't even be trying to tell others how to do things either! Particularly loving the gibberish H5 that aren't starting subsections of the page inside those list items, the H4 with no H3 for it to be a subsection of, H2 for that H3 to be a subsection of, or H1 declaring the topmost structure of the entire page... much less again, the endless pointless bloated PRESENTATIONAL classes basically pissing all over the markup.

    ... and that's BEFORE talking about the accessibility train wrecks like illegible colour contrasts and broken navigation.

    Just saying.
     
    deathshadow, Apr 12, 2015 IP