A new look for my web site

[mcrossley]

I'm playing with a new look for my web site. I wondered if you could test it out for me?

I have tried for a responsive design (not always possible when displaying big graphs!), but so far have been concentrating on the desktop 'version'.

This isn't live yet, and is on my self hosting 'server' so if a few people access it simultaneously it may slow down.

Once I have the basic template sorted, I want to rework the graph pages. That is for later.

Feedback welcome.

Mark

http://weather.wilmslowastro.com/charisma/

[PaulMy]

Very nicely done Mark. Very professional looking and well laid out.

From reading your Top 10 Records looks like you either moved south after Dec 2010 or that was an extraordinary winter for you.

Paul

[mcrossley]

Thanks Paul.

That was a bad winter, and I missed recording the worst of it in December 2009 early January 2010. The record low was a few days before I got the weather station, a wireless temperature gauge measured -20.something in my garden shed.

Err, error, that was obviously the winter before!

[steve]

Looks very good, Mark. Working fine in Chrome on Windows 8.1, Safari on OS X Mavericks, and Midori on Raspbian on the Pi.

[tobyspond]

Nicely done, Mark.

Easy to read clean interface.

On the tables, Today/Yesterday for example, the some of the units move to the line below. I tested this in FireFox 27.0.1 and safari 5.1.7

I also tested with a Droid Incredible using the built in browser and the site is responsive. However, using Dolphin browser (v. 10.2.7) it is not.

Kerry

[mikechristelow]

That's very neat Mark, nicely done.
I got a 404 error on the Historic tab but other than that all looks good.
Viewed using Chrome + Windows7 SP1 32bit Home Premium

[mcrossley]

I got a 404 error on the Historic tab but other than that all looks good.

Ah thanks, I renamed the page and changed the top menu and forgot the footer.

[mcrossley]

On the tables, Today/Yesterday for example, the some of the units move to the line below. I tested this in FireFox 27.0.1 and safari 5.1.7

Is that on a desktop Kerry? The 'tablet' and mobile CSS probably needs a bit of tweaking, I've concentrated on the 'wide' version first.
Those three column tables are a bit problematic. I had hoped to squeeze them into two screen columns, but maybe it is a bit too much to ask. I'll try trimming the text a little first...

I also tested with a Droid Incredible using the built in browser and the site is responsive. However, using Dolphin browser (v. 10.2.7) it is not.

Oh, that's a bit disappointing, I used to use Dolphin on my tablet, maybe time to reinstall it. Debugging on 'droid is a nightmare though unless you enable the dev. options to use USB and install the SDK.

[laulau]

Simple and clear.
NTR,
except links on Experimental Pages

[mcrossley]

Ta, I'll fix those.

Btw, I'm working the month/year page now, ignore any issues with that page for the time being.

[tobyspond]

Is that on a desktop Kerry? The 'tablet' and mobile CSS probably needs a bit of tweaking, I've concentrated on the 'wide' version first.
Those three column tables are a bit problematic. I had hoped to squeeze them into two screen columns, but maybe it is a bit too much to ask. I'll try trimming the text a little first...

Yes on a desktop. You could try reducing the font size or since the unit is the same just place it after the word Temperature.

My phone is on the old side. Maybe others will test your site on their phones with other browsers.

One other note: the historic graphs do resize, however, readability may be a concern. I think large tables and graphs may be problematic on a responsive site.

Kerry

[RayProudfoot]

Mark,

I agree with others that it looks very professional and clean. You clearly have a good eye for design and the skills to implement it.

[mcrossley]

Yes on a desktop. You could try reducing the font size or since the unit is the same just place it after the word Temperature.

You must be running a screen resolution below 1100px wide? I have tweaked the cutoff to 1145 pixels now to switch between narrow and wide styles. Right, I've been brutal on the month/year page, abbreviated what I can and dropped the times altogether. It now fits OK, I did think about putting the time in a mouse-over, but it would be a bit fussy and not work on touch devices.

My phone is on the old side. Maybe others will test your site on their phones with other browsers.

One other note: the historic graphs do resize, however, readability may be a concern. I think large tables and graphs may be problematic on a responsive site.

Yes, still not sure what to do about them - specify a minimum size they can scale down to maybe? I'd have to look at the code to see if that is possible (easily!).

[mcrossley]

You clearly have a good eye for design and the skills to implement it.

Not sure about that Ray, I generally leave the 'design' to others, though I know what I like when I see it. The template I just downloaded from http://www.css3templates.co.uk/ though I will no doubt spend the next month tweaking it!

I wanted a clean look, I didn't want to go down the route of some other templates and throw everything at page you can.

[tobyspond]

@mcrossley

you must be running a screen resolution below 1100px wide? I have tweaked the cutoff to 1145 pixels now to switch between narrow and wide styles. Right, I've been brutal on the month/year page, abbreviated what I can and dropped the times altogether. It now fits OK, I did think about putting the time in a mouse-over, but it would be a bit fussy and not work on touch devices.

I resized the browser window to emulate a mobile device. The unit movement also occurs on my phone.

There may be pages that do not lend themselves to viewing on small screens. I think specifying a minimum screen size is a good start. I'd be careful about eliminating too much data, because then you start to lose the message. Another consideration is do mobile users visit the graphs and data tables on your site to any degree?

I think there are ways to hide data and have the user select what they want to see in a table. Not sure how that would work for a graph though.

Good luck.

Kerry