first off, i'm an old-fashioned html, CSS and PHP web developer, of the seemingly archaic 'kind that fits on a computer monitor' variety - i do NOT, YET, know how to code for 4inch phone resolutions...

 

that said, a client has a website he "made himself" (containing about 457 absolutely positioned Divs and half as many image maps for his links >>> i know, right?) and i was hired to reproduce it in WordPress - not a problem... only he's just now pointed out to me that 'his' website responds well to (shrinks to fit) smart phone browsers. and he's right. and i have NO idea why. i can see no javascript or CSS that would even suggest something as magical as this.

 

i'm hoping someone knowledgeable (as opposed to me) could take a look at this website: www.party102fm.com, and tell me what's making this entire layout, images and all, resize to the width of a cellphone...?

 

i'm very grateful and in your debt.

TM

first off, i'm an old-fashioned html, CSS and PHP web developer, of the seemingly archaic 'kind that fits on a computer monitor' variety - i do NOT, YET, know how to code for 4inch phone resolutions...

 

that said, a client has a website he "made himself" (containing about 457 absolutely positioned Divs and half as many image maps for his links >>> i know, right?) and i was hired to reproduce it in WordPress - not a problem... only he's just now pointed out to me that 'his' website responds well to (shrinks to fit) smart phone browsers. and he's right. and i have NO idea why. i can see no javascript or CSS that would even suggest something as magical as this.

 

i'm hoping someone knowledgeable (as opposed to me) could take a look at this website: www.party102fm.com, and tell me what's making this entire layout, images and all, resize to the width of a cellphone...?

 

i'm very grateful and in your debt.

TM

 

Erm, that website isn't responsive in the slightest. All websites will fit the width of a mobile browser window as the phone itself will squeeze it all in. If your client thinks that is responsive then he is sadly very, VERY mistaken!

 

To see what I mean, simply resize the browser window on your desktop/laptop, see, the website doesn't respond.

This is the default way for websites to behave - good eh? But the trick these days, as noted above, is to make websites responsive so they are easier to use.

Try this, if you want a basic wordpress, responsive framework.

 

I use the original version (foundation) coupled with bits taken from various other frameworks to produce clean html5, responsive, wordpress websites. < Damn that should be my tagline

Edited May 8, 201214 yr by roothost

Mobile Design isn't just about sizing things. It's about making a website easy to use on a smaller screen. Those tiny navigation buttons, for example, are going to be a headache.

 

I also suspect that the site only works OK when viewed in landscape mode, portrait mode it's going to be shrunk too much.

As mentioned above the site isn't responsive or fluid in any way, in fact it's quite thin at only 900px.

 

What's happening is the default behaviour for most mobile browsers which is to squash the whole site in to the smaller window by changing the zoom threshold on the actual window. This isn't good because things become distorted and text becomes illegible.

 

Roothost has posted a decent enough barebones responsive theme above or you could try using 5 widths or (and this one is the most help) learn to use 'CSS Media Queries'.

 

A combination of a fluid grid and media queries will give you what you're after.

Good luck.

I just had a look at Reverie. Not impressed, tons of CSS you don't need, and crap loads of "!important" to force mobile styles. I don't get the syntax either, what the hell is a "nub"?

 

Ack, why can't there just be a nice, simple, mobile-first framework without the bloat. I don't want ruddy tooltips!

 

Sorry Root...!

Edited May 8, 201214 yr by brightonmike

Ack, why can't there just be a nice, simple, mobile-first framework without the bloat. I don't want ruddy tooltips!

 

Yeah, sorry. It is coming, I've just been busy.

Yeah, sorry. It is coming, I've just been busy.

 

 

Me too! I'm trying bones. I was gonna start with LESS but the arrangement of the files confused the heck out of me. I do want to learn LESS but this isn't the way, I think I'll do that with a simple static page first.

 

However the normal CSS looks decent, still some bloat but it basically looks to literally be a "frame".

Erm, that website isn't responsive in the slightest. All websites will fit the width of a mobile browser window as the phone itself will squeeze it all in. If your client thinks that is responsive then he is sadly very, VERY mistaken!

 

To see what I mean, simply resize the browser window on your desktop/laptop, see, the website doesn't respond.

 

i didn't get any notifications of all of your wonderful replies, just checked back and so all of these, and i thank you all.

 

Roothost, i'm afraid that i wasn't very clear - i surely don't mean to think that his "webpage" is 'responsive' -

 

what i'd love to know is HOW is his very basic layout, and especially that large animated gif, SHRINKING to the width of a smart phone, even in portrait position. what's allowing it to do that?

 

ALL of his divs are position- and size- absolute, which of course is not done anymore for layouts. does this have something to do with it?

 

i rarely see websites shrink to fit, even the most professional and high-end ones. Those are the ones which are made 'responsive' and you get a quite different layout when viewed on a mobile... this one simply shrinks WAY down...

 

thanks for your help, all of you!!!

Mobile Design isn't just about sizing things. It's about making a website easy to use on a smaller screen. Those tiny navigation buttons, for example, are going to be a headache. (EXACTLY)

 

I also suspect that the site only works OK when viewed in landscape mode, portrait mode it's going to be shrunk too much.

 

