Distracted by Squirrelshttp://www.distractedbysquirrels.com
My virtual playgroundSun, 02 Dec 2012 15:45:11 +0000en-UShourly1http://wordpress.org/?v=3.5.1Making your Footer stay put when having a fixed Headerhttp://www.distractedbysquirrels.com/blog/making-your-footer-stay-put-with-css-when-having-a-fixed-header/
http://www.distractedbysquirrels.com/blog/making-your-footer-stay-put-with-css-when-having-a-fixed-header/#commentsTue, 17 Jan 2012 13:22:21 +0000Sebastianhttp://www.distractedbysquirrels.com/?p=1407read more]]>I am currently developing a small web application for the department I am working at. Everything was looking good until I ran into a problem with the layout last week. It bugged me that the footer was placed directly after the content. It just looked wrong. So I googeled to find a way to have a non-fixed footer that stays at the bottom of the window as long as there is enough space. If the windows is to small the footer should be bedhin the content (so you have to scroll down in order to reach the footer).

Usually an easy task. Set the body width to 100%, add an negative margin, which is the same height as the footer should be and you’re done. In my case there was a little detail that smashed my approach: The layout has an fixed header navigation plus a top padding of the body so that the beginning of the content is not hidden beneath the navigation.

Read on to find a (hopefully good) solution to fix that.

Making your Footer stay put with CSS (w/o fixed header)

There are a lot of tutorials, who explain how to accomplish that. After my little research I would say that this one from Forty Sevenmedia is the best one. Basically, you set your footer to a specific height and add a negative margin with the same value as the footer height to the content. The last child of for content has to be a clear:both. Also with the same height as the footer. Here is a little visualization what it does:

Footer at bottom with a fixed header

If you have an fixed header in your layout the above method does work as long as you don’t add an padding to the body-element. But you kinda have to, otherwise some content will be hidden under your header.

You could use JavaScript to align the footer the way you want it. But I am not a big fan of using JavaScript for something like this. Especially if the solution could easily be achieved using only CSS. But sticking with the body padding does not work. At least I couldn’t find a solution if you want to keep the padding. The good news is: You don’t have to. But sometimes it is impossible to see the forest for the trees.

Instead of using the padding to align the content use an additional element with the height set to your former padding value. I chose not to support IE7/8 because the deparment’s IT support (which is actually me) forces you to use Chrome or Firefox. This way I was able to use peusdo element. The following example will also use them, but if you have to support bad browsers use div-element instead. Personally, I feel that using :before and :after is just cleaner (HTML-wise).

The HTML

<header class="navbar navbar-fixed">
This is the Header
</header>
<div class="content">
<div class="container">
<p>Some content.</p>
</div>
</div>
<footer>
This is the footer, which will stay at the bottom!
</footer>

Conclusion

Here is a example what it could look like (the mentioned application wip):

]]>http://www.distractedbysquirrels.com/blog/making-your-footer-stay-put-with-css-when-having-a-fixed-header/feed/2WordPress: Rearrange category orderhttp://www.distractedbysquirrels.com/blog/wordpress-rearange-category-order/
http://www.distractedbysquirrels.com/blog/wordpress-rearange-category-order/#commentsFri, 21 Oct 2011 07:52:29 +0000Sebastianhttp://www.distractedbysquirrels.com/?p=1380Just recently I ran into a problem with the category order. The oldest category was “New Publications”. So dividing the items based on their category and then looping over them would always put items from the “New Publications”-category at the end of the page, which is rather unpleasant. WordPress sadly has no option to rearrange the order of categories (at least I couldn’t find it).

What it does

After querying for the categories (line 1) it loops through all categories until it (hopefully) finds the desired category. If the category was found it is saved into a new variable and removed from the category array (line 2-8). Line 11 inserts the category again at the beginning of the array. Now you can iterate through the categories and display your items and the new publications will always be the first displayed category.

Last week I redid my work page. It was hard to navigate through the page without a second navigation. So I used the chance to tinker around with jQuery. The goal was to provide an alternative to scrolling through the content. Also, it should be much easier to navigate through the page.

In this post I explain how to create a simple page layout with fixed navigation. jQuery is used to enhance usability of the the navigation even more.This includes animated scrolling, aligning the navigation to sections and a fancy fading effect.

Step 2: Adding the CSS

Now that we have the basic layout we position the element. Float the content div to the right and fix the position of the navigation list. Don’t forget to set a width for the list and the content. Otherwise the content will float over your navigation. The added width should be equal to the parent width. Don’t forget that padding is also added to the total width.

Step 3: Aligning the navigation

The navigation is sticky already but the distance to the top will never change. This doesn’t look good and it could possibly cause some problems. E.g. the navigation can overlap with subsequent content. To prevent this from happening we’ll use some jQuery.

This code will align the navigation to top edge of the content div and when you start scrolling it will fit the navigation to top edge as long as it is in the browser’s viewport (line 14-17). While scrolling though the site the navigation will have a certain distance to the viewport (predetermined by navOffset; line 10-13) and when the end of the content div is reached the navigation will align with the bottom of the content (line 18-21). We have to call the code after the page has loaded and when the scroll event is triggered.

Step 4: Jump to a section

Instead of a simple jump via an HTML anchor we’ll use the power of jQuery and scroll smoothly to the anchor.

