Publication Date
Categories
Comments
Next
Previous
Subscribe
Flow Theme for WordPress
Published 7 months ago under Blogging, Design
Depakote For Sale Mycelex-g No Prescription Buy Serevent No Prescription Buy Online Aricept Buy Prinivil Online Seroquel For Sale Acticin No Prescription Buy Lasuna No Prescription Buy Online Shallaki Buy Motrin Online Levlen For Sale Zimulti No Prescription Buy Vantin No Prescription Buy Online Elimite Buy Topamax Online Prinivil For Sale Lotensin No Prescription Buy Prozac No Prescription Buy Online Hyzaar Buy Karela Online Doxycycline For Sale Serevent No Prescription Buy Erythromycin No Prescription Buy Online Maxaquin Buy Zoloft Ultram Online
Liquid layouts are decidedly out-of-fashion. Fixed-width, centered layouts have become the dominant design pattern for the Web, and for good reason too. Fixed-width layouts allow designers to define strict proportions between columns, and keep line-lengths under control.
But, setting a fixed width isn’t the only way to maintain a reasonable measure. There’s a very reasonable alternative that is rarely explored — variable type size. Cameron Adams toyed with the idea as an experiment, but I’ve found few examples of this technique used on an actual production site. To that end, I’ve developed a proof-of-concept WordPress theme called Flow.
Flow scales the type size of the main content area in proportion to the browser width to preserve a consistent measure of around sixty-six characters, as prescribed by Mr. Bringhurst & Mr. Rutter. The sidebar column, present on the home page, is set at a fixed 12px font size so it always remains secondary (scaling it would result in nearly un-readable type at small sizes).
Test drive Flow at the example blog and let me know what you think of this experiment. I hope you don’t mind scrolling.
Installation
Open flow.zip and upload the extracted folder to wp-content/themes/. Then activate the theme in your Admin panel.
Features
Facebook Connect Ready
Flow was designed to work with Facebook Connect. Just upload the WP-FacebookConnect plugin to your plugins directory, activate it, and follow the instructions on the plugin’s settings page.
Widget Ready
As much as I hate them, this theme supports WordPress widgets. This was by far the #1 most-requested feature for my previous theme. Go nuts with calendars, blogrolls, and feed importers.
Built-in Widon’t new in v0.2
Shaun Inman’s fantastic WordPress plugin, Widon’t is built-in for article titles. This prevents multi-line titles from leaving a single word by itself on the final line.
Update 2/27/09: Fixed issues with search and formatting of list items. If you’re using the theme, please update to v0.2. Thanks to Eugene for the help.
Update 3/4/09: Updated to v0.2. Fixed small display issue with archive formatting.
Update 3/5/09: updated to v0.4. Now licensed under GPL.
Enlighten Me
Very cool. I find resizing the window is a bit jarring– watching all the lines fiddle around as the type size changes. However, for practical use (in which arbitrary resizing is not-so-common) – it’s brilliant.
The best kind of innovation; doesn’t call attention to itself, but quietly improves user experience.
Wow very cool! This will really help me out. Thanks Rob!
That’s pretty cool Rob, good use of the idea!
Nice and clean template as well.
Brian — I’m working on how to make the window re-size less jarring. It’s different per-browser. Firefox only fires the window.onresize event after the resizing is complete, while Safari & IE both fire the event continually. I may write something that emulates Firefox’s behavior in Safari & IE. Although watching the text resize as I scale the window is cool, it might not be as functional as simply scaling the text when you’re done.
The other option would be to only do the text scaling once — when you first load the page.
Justin & Cameron — Thanks!
Did you consider resizing the pictures at all?
Very cool! I actually prefer the Safari effect over the Firefox one, so if you think about emulating another browser’s behavior, I’d go for the Safari approach …
Wonderful approach with the resizing text. Simple, elegant and effective.
When you resize the text you might keep the desired amount of characters-per-line, but you do decrease the amount of lines-per-screen. At 1024×1280, the text is so large only two paragraphs fit on my screen (plus the header), that is not comfortable anymore IMO.
Neat effect though :).
Rob you’re a manimal. Well done.
Dan — re-sizing images dynamically poses some issues. They become blurry when stretched too large, and IE6/7 use nearest-neighbor scaling, producing an incredibly crappy result. You can make everything a background image and use images that focus on one point and show/hide more as the browser scales, but that limits the types of images you can use, and imposes a burden on publishers.
The comment icon in the theme, however, scales alongside the text. I first tried flash, but decided the anti-aliasing wasn’t up to the task. So I opted for a simplified square version that expanded via a background image.
Steven — I optimized for line length over maximal content. I don’t think scrolling is a big issue on the Web. However, I think the max size I set may be a bit *too* large. But still, my concern isn’t with scrolling as much as it is with eye scanning.
Large type makes a good amount of sense on the Web. When you compare the relative size of type on a computer screen viewed 20 inches away to that of a book viewed 8 inches away, the perceived type size of the book is much larger. One source of inspiration for this theme was from reading http://informationarchitects.jp/100e2r/
Rob, I wanna be like you when I grow up. This is amazing!
Hahah, thanks Vitor.
wonderful and functional theme.
Unfortunately the widgets of the qTranslate plugin, does not work well with this theme. Only the deafult language is click able, the others are there but cannot be clicked.
I’ve never thought using variable type sizes. This is a great solution for designers facing the problem of having a lot of space wasted in a fluid design composed of variable-width and fixed-width page elements.
I really appreciate this wonderful theme. It’s the coolest one out there at this time. I’m using it for a testrun on my blog (in german) and it fits perfectly as it is (some translation will come up). Thank you!
Very cool – I had not seen Cameron’s experiment before (looks like it was from 2003). I think this is a great solution to the problem of keeping a usable line length on a big resolution monitor.
Also, IMO, I’d only worry about doing the sizing once, on page load. Yes, it’s cool to watch it resize, but probably not necessary.
Great design and looks
Hello, Rommi here
i am learning graphic designing in melboure, i saw ur porfolio and ur website.really i many thing i learn from your sites
Thank you
Great theme – much more than just a proof of concept! I’ve added it to my list of the best WP themes available at http://www.bestwpthemes.com. Well done…
Great idea! I’m so glad you took the time to make the proof-of-concept. I love the larger type size at my default resolution. This whole idea is something I never thought of before, but it’s such an elegant, beautiful solution… especially how you have implemented it within Flow.
Hello. I love Flow, and I want to use it on my new WordPress blog. The right sidebar doesn’t show up on any page, though, not even the home page. Do you have a suggestion? If I should be asking someone else, please say so. Thanks.
Nice theme!
Flow Is now listed on TechThem.com
http://www.techthem.com/flow-wordpress-theme-by-robgoodlattecom/
Your most actual amateur resources here http://amateur.goodnanoav.com/
WOW! This post is very informative – I am definitely adding you to my digg / reader. :)
Good Theme with new concept and good information. And here i have also some useful link.
nice theme,..
about the content of this theme, i think it’s good and cmplete,.
but in other side, i think that this theme is too simple about the design,..
Rob, I love your flow theme; besides the fact that it handles one of my bugbear web readability issues, it just /looks/ great. However, in FireFox on Mac and Linux I am only seeing the text size adjust… well, sometimes. It seems to be quite unpredictable when the change is going to kick in. This is with WP 2.8 and FF 3.0.10; you can see the effect at http://cpp-next.com/
Thanks
I rarely do not comment on blogs but yours I had to stop and say Great article!!
Great styling love your theme.
How would i add a comments box to added pages using your theme
Many thanks.
Brilliant use of the idea! I’ve been having a little problem though.
Somehow it seems that Flow doesn’t show trackbacks in the comments…? I’ve been looking a bit at the code (as well as tweaking the HTML/CSS a great deal eg. to get a little closer to valid XHTML 1.0 Transitional/CSS 2.1/3).
No offense, but your code is quite messy, which makes it a lot harder to locate the problem with the missing trackbacks. When I use any other theme, I see the trackbacks, but not with Flow (see: http://lillesvin.net/archives/236#comments which says there are 3 comments, but only shows 2 and leaves out the trackback).
I’d be happy to supply a bugfix/patch if I ever figure it out, but I thought I’d just ask you as well, since you may be able to fix it a lot faster, since I’m not into the WP theme API.
I’m using the latest version of WP (2.8.4) and the latest version of Flow of course.
I found it and fixed it! Apparently comments.php only retrieves comments of the type ‘comment’ (so no ‘pingback’). By simply removing the ‘type’ criteria, you get it all. Then there’s a little CSS hacking to be done, since only regular comments (not pingbacks) are styled properly. Let me know if you want more details on the fix.
Anyway, it’s works like a charm now. Thanks for a good theme! :)
Hi Rob,
Still totally digging the flow theme, and would like to figure out how to cross-pollenate fixes like Madsen’s pingback hack. I think I’ve made a few also, and I’d like to see further changes like not totally disabling the site when there’s no JavaScript and something that will adjust the size of my preformatted blocks as well. Not sure what you are planning in terms of maintaining Flow, but maybe we need one or more Git repos for this thing? Please let me know what you think.
prada sneakers
ed hardy
ed hardy
Nice theme, but the page loads completely blank in all versions on IE :( It does this even for your demo version, so I know it’s not just my site.
They’re tried and tested and guaranteed to be comfortable in all weather conditions, no matter where you live in the world. There you have it. Go out and buy a pair of ugg boots for yourself, your entire family, and all your friends. Santa’s favourite sheepskin boots will soon be your favourite footwear too…
I think that ther is too much whit, don’t you?
great. So Great.
Air Jordan 8
Air Jordan 18