Jump to content

Stadtpirat.net


Nico Knoll
 Share

Recommended Posts

Looks great Nico.

And I read the comment of one of your readers about the site being slower after the change, but I didn't notice any loading speed issues from Sweden, although I don't know how fast your WP blog was.

/Jasper

Link to comment
Share on other sites

Very nice site!

Loads pretty quickly for me too, but if there are complaints about speed you could always look into PW's caching options (if you haven't already).

Love the page showing the monthly post stats and the tag cloud as well - I was thinking a few weeks ago how to do a tag cloud and it was pretty easy but I've just not had the need to implement one yet. As with most things in PW it's a case of working out how to do something not if you can do it which is the beauty of the platform.

I'm also converting a site from Wordpress to PW but it was only because WP was used for the original site (which isn't actually a blog site), and now the client is happy to move to PW to get away from the seemingly-regular security updates in WP. WP is a well-established platform, don't get me wrong, but surely there can't be that many security issues left to fix by now?

Link to comment
Share on other sites

I haven't noticed any speed issues on the site here. There are all kinds of factors that can affect the speed at which a site loads, so best to track down what it is first. If the site loads quickly for one person and not another, chances are there is a network issue between the host and user, or there is a factor on the site where performance is affected by the users' software or hardware (i.e. JavaScript execution speed). If a site is consistently slow for most users then more likely the web host, server or the site itself and it's use of server resources.

When browsing the site I monitored the request times in firebug and there is an above average 'wait time' between request and response on the page's URL. However, it's not something I would have noticed. But that may point to some heavy lifting happening at the server, whether in PW or any number of other factors. When it comes to PW, it will let you consume a lot of resources very easily, so you do have to take care sometimes, especially with larger sites. For instance a call to $pages->get('/blog/entries/')->children could load all blog entries if you didn't specify it with children("limit=n"). Likewise, siblings/next/prev functions are good to avoid on a page with hundreds of siblings. With great power comes great responsibility. :) PW will happily load up a few hundred or more pages, but it's not something you want to do if you don't need to because it will affect performance. And even when you need to, it's good to reduce the number of times. One way is by using the MarkupCache module, especially for things you are having to generate on every request. Likewise, the template caching is good to use in instances where you don't need to change something on every request of a page (ie don't need randomization or second by second updates). But my opinion is that it's best to use caching only after you've made your other code as fast as it can be and have made sure you aren't loading pages you don't need to.

These are just general guidelines and aren't much of a consideration until things get big. This site is at a size (with several hundred blog entries) where some of these scalability considerations should be observed. But it may or may not be applicable in this situation. The site performs reasonably well for me and I would not have ever noticed it as slow. But then again, maybe I was the only one accessing it at the time. Anytime anyone wants me to look at your code for potential bottlenecks I'm happy to. Feel free to post in the forum or privately to me. Most issues that would affect scalability are simple to fix because PW is designed to really sing at the larger scale and just requires occasional tweaking to how you use the API.

  • Like 1
Link to comment
Share on other sites

The main problem was the fade in javascript effect. The page never were really slow but everyone thought it because the script waited until all of the images were loaded (now I additionally wrote a cache script for them ;)). So I deleted this effect and it seem to load much quicker.

Link to comment
Share on other sites

Nico, not sure if you are aware of this, but your blog is almost un-usable on Android Browser (at least default one that comes with HTC Desire HD). It crops half of the left content out, no matter which page you are. When reading single post you can only see few words at the end of the lines.

This is probably caused because everything is absolute positioned (that is some wild stuff you have there :)). So there is no any kind of content flow. You can test this if you resize your browser window to smaller size: you cannot scroll to the left, even when content doesn't fit into the window.

Wouldn't it be much simpler layout to have three columns and let the content flow without any absolute positioning?

Link to comment
Share on other sites

Nico, not sure if you are aware of this, but your blog is almost un-usable on Android Browser (at least default one that comes with HTC Desire HD). It crops half of the left content out, no matter which page you are. When reading single post you can only see few words at the end of the lines.

This is probably caused because everything is absolute positioned (that is some wild stuff you have there :)). So there is no any kind of content flow. You can test this if you resize your browser window to smaller size: you cannot scroll to the left, even when content doesn't fit into the window.

Wouldn't it be much simpler layout to have three columns and let the content flow without any absolute positioning?

I think it may could be because of Nicos favorite center position technique on the main container (as pointed out in a other thread one I wouldn't recommend :P)

hint:

#home {

  font-size:13px;

  left:50%;

  margin-left:-480px;

  margin-top:100px;

  position:relative;

  width:960px;

}

Link to comment
Share on other sites

Well, content is not inside that #home element, so I don't believe that is the main issue. It might be that it causes similar effect there (not sure), but the main issue comes surely from absolute positioning on everything.

Negative margins are part of the spec, they are well supported and work as expected. Also spec is pretty clear how they should function: http://www.w3.org/TR/CSS2/box.html (search: "case of negative margins").

They are not evil Soma :). I have never seen similar problems with any negative margin layouts... Ie. these here: http://www.alistapart.com/articles/negativemargins

Although I don't prefer using negative margins myself. I use them only when necessary (and that means I don't have easy access to markup) which is very rare.

Link to comment
Share on other sites

But that is also pretty strange way to center position in that case. Margin: 0 auto; would do the job just fine.

I tested in web inspector to remove those styles from #home and set it to margin: 0 auto; It centered fine, but didn't resolve the main problem (hidden content on small screen). So that is not the issue.

Link to comment
Share on other sites

Problem is this technique is used using a mix of positioning in % and negative left margin. So if you resize your browser the left part of the container get shifted outside browser window. It may not the way to go anymore with fluid responsive layouts, although there could be media queries being used to adapt to window size. I used this technique myself a few years back and decided to get away from it. Just my experience with using it, everyone has to decide on their own.

Link to comment
Share on other sites

Soma: I re-read the original post and don't know how I understood it that way (that you are against negative margins), sorry about that. Yeah, that overall combination is strange and messy - I think 99% of times just margin: 0 auto; does the same with much more reliable manner.

But unfortunately that won't help here, fixing this issue probably requires more work than that.

Link to comment
Share on other sites

I went ahead and tested this problem with other site Nico posted here (http://schiller.nico-knoll.de/de/), where was this similar issue (content clipped on small resolution). There changing from this centering method to more normal fixed everything - actually only thing needed was taking few css rules away (see screenshot).

But in stadtpirat there is also this absolute positioning stuff, which causes problems. If you resize your window and look at the firebug/web inspector at the same time, you can see how it changes those inline values. After you have small enough screen it will position them out of the screen: position: absolute; left: -30px; etc...

Nico: are you using some kind of js-plugin for the layout? Is there some way to make it work with smaller screens also?

post-79-132614281924_thumb.png

Link to comment
Share on other sites

  • 2 months later...

Very Slick! I love the design and animations, if only I knew German I'd totally follow your blog.

another great line: "Proudly powerd by WordPress Processwire"

Your comment box looks good, I have yet to update mine as per your last suggestions.

Also, I got an error when clicking your archive graph... I'm running Ubuntu + Firefox if it helps

But, Great stuff overall!

Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...