php, coldfusion and general web development waffle

[luke]

ok, kinda silly little thing, but which do you prefer?

screen 1?



or screen 2?



screen 1 has a flexi news and flexi side/navigation area, which fits in with the flexi sections below

screen 2 has a flexi news column, with a fixed width side/navigation area

the side/navigation area currently shows a members login and contact area, but would normally be some sort of navigation menu - like the couch pop out menu on the left

i usually have a fixed width navigation because its kind of a waste of space to make it any bigger than it needs to be, but i think it looks kinda odd when it doesn't line up with the sections below.

the two above are with a max width set, disable the max width and you can get;

screen 1.2



screen 2.2



this makes the navigation side far too wide on 1.2 , but at least everything lines up nice!

so what do you think, flexi/flexi or flexi/fixed?

does anyone use full width with responsive design? i don't see many sites that do ... i guess it gets a bit harder to read long lines of text when you're at 1920 wide, 1200 wide seems alright though

[faceless]

I'd stick to 1200 at the most - for the reason you say. The slimmer login box in those examples seems better to me.

[luke]

yeah i think i'm going to stick to around 1200, although when i started looking into this responsive stuff i was just going to go full width, but as i've used it i don't really like it

this is the top two examples with the navigation instead of the login/contact

screen 1



screen 2



i still don't know what i like best ...

the more i get into this responsive stuff, the more i think its bollocks! you know apple doesn't even have a responsive site?! vodafone doesn't have a responsive site!

i've been looking at sites, and sometimes as you get smaller - the pictures end up getting bigger! take my examples, if there were pictures on the bottoms section, when it changes to mobile and the 3 colums go to 1, the image would stretch to full width! i was looking for a solution that would change from 3 columns to 2 columns and then finally down to 1 depending on width - and i couldn't find a css only solution, you have to use jquery for something as simple as that

i wonder if its better to have a desktop and then a mobile/responsive site. i was looking at a site and when you get down to a certain size you get asked if you wanna swap to the mobile site, the choice is yours, so you can still use the desktop version if you want

[Brown Sauce]

I still go for 960px wide even for a large monitor. I think it's a lot easier on the eye.

It does work with css only, but isn't uncomplicated. Here's an example,

http://www.stephanboyer.com/post/41/fluid-responsive-grid-layouts-in-css

[luke]

i was playing with this responsive layout on some of my existing sites, and apart from two i'm going for 1200 wide. the two i'm keeping at 960, one i had enough trouble getting images at 960, and the other just looked weird when it got bigger!

i see on your squqs site you went with more towards 1200 than 960

i'm thinking i might put a little customise option so people can go full width if they want

[Brown Sauce]

You know I thought that that was 960 .. but you're right.

And I'm playing with it every day now ...

It'll be open soon ... mind I've said that before.

edit:

I guess that I'll have to revise the 960 preference ..

[luke]

i think 1200 is about right, i mean you usually got some sort of side bar anyway, so the actual content doesn't end up at 1200

anyone else tried the opera mobile emulator? i've just been playing with it, its pretty cool, you can select the device/resolution/screen orientation you want to test as - although theres no apple devices.

also, in ie11, if you press f12, then select the emulation option, you can test in previous versions of ie, and in windows phone mode

i was thinking recently i was going to scrap ie8 support, but after going through the stats, i still get ie8 users, especially on one site. ie8 doesn't support media queries, but if you order things right in your css they won't mess things up. order them wrong, and you'll end up with the mobile site on your desktop!

[Brown Sauce]

firefox has Responsive Design View.

It works too.

Have you any experience with single sign on ? You register with one site, and automatically gets registration with another?

[luke]

thanks, i didn't know that about firefox.

whats good about the opera mobile emulator is it does emulate how a touch screen works, ie theres no hover state - only taps/clicks - so its good for testing navigation/menus etc. i kinda wish i hadn't found it though, its caused me some problems! i had to make some edits to my layout to get it working ok on ie8, and it seemed to be working on everything, i even tested it on the default android browser and chrome for android, but on the opera mobile emulator the fix for ie8 was causing the footer to move behind the content and move halfway up the page - although its working fine on normal opera. i'm hoping its just a bug in the mobile emulator ... because i can't find a fix that'll work on both and i don't want to get into delivering different style sheets for different browsers/devices

anyone got opera running on their android? i'm going to have to get a smartphone, but i'd much rather invest the money more wisely on some weed or something ...

no, i've no experience single sign on

[Brown Sauce]

"i'm going to have to get a smartphone, but i'd much rather invest the money more wisely on some weed or something ".

yup

messing with css for every different device is well, messy. There has to be a better way.

shame about the SSO. it's hard shit for me to work out ..

[luke]

hows it supposed to work this sso? is there like a central site/server you login to and the other sites then check with that that you're logged in?

[Brown Sauce]

Yes Luke. Difficulties arise when for instance we use two different cms's. Drupal has one password hash, WP another.
The trick is to get both of them to use the same server for login authentication. You'd use either login form to login to both. They do exist, and are reasonably well documented, but it's a pain to get the bloody things to work nicely together.
LDAP is favoured, and I have it setup on an email server, but can't get it to work for drupal and WP.

edit:

I've gone off the WP idea. So it's all unnecessary really just now. I'm still working on the facebook alternative idea, but it will be a community based on squqs.com. A bit further down the road, and likely to be phpfox. Not open source, but it is the best for the money.

[Brown Sauce]

A short video on how responsive images with <picture> and srcset/sizes work:

http://vimeo.com/99683665

[luke]

thanks sauce, although i didn't actually watch the video ( i'm can't spend 20 minutes watching a video about a tag! ) i'd not heard of the picture tag, but have been thinking recently while doing my responsive framework that there had to be a better way to provide images based on device. why serve up a 1920 wide image when its then shrunken down to 320?!

i found this http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015 for those that wanna take a quick look

i don't think i'll be using it yet though until its more widely supported, i'm sure ie will catch up by the end of the decade ...

[luke]

i've just started work on a site, its currently an old asp site, access database, horrible mix of html, asp and old ms frontpage stuff, all oldskool layout with everything nested in tables within tables within tables ... really messy. they was hacked sometime ago and had to get someone in to sort it out.

today i found out you could login to their members area with the username User Name and the password Password!! The database, not password protected, all passwords as plain text, could be downloaded from domain.com/database/sitename.mdb !!

i've never seen anything quite as slack ...