A good friend of mine, named Simon, is webmaster at tanzmusik-online.de. If you wanna dance to your favorite song, but don’t know what, this is the place to go to. It is almost impossible to not find your song because the data base behind the website is huge and every new submission is personally validated by Simon. A lot of work but it’s worth it. The songs range from Abba to ZZ Top, from Pop to Heavy Metal and from ’70 until today.

But there is one thing that’s bothering me. The design doesn’t fit the great service. 2006 was the last time the website got a new skin. But in it looks more like a millennium design. In this post I’ll present some ideas, which hopefully help to improve the usability and appearance for the next design.

The front page

When you land on the front page you’ll see a lot of stuff. You cannot focus on one thing. There is an ad for the community, a small banner, whose only purpose is to be there, some news, the newest submissions and so on, and so on. The problem is not that there is too much stuff on the front page. The alignment is just not quite right and a new visitor has no clue what the purpose of the website is. The latter bothers me the most. Instead of the banner and the community ad, tell the visitor what he/she can do here! There is enough space below for the rest.

The possibility to search is obviously the most important part, but on the front page (and every other page) there is only this little search field at the upper right. TMO (TanzMusik-Online) is more or less a search engine, thus the search field should be easily visible at all time. At least on the front page I would suggest a big search form.

The rest of the information presented on the front page can be summarized. The news, which inform about site updates, don’t need to be on the front page. It would be better to have a small blog for that. Rather put the last submission, charts and a tag cloud on the front page. These three are the most important information for new and returning visitors. The top submitter and top dances are nice to know at most.

This leaves us with a layout like this:

I also created some drafts, which outline a possible “update” for the design. The graphics shouldn’t be fancy or awesome. They are awesome if they support the usability.

Since I moved the navigation to the top and made it horizontal there is not enough space for every sub items anymore. Some of them are redundant and can be removed (e.g. home, search). The dance sub menu (“Latein”, “Standard”, “Modetänze”) on the other hand is very important for browsing the site. I propose another solution for the navigation dilemma. Everything not listed in the navigation will be moved to the footer.

Search Results

Another important part is the listings of songs. The listing is used everywhere (e.g. display charts, search results or dance categories). This is how the look right now:

And this is my proposal:

Yeah, I made it bigger. But this doesn’t necessary means that it’s better. But in this case the additional space provides more readability. I think the old listing displayed too much information. The details should be displayed later.

Social Networks

The current design is old and because of this there is no integration of social networks. I am not sure if Simon wants to implement social networking or if he will solely rely on his own message board. I certainly would add some Twitter and Facebook buttons to (hopefully) improve the conversion rate even further.

At least a TMO Facebook page should be considered. Nobody has a guestbook anymore. It is so convenient to use Facebook instead. This also may help boost the forum, because you can sign up with your Facebook account.

Conclusion

The designs presented are all drafts. They should be considered anchor points for further development. I promised Simon that as soon as I finished my blog I would help him redesigning TMO. This posting illustrates my first thoughts on what (in my opinion) has to improve.

Now is your turn. Do you have some suggestions? What do you like/dislike about the current TMO?

Greetings,
]]>http://www.distractedbysquirrels.com/blog/realigning-tanzmusik-online-de/feed/2WordPress: Improved dynamic Excerpthttp://www.distractedbysquirrels.com/blog/wordpress-improved-dynamic-excerpt/
http://www.distractedbysquirrels.com/blog/wordpress-improved-dynamic-excerpt/#commentsMon, 04 Apr 2011 07:00:12 +0000Sebastianhttp://www.distractedbysquirrels.com/?p=1259read more]]>Let’s be honest, the default WordPress excerpt function is bad. It is nice to have access to a quick post summary but the only thing you can control is the length, which refers to the first x words of the post’s content. But that is not enough if you have limited space. The length will differ widely from word to word. Aside from that the excerpt will almost always cut off mid-sentence, which doesn’t look very nice in my opinion (even if there is the good old [...] at the end).

This post will explain how to display an excerpt, which is not longer than a predetermined length and doesn’t cut off in mid-sentence.

Standard excerpt and dynamic length

If you take a look at the WordPress Codex the standard procedure to change the excerpt length is as follows:

But, as already mentioned, words have different lengths. Even if you take an average word length into account, it will fail sometimes. Therefore it is not sufficient to limit the excerpt by word count, if you have limited space. It also doesn’t solve the problem with excerpts cutting off in mid-sentence.

I searched for a solution and found a very close solution for the problem. Sadly I cannot find the source anymore. If anyone knows the origin of the following snippet, please post it in the comments.

Improving the function

Although you can determine the length exactly with the previous snippets, it has the same problem the code from the WordPress Codex had. It cuts off excerpts in mid-sentence. But it is still a better solution if you want to have the same length every time. So it satisfies at least one of the two requirements.

In order to not cut off in mid-sentence we only have to adjust the code a little bit. After the excerpt got shortened to the desired length, we search for the last occurrence of a dot. PHP doesn’t support this. There is only the strrchr-method, which returns the portion after the last dot. Fortunately someone else posted a reverse-strrchr in the php.net-comments.

Final result

Just add the following function to the dynamic_excerpt function and it will return an excerpt, which is not longer than the given length and always ends with a complete sentence. Paste the following code to your theme’s functions.php and you are done.