thanks, brightonmike - the issue is that i'm trying to convince this client that Mobile Design IS in fact a completely different animal than web design.

 

And i do not do mobile development - YET.

 

but, in fact, his website DOES shrink to portrait view on a mobile. and i have no idea why - most websites do not by nature do that; they're either built intentionally as 'responsive' or they overflow a mobile browser. i'm trying to learn what's making his shrink. he's clearly not a web designer or developer and didn't do anything 'special' to get his to do this, he says at least, but it does.

 

just trying to learn.

Edited May 9, 201214 yr by travisMcgee

i didn't get any notifications of all of your wonderful replies, just checked back and so all of these, and i thank you all.

 

Roothost, i'm afraid that i wasn't very clear - i surely don't mean to think that his "webpage" is 'responsive' -

 

what i'd love to know is HOW is his very basic layout, and especially that large animated gif, SHRINKING to the width of a smart phone, even in portrait position. what's allowing it to do that?

 

ALL of his divs are position- and size- absolute, which of course is not done anymore for layouts. does this have something to do with it?

 

i rarely see websites shrink to fit, even the most professional and high-end ones. Those are the ones which are made 'responsive' and you get a quite different layout when viewed on a mobile... this one simply shrinks WAY down...

 

thanks for your help, all of you!!!

 

Nothing is making it shrink, well apart from the phone. This is what they do. Can you give me an example of a website that overflows?

Nothing is making it shrink, well apart from the phone. This is what they do. Can you give me an example of a website that overflows?

 

yes, party102fm.com/blog - which is a wordpress theme (modified) - doesn't shrink

 

framework.latimes.com/2012/05/09/soft-drink-casualties-were-heavy/ doesn't...

Nothing is making it shrink, well apart from the phone. This is what they do. Can you give me an example of a website that overflows?

 

well, i think i need to reform my question - i was not aware that the phone itself is what's doing all the work (i have a Galaxy S2 and i still come across websites that don't fit the screen, so i didn't ever think it's the phone doing it).

 

so i guess my question then should be, why ISN'T party102fm.com/blog - the WP mod, shrinking to fit the screen...? what's preventing it?

Essentially, when you view a website that seems to "shrink" to fit the mobile phone, forget the term shrink. Shrink implies the dimensions are altered etc.

 

A better way to look at it is that the website has been "zoomed out" - as if you've stepped further away and it's become smaller.

 

That's all the mobile browser is doing.

 

Whether it does this or not, and how well it does it, will depend on the site in the sense that some websites are poorly coded in such a manner that things screw up. It's not really the mobile browser doing anything wrong, it's more likely just some bad code.

 

You're kind of asking an unanswerable question, because the fact is there are many technical reasons why a website may or may not appear well on a mobile.

Essentially, when you view a website that seems to "shrink" to fit the mobile phone, forget the term shrink. Shrink implies the dimensions are altered etc.

 

A better way to look at it is that the website has been "zoomed out" - as if you've stepped further away and it's become smaller.

 

That's all the mobile browser is doing.

 

Whether it does this or not, and how well it does it, will depend on the site in the sense that some websites are poorly coded in such a manner that things screw up. It's not really the mobile browser doing anything wrong, it's more likely just some bad code.

 

You're kind of asking an unanswerable question, because the fact is there are many technical reasons why a website may or may not appear well on a mobile.

 

that's very explanatory, thanks loads.

 

the funny thing is, his home page is anything but properly coded and it 'zooms' just fine, whereas the wordpress version under /blog doesn't at all - what i'm trying so hard to discern is what's preventing www.party102fm.com/blog from doing so.

 

thanks for your time and help...

At a quick glance the blog has been set up to display at a minimum width of 760 pxels. If you take a typical smartphone that displays content either at 320 pixels wide in portrait, or 480 pixels in landscape, then 760 is obviously wider so the phone can't "squash" it into the available screen space.

 

The home page uses a different set of styling rules and I can't see a minimum width specified anywhere that would affect small screens.

At a quick glance the blog has been set up to display at a minimum width of 760 pxels. If you take a typical smartphone that displays content either at 320 pixels wide in portrait, or 480 pixels in landscape, then 760 is obviously wider so the phone can't "squash" it into the available screen space.

 

The home page uses a different set of styling rules and I can't see a minimum width specified anywhere that would affect small screens.

 

yes, well after changing two min-widths to 320px nothing was affected. this raises the question, do defined widths affect this 'zooming' affect, then? i have these widths defined at 900px, but that surely can't be the reason this won't fit a mobile - can it?

Edited May 9, 201214 yr by travisMcgee

Could be a viewport tag issue. Have a read here https://developer.mozilla.org/en/mobile/viewport_meta_tag

Could be a viewport tag issue. Have a read here https://developer.mozilla.org/en/mobile/viewport_meta_tag

 

 

how very interesting. i read thru that article, decided to try the meta tag in the wordpress site, went to the wordpress header and found that it was already there. changed a couple of values (device-width to 320), to no avail, then said what the hell and took the meta tag out altogether.

 

voila, the blog portion of the site fits into my phone.

 

my response at this point? )

 

"whatever"...

 

thanks

Edited May 9, 201214 yr by travisMcgee

whatever