Format for Page on Mobile Device

Was wondering if someone can give me some insight on a test page I am working on.

Looks fine in browsers (IE and Firefox) but does not look ok on a mobile device. (Things moved around) Any input would be appreciated

test page is at http://www.ignitepromotionalcoaching.com/test.html

 

Who wrote that html for you? If I was to guess I'd say by @deathshadow himself cuz it's so neat and clean. Maybe he can help you make it mobile friendly. It shouldn't be that hard.

 

I suspect pretty-print or some other auto-formatting was applied -- since it's got anchor that should have a H1 around it, an image tag inside that anchor that shouldn't even be in the markup, and H3 with no H2 or H1 preceeding them... and don't even get me started about the fixed font sizes and colour contrasts of questionably legibility. Weird part is it's got this mix of practices I advocated six or seven years ago mixed with a complete lack of semantic markup.

Hell, that diamond-plate background makes me want to go "Warner? Is that you?"

BUT, it's not unsalvageable mostly because it looks like a degree of due diligence was taken to at least TRY. MOST of the time I come across anything this artsy with so many failings I'd tell people to just toss it and start over, but you at least have a general idea of content... I'd just be axing a lot of the extra presentational "goodies" or looking to see if getting them out of the markup and into the CSS could be used to swap them in and out.

There are a few things in the page that are going to make going reponsive a bit of a fight. The massive perfect width perfect height image being chief among them. Generally there's a lot of "images for text" that are just -- to be painfully frank -- pissing on the accessibility. They either need to be moved into the CSS so they can be swapped out or removed entirely when the page is smaller than the artsy fartsy images, or simply get them out of the design for not being "viable for web deployment".

Since again, it doesn't matter how pretty something is on a website if it gets in the way of doing what's ACTUALLY important, delivering content to users. A concept lost on a lot of the folks dicking around in Photoshop under the DELUSION they are "designers".

Though things "moving about" on mobile is what responsive design IS, so I'm really not sure what's even being asked here. From what I'm seeing it's a fixed width fixed metric desktop layout that doesn't "move" a blasted thing... and that's most of why it's junk on my mobile devices here.

Good designs REALLY need three things BEFORE you even think about mobile:

1) Semi-fluid layout. The layout should automatically expand and contract between a minimum and maximum width, shifting content around as needed to adjust to the display. This is why declaring a "fixed width" like your "width:760px" is rubbish.

2) Elastic. Any declared widths, padding, margins, or font sizes should be declared in EM's so they are based on the font-size. This is why the "px" part of that 760px and all your other font-size and width declarations are... well, rubbish.

3) Dynamic fonts. Declared in % or EM across the board so they automatically are based on the browser or OS default size. NOT every user starts out at that magical 16px default, and users who use a larger default are going to see those 14px font size and either have to dive for the zoom, or more likely just bounce and go somewhere else.

The latter being likely thanks to the fixed width layout which if you zoom too far is going to force sideways scrolling.

Your design lacks many of the concepts needed to provide any of that. It would take a good long sit-down with what you have to even START to try and fix it... but really those big massive images? First thing I'd find an axe to swing at. If Gimli's not around I'm sure Zoltan has one handy.

Unlike a lot of sites I wouldn't throw it out completely, but it's going to take a good deal of rewriting and a bit of a paradigm shift in design methodology to even have a chance at turning that into a "accessible" design. You've got the trifecta of "epic fail" at web design; fixed width, fixed fonts, illegible colour contrasts. The first two of those are things you MUST have before adding "media queries" to make it mobile friendly.

... and the whole point of mobile friendly is to make it do what you seem to be complaining about -- re-arranging everything and removing "gee ain't it neat" presentational nonsense so the important part -- the CONTENT -- is delivered to the user in as easy to use a manner as possible.

You can't just design a fixed 760px width and have it work everywhere. That's outdated, outmoded and nonsensical -- even if at one point it was an industry accepted norm.

Honestly, a lot of industry accepted standard practices are little more than artsy types unqualified to make websites preying on the ignorance of others, or sleazy shortcuts taken by people who have no business making websites. The mere IDEA of saying "width:760px" falls squarely into that category -- it's just flat out broken methodology and a giant middle finger to users.

I'm heading to bed (I've got non-24 so I live a 26 hour day) but I'll leave this tab open so I can revisit this later, see what I come up with if I play with it.