[projectaon] Re: New website design

  • From: Jonathan Blake <jonathan@xxxxxxxxxxxxx>
  • To: projectaon@xxxxxxxxxxxxx
  • Date: Thu, 19 Nov 2015 23:48:32 +0000

Also, in case anyone was concerned, :) the new design is passing Google's
test of mobile-friendliness with flying colors:

https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fwww.projectaon.org%2Fen%2FMain%2FHome

--
Jon

On Thu, 19 Nov 2015 at 14:18 Jonathan Blake <jonathan@xxxxxxxxxxxxx> wrote:

Thanks for everyone's feedback. I pulled the trigger on the new design.
I'll continue to work on refinements, but the bulk of the work is done, and
I can help out with other projects.

Ingo, autoprefixer seems like a good tool. Is there any way to use it
without Node.js, etc.? It'll take me a while to get up to speed with it,
and I'm not sure whether that's the best way to spend my time at the moment.

Jon


On Fri, 13 Nov 2015 at 10:16 Ingo Kloecker <projectaon@xxxxxxxxxxxxxxxx>
wrote:

On Friday 13 November 2015 17:16:13 Jonathan Blake wrote:
I've been working on the new responsive website design for Project
Aon. The basic design has kind of stabilized, so now would be a good
time to have everyone test it. Please check it out on your whatever
devices and browsers you have handy and send your feedback. If you
have screenshots, you can send them directly to me. Thanks!

http://test.projectaon.org/en/Main/Home

http://test.projectaon.org/en/Main/FlightFromTheDark

Looks good on Firefox.

In KDE's Konqueror the color gradient in the header is missing. I'm not
sure whether that's a missing feature in Konqueror or whether the CSS
lacks some vendor-specific properties.

A maximally compatible definition of the color gradient would look like
this:
=====
background: rgb(230,79,32); /* Old browsers */
background: -moz-linear-gradient(45deg, rgb(230,79,32) 0%,
rgb(255,230,204) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgb(230,79,32)
0%,rgb(255,230,204) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgb(230,79,32) 0%,rgb(255,230,204)
100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#e64f20', endColorstr='#ffe6cc',GradientType=1 ); /*
IE6-9 fallback on horizontal gradient */
=====
Created with http://www.colorzilla.com/gradient-editor/

Nobody wants to write something like this by hand. :-)

Therefore, at work, we use the grunt-autoprefixer [1] to add all those
crazy vendor-prefixed, alternative CSS properties (like above for
gradients). IMHO, this Grunt plugin is already reason enough to set up
Grunt [2].


Regards,
Ingo

[1] https://www.npmjs.com/package/grunt-autoprefixer
[2] http://gruntjs.com/


~~~~~~
Manage your subscription at //www.freelists.org/list/projectaon



Other related posts: