Reply to topic

New Krita.org mockup ideas

User avatar boudewijn
KDE Developer
Posts
4889
Karma
20
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 5:53 am
I also noticed that sometimes a link takes me back to the joomla-based site, for instance the Muses DVD link in https://dev.krita.org/learn/tutorials/ -- is that something that we'll need to fix up as well?
User avatar bcooksley
Administrator
Posts
19765
Karma
87
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 9:13 am
Please note that the theme comes from a Git repository so it is probably better for the changes to be made and committed there - then pulled on the server. This also ensures that no web server writable areas can be used to execute code - which is usually how sites are compromised.

In regards to the site url, please use https instead - otherwise you'll end up getting redirected automatically by Apache on every click (which will slow down page loads for visitors).

Finally - for the dev.krita.org links, these can probably be bulk replaced using a database query.


KDE Sysadmin
[img]http://forum.kde.org/content/bcooksley_sig.png[/img]
User avatar boudewijn
KDE Developer
Posts
4889
Karma
20
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 9:24 am
Hm, I cloned out krita-org-theme, but I didn't see the download.php file.
User avatar vascobasque
Registered Member
Posts
72
Karma
0
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 9:31 am
So the site is done? Nice -good work!

I like to make some suggestions for some fine-tuning.

Frontpage:

- when hovering over the artist interview the transition flickers (in chromium, not in ff)
-> that can be fixed by changing the transition property from "transition: all" to "transition: box-shadow"

btw there is no need to specify ease as transition timing-function: it´s the default..

also there are missing vendor prefixes for optimal browser compatibility. personally i use Grunt with the autoprefixer plugin for my css, so i have not to care about that. (autoprefixer uses the database of caniuse.com for prefixes)

Another thing is that the hero redirects to the gallery page and not to the image showing the hover effect. I find that a little bit annoying from the usability side. I expect to see the image that i click on in a large sized version + additional information's. At least there should be a tooltip or any other hint showing what is going on here.

Features - Highlights

The Chapter-Titles should be over the Textblock and not over the image - that is irritating. I am right-handed and i read from the left to the right. For me it´s easier to have the text left and the image right or at least alternating between images on the left and right side, but all images on the left feels totally wrong to me.

Gallery

To be honest... the gallery errrmm could be better. I don´t see the need of using a jquery script to make a gallery like this. Simple css should do the job - as long as you are able to sort the images into 3 columns (of any block level element). Idk if php can loop through an array of images/posts or files in a folder, but i guess it should be doable.

The following code is an example for a gallery with responsive images, centered on a page with a 3 column layout and no gaps between the images.

// edit: I must revise myself - the thing below cannot have a 3-columns of 50% media query for medium screens/devices, without having a big empty space.. it might work with 4 divs, but then it gets complicated at the other end. anyways, it does not seem to be interesting, so no matter..

Code: Select all
The markup:

<section class="gallery">
  <div class"column">
    <img ...  /> // 1/3 of all images in the array [+1 if there is a rest after dividing]
  </div>
  <div class"column">
    <img ... /> // 1/3 of all images in the array [+1 if the rest is > 1]
  </div>
  <div class"column">
    <img ... /> // 1/3 of all images in the array
  </div>
</section>

The CSS:

.column {
  width: 33.3332%;
  float: left;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

this is wrapped in a container of your choice maybe something like:

.gallery {
  max-width: 1200px;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center; // if you want centered captions...
}

if you want to use anchors for the images

.gallery a {
  transition: opacity .4s;
  display: block;
}
.gallery a:hover {
  opacity: .7;
}

to make it responsive (example):

@media and (max-width: 800px) { .column {width: 50%;} }<--Nope, this does not work!
@media and (max-width: 450px) { .column {width: 100%;} }


I hope this helps on the final steps to a cool new krita.org... The site is really good as it is now, but in my eyes it is still a raw diamond that needs some final polishing :)

Last edited by vascobasque on Thu Jul 31, 2014 6:38 pm, edited 1 time in total.


User avatar bcooksley
Administrator
Posts
19765
Karma
87
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 9:34 am
Boud - it seems there were some server side only changes. I've now committed them, with Scott marked as the author of those changes.
@Scott: Please check the two commits I made are correct.


KDE Sysadmin
[img]http://forum.kde.org/content/bcooksley_sig.png[/img]
User avatar boudewijn
KDE Developer
Posts
4889
Karma
20
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 9:39 am
If I push something to the git repo, will the website be updated automatically, or is that a manual process?
User avatar bcooksley
Administrator
Posts
19765
Karma
87
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 9:41 am
It is a manual process i'm afraid. We can probably put a cronjob in place though.


KDE Sysadmin
[img]http://forum.kde.org/content/bcooksley_sig.png[/img]
User avatar scottpetrovic
Registered Member
Posts
520
Karma
4
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 2:12 pm
Yes, currently when I am making changes to the theme, I usually make the changes locally and commit them to the krita theme GIT repo. I then manually copy my local files over to the FTP where the site is. It would would be pretty cool to have some type of cron job push the git changes to the server. That would help prevent errors if things get changed that break something.
User avatar scottpetrovic
Registered Member
Posts
520
Karma
4
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 2:36 pm
@bcooksley: those two commits look good. I guess that is the disadvantage of the current process I am using. Things slowly get out of sync. thanks for doing that.
User avatar vascobasque
Registered Member
Posts
72
Karma
0
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 3:02 pm
@scottpetrovic

i have pulled the style.css through the autoprefixer (after i deleted all vendor prefixes from the source file, that i downloaded from the repository)
and also used sass to make a prettyfied and a minified version - sass also checks for syntax errors..
use it or not.. however at least you can see what the autoprefixer changes

style.css
style.min.css


User avatar scottpetrovic
Registered Member
Posts
520
Karma
4
OS

Re: New Krita.org mockup ideas

Thu Jul 31, 2014 7:49 pm
@vascobasque - nice. I haven't seen the auto-prefix thing before. That might be useful.

For the minification stuff, WordPress always uses the style.css - so you can't use a normal type of style.min.css convention that you usually see. If we do minification, it might be easier to use a plug-in like this:

https://wordpress.org/plugins/bwp-minify/

This does it automatically so we don't have to add extra processes into the commit strategy. It gets a little cumbersome having to store a source and a minified version in GIT every time there is a change. If everyone that made updates were web developers, it would be ok. During the blender.org re-design, they chose to use LESS for their CSS. It was cumbersome having to compile the files after every change before you commit. Things would get out of sync because the source would get out of sync with the compiled versions. I think the overhead maintenance cost isn't worth the small file size benefit.

How does that plug-in option sound? It does the javscript minification too. I am trying to think about ease of maintenance with this as well as performance.
User avatar vascobasque
Registered Member
Posts
72
Karma
0
OS

Re: New Krita.org mockup ideas

Fri Aug 01, 2014 7:54 am
@scottpetrovic

I don´t think that the css minification is reason enough to use such a plugin. Looking at the assets in the repository, i would consider to concatenate the scripts into one file -> plugins.js.. that file surely gets bigger, therefore a minification makes sense. If this scripts do not change after the site is launched, i would consider to do this step once for optimization reasons. If there is a chance that things mess up or maintenance gets complicated, i would not do it. I cannot judge over wp-plugins, but i do not see a benefit, that makes it worth using it.

Also if you minify the js, you probably decrease the chance, that someone without the know-how modifies the source files later.. >:D

I think it would be good to add an empty custom.css and custom.js (can also hold the script initiators/config and other snippets) with additional comments. Then you have reduced the overall amount of files to be loaded, the file size and a you have an option for later modifications, without touching vital source files..

(for my own work i try to stay close to this basic structure: html5-boilerplate / but i am sure this is nothing new for you :) )


User avatar scottpetrovic
Registered Member
Posts
520
Karma
4
OS

Re: New Krita.org mockup ideas

Sat Aug 02, 2014 12:34 am
@vascobasque - I spent a little while updating and optimizing the site. Using the network analyzer in Chrome, the biggest culprits were the under-optimized PNG files that were being used. I shaved off about 250KB from the initial payload that was getting downloaded.

For the javascript, there really isn't very much left to compress. The main javascript and CSS is bootstrap and jQuery, which is already minified. I could probably do a little more with creating a spritesheet and combining a couple CSS files to reduce requests. Maybe loading a couple libraries to an external server to increase parallelism . I don't think it will really matter that much though.

If we compare the performance of the new Krita.org with something similar like Blender.org - the Krita site is much faster and lighter! The new Krita.org averages about 1.5 seconds on a fresh load with everything coming in at ~450KB.

Blender.org, in comparison, is ~1.2MB (almost 3x larger) and takes over 5 seconds to load. It isn't a competition (this is free software we are talking about!), but just a ruler to see that the new site is fairly optimized.

I am more worried now about broken links, typos, and grammar than anything technical related. :)
User avatar bcooksley
Administrator
Posts
19765
Karma
87
OS

Re: New Krita.org mockup ideas

Sat Aug 02, 2014 1:31 am
Thanks.
In terms of automatic updating - that may be a little difficult (we lack a notification mechanism other than emails at the moment).

If you login to the server with SSH though and run "git pull" in /srv/www/dev.krita.org/wp-content/themes/krita-org-theme/ then the latest changes should be applied. I've also put in place a cronjob which fetches changes once an hour.


KDE Sysadmin
[img]http://forum.kde.org/content/bcooksley_sig.png[/img]
User avatar scottpetrovic
Registered Member
Posts
520
Karma
4
OS

Re: New Krita.org mockup ideas

Sun Aug 03, 2014 8:32 pm
that would work. We probably won't be doing heavy changes once the site is rolled out. It might not be worth the effort to set something up. We have a pretty good base in case anything would go wrong. I am ok with whatever is decided.

 
Reply to topic

Bookmarks



Who is online

Registered users: Baidu [Spider], bartoloni, Bing [Bot], bobbywibowo, claydoh, farid, Google [Bot], mcarpino, nockvolley, Sogou [Bot], The Tahaan, Yahoo [Bot]