Much like I did for the Further theme, I’d like to share my thoughts behind Ryu — the free theme I released recently.
Yes, you guessed right. It’s named after the main character of the classic game. If you know why the character was named Ryu, you will understand why I named this theme Ryu, too. 🙂
I mentioned this in my previous post about the Further theme, Behind the Design of the Further Theme, too that I strongly believe that we, as WordPress theme designers, should create amazing themes for specific purposes/audiences rather than multi-purpose themes that are just good. In many cases, themes designed for a specific purpose or a targeted audience perform better when people use them for that purpose. I’ve created Ryu specifically for the Facebook, Tumblr, and Twitter generation of personal bloggers.
Demo Site | Activate it for your WordPress.com blog
Note to self-hosted users: Ryu is going to be available on Extend in the near future.
EDIT: Thanks for waiting! Ryu now is available for download on Extend
MAIN FEATURES
- Post Formats: Standard, Image, Video, Gallery, Aisde, Link, and Quote are supported.
- The background color of a post with the image post format matches the image inside that post.
- Gravatar as the default header image.
- No sidebar & Infinite Scroll first
- Four optional widget areas in the top panel.
- Social link badges to your profiles on Twitter, Facebook, Pinterest, Google+, LinkedIn, Flickr, GitHub, Dribbble, Tumblr, YouTube, and Vimeo.
- No default menu or a Custom Menu
- Support for flexible height Custom Header, and a Custom Background.
- And of course it’s responsive. It looks and works great on smaller screens, such as the iPad and iPhone.
Post Formats
What I mean by “the Facebook, Tumblr, and Twitter generation of personal bloggers” is bloggers who don’t necessarily spend a long time writing long articles but often post shorter ones — or just images, videos, galleries, links, and so on. Therefore, supporting those post formats is a must in this theme so that I can apply visual treatment that enhances each format’s content. They say a picture is worth a thousand words, and the Image format is specially popular in personal blogs.
Do you remember the classic theme called Duotone? One of my teammates, Matías Ventura created Tonesque, a fantastic plugin inspired by Duotone. Tonesque lets us grab the average color of an image. Ryu uses it as an instrument to automatically change the background color of each post with image post format.
As you can see in the screenshot above, the image in the format will be displayed as wide as the page. Who doesn’t like to show off images in a big size? If you want to add some text after the image, you can use the excerpt which appears below the title like a paragraph in the standard format.
The gallery format also displays galleries at full width, but it does not use the background color treatment.
Gravatar as the default header image
You’ve set your Gravatar, right? Your personal blog should have your Gravatar!
Ryu will display the site owner’s Gravatar by default. If you want to display something other than your Gravatar, you can upload a Custom Header Image (Appearance → Header) or you can remove it completely by selecting Remove Header Image.
No sidebar & Infinite Scroll first
Ryu doesn’t have sidebar at all, and yes, this is a feature.
For personal blogs, the traditional sense of a sidebar is often less important and filled with junk that its readers just simply ignore. Filling pages with stuff has never helped usability, right? So why not let readers to concentrate on the most important stuff — your content?
You may ask, “What about widgets? Are they in the footer?” Nope. Ryu was designed with Infinite Scroll first in mind. Like I mentioned before, the target audience often writes shorter posts or just images, videos, galleries, and links. Infinite Scroll really enhances the reader’s experience on blogs that have shorter posts.
Don’t panic, widget lovers! Ryu has four optional widget areas that appear in the togglable panel at the top if you configure widgets.
Also from the Customizer, you can add links to your profiles on Twitter, Facebook, Pinterest, Google+, LinkedIn, Flickr, GitHub, Dribbble, Tumblr, YouTube, and Vimeo.
No default menu or a Custom Menu
Does your personal site really need a menu? Didn’t you add some menu items because an empty menu looked strange? Well, let’s not do that anymore. A personal blog should only have a menu if it needs one. This is why I’ve decided to not to display a menu as a default. Of course if your blog needs a menu you can easily set up a Custom Menu.
OTHER DESIGN DECISIONS
Fixed-width columns and gutters
Responsive design in WordPress themes is, in most cases, essential nowadays and I like it, but fluid grids have been bothering me greatly because of the following reasons.
- Gutters that are proportional to the screen or whatever the max width of the page can make the content elements look either squashed together or pulled away from each other depending on the viewport.
- Typographic elements such as headings and paragraphs can be stretched at some breakpoints.
I’m not saying they are impossible to solve but it is time-consuming to get it right pixel by pixel, and they are pain points — for me, anyway. So instead of using fluid grids, I decided to try the Frameless approach and I really liked it! The approach is basically using fixed-width columns and gutters to adapt the layout column by column. It’s a simple idea but I think it’s brilliant. This approach makes so much easier to help elements on a page stay in columns. As a result, we can display them in balance proportions that are pleasing to the eye all the time.
Grand Typography
What I mean by “grand” here is both magnificent and big in size. Have you ever needed to increase the font size in your browser because you want to read blogs while you sit back in your comfortable chair? I have.
With Ryu, your readers don’t need to adjust anything. It uses 23px for body text, and for entry titles, it’s 68px (Whopper!). I really wanted to use a large font size so I chose Playfair Display for the titles. It’s stylish and beautiful, especially at large sizes. It also has short descenders, which make it work well with a tight line height. As a bonus point — Playfair Display looks great when paired with Georgia, the typeface used for body text. Usually I stick with two typeface families, but this time, it made sense to me to use one sans-serif as the third typeface to give visual contrast and hierarchy. I used Lato in all-caps in post meta, navigations, and site title.
Circles
To match with the Playfair Display’s round terminals, I chose to use circles in several places such as the site owner’s Gravatar, post format icons, social profile links, and post navigation.
It’s time to let you play with Ryu now. I hope the theme as well as this post give you something to think about as you design your next WordPress theme. I’ve really enjoyed the process of creating Ryu. Creating themes never makes me feel bored. As Ryu says…
“The more I learn, the more I realize how far I am from the end of my journey.”
– Ryu
ThemeShaper 
53 responses
Wow. I love this theme. It is gorgeous. Similar to my current theme, but a lot better. Great work. (I think I’ll switch!)
Such a beautiful theme! I’ve been eyeing this one off for my personal blog ever since I saw it on WordPress.com.
With this theme as well as twenty thirteen I’m loving the focus on post format style blogs with a simple single column. Such a refreshing change, a theme doesn’t have to be all things to all people 🙂
Looks really nice, and I really can’t wait to implement it on my selfhosted installation. Any idea when it will be available for download?
Thanks! I can’t know exactly when but hopefully not too future. I’ll post an aside here when it becomes available for self-hosted users. Stay tuned 🙂
sweet! I can’t wait!
[…] 27. Behind the Design of the Ryu Theme […]
Love this theme – looking forward to using it on my hosted wordpress site. Hopefully it will be available soon.
Great work.
Hi! I think this looks a very promising theme and am also looking forward to the opportunity to use it on a self-hosted site.
However, I’ve looked at some sites that are already using this theme (e.g. http://paolobelcastro.com) and I wonder whether the photos in the picture posts might not be a bit too big? Sometimes, especially when using a laptop, the photo’s width means that its height is too much for the view port. It seems a shame that some users might not be able to view the entirety of a picture post when the aim of that post format is to show those pictures off. Did you consider any ways around this when you were designing the theme?
Thanks for your feedback, Matthew.
Yes, a portrait shaped image can be too tall on small screens if it’s attached in “Full Size”, but we always can choose the attachement size from “Attachment Display Settings” in the media uploader, such as “Medium” or “Large” before we attach it to a post. So I’d recommend to choose those sizes if you think the full size is too big. That’s one of the reason why the contents in image post format is center aligned.
Thanks for your reply! That sounds like a good plan. It’s nice that there is a work around. I’ve only just started using WordPress again after a six month hiatus and so simply resizing the image didn’t occur to me!
Just posted a comment about this and realize that someone has posted similar suggestion earlier LOL
Anyway, this is just occured to me: how about making big portrait featured image appeared in two-columns fashion? content on the left, portrait featured image on the right.
[…] https://themeshaper.com/2013/04/09/behind-the-design-of-the-ryu-theme/ […]
Takashi, I have to say this: Ryu rocks, period. I’m one of its user 😀
One of main reasons for me to learn WordPress theme development since 2008 is I hardly find theme which suited me best. So I’ll say to myself what the heck, I’ll just learn it and make the theme I want. However, sometimes I found themes I really like. Ryu is one of those rare themes which I really like.
Anyway, one suggestion tho: when using a big portrait featured image, the image becomes so big its width is fixed relatively to the window and its height overlaps the window’s height. I personally feel image which is presented this way is less enjoyable
Just that one suggestion tho. The rest? It rocks. 😀
I adore this theme, and am using it currently (thedomesticates.com), but a few of my readers have commented that the text is just too large for them. I tried to use adjust the font size by individual post using , but it was ineffective. I know that I could choose to customize, but as a student who doesn’t plan on monetizing her blog, $30/year seems like a lot to change only the font size of a theme that is otherwise perfect for me!
Any ideas? Or would you consider making font size adjustable?
The large font size is one of characteristic and features of Ryu theme.
If you are a WordPress.com user, the Custom Design upgrade is the only option to adjust the font sizes effectively, and I’m afraid I have no plan to add a similar option in the theme.
I have the same issue. I love the simplicity of Ryu, but the font is much too big for my purposes.
You can pretty easily tweak the font size in Ryu by adding some custom CSS. If you need help with that, feel free to post in either the WordPress.com or WordPress.org forums:
http://wordpress.org/support/theme/ryu – self-hosted
http://en.forums.wordpress.com/forum/css-customization – WordPress.com
Your Ryu theme is very very good, everything is so neatly done and it works so well and yes, it has inspired me to be more innovative with my own theme design and development. At the same time it’s depressing when I realise how far I need to progress with my own work and capabilities 🙂 Thanks for releasing it for download. I find deconstructing themes one of the best ways to learn.
I have one question. I’m wondering why you embedded the Tonesque plugin when I’ve read so much about this not being good practice cos it won’t get updated etc etc. I’m interested to know your take on this.
Anyway, cheers and once again, thanks
I’m glad you like the theme.
I agree it’s not ideal to embed a plugin in a theme in general. The reason I took this approach with Ryu and Tonesque was that I wanted to exhibit the newly born (at that time) plugin developed by my friend and colleague as an example use in a theme. I was aware of the issue you mentioned but Matías and I work closely everyday and that makes easier for us to reflect any updates on the plugin in the theme. We’ll keep the theme updated if there is any update on the plugin.
I just wanted to say that this is the theme I’ve been searching for my entire life! It is so clean and beautiful, and the design reflects everything that I want my personal blog to say about me. I love looking at it, and it actually makes me want to blog every day!
Takashi, you are a star!
Hi, Love this theme. Would you consider adding Instagram as a part of the links options? Thanks!
Thanks! 🙂
Yes, absolutely we would, as soon as Publicize supports Instagram connections.
[EDIT]: I just received notice that Ryu doesn’t actually use Publicize for its social links (which it really should). I think once we switch to a functionality to make social links portable between themes, this would make more sense.
Wow. I’m beginning my personal blog and decided to go on with this theme. I’m loving it so far. Thanks so much for bringing this in for free. 🙂
Hello Takeshi. Currently using this theme and in love with it. However, I want to integrate the side matter plugin but can’t because there are no side bars. Do you have any suggestions as to how I can get this done? ps. I have no clue how coding works so please be gentle.
Thanks.
Funmi
Ryu is designed to not to have sidebar. I don’t know much about the plugin you mentioned but I’m afraid to say that if you really need a sidebar, it would be better to look for other themes.
Great theme. I’m using it on my personal blog. Nice unfussy interface but with all the options and customization I need.
Hadouken! You Win!
Hi Takashi,
Thank you so much for creating Ryu. I love it. It’s made being a blogger for the first time absolutely seamless. I use my WordPress blog as a place to post writings, video, images, etc. as I work through my MFA studies. I’m about to add pages with other content. It took a while to figure that out, so you can see that I am very new at it. I am curious to know if I can add an image and video rotator type of plugin to Ryu for the pages I want to add. I do not see a plugin option in my dashboard. Thank you again for creating a beautiful theme!
If you don’t see the plugins area in your dashboard, it probably means you’re using WordPress.com, rather than a self-hosted site. Installing plugins is only possible with self-hosted WordPress sites, but many useful features are already built into WordPress.com.
If you need further help, feel free to post in the WordPress.com support forum: http://en.forums.wordpress.com/
love this theme! its modern and clean and pretty. one suggestion is to be able to add a link to instagram.
You can add links to any social-media services you like using a text widget. If you need help, feel free to post in the Ryu support forum:
http://wordpress.org/support/theme/ryu
Love the theme, however my gravatar won’t show in the header.
Hi there, I’d be glad to help you troubleshoot this over in the Ryu support forum – would you mind posting your issue there, with a link to your site? Thanks.
http://wordpress.org/support/theme/ryu
Please Can anyone tell me!! How to put menubar color changing in theme optimization
Is there (or will there be) a version of this theme not for WordPress? I’m using it for a blog site but would love to use it for a more static site as well.
Hi Carl, checked with Takashi, and this theme is designed exclusively for WordPress use. Good luck with your site!
Would you possibly consider adding GoodReads to the social link buttons?? 🙂
Great theme!
How do you get the galleries displayed as a slide show?
[…] did a bit of reading at Theme Shaper about the design of the WordPress theme I use (“Ryu”). The designer mentioned that it […]
Hello
This theme is great, i use the separate version on my selfhosted blog
One request : the email link seems to support oly mailto: and not a ful url. I would like to use instead of a direct mailto a link to the contact page, is it possible ?
Thanks
Luc
Hi Luc, I saw in the WordPress.org support forum that you were able to code a workaround for this in a child theme. I’m linking to it here in case others want to do the same: http://wordpress.org/support/topic/email-contact-button-using-contact-instead-of-mailto
This theme reminds me of a Bob Dylan or a GratefulDead. More hype than anything else. If you listen to either one, they both really sucked. Anyway, I was giving your theme a ten – until I clicked on a photo. (using Android phone) The lightbox prevents use of the back button, and the x to close it – is either so small that you cannot see it, or it is so far up in the upper left corner, that you cant get your finger on it – to close it. Also, the -View Full Screen- button (while in lightbox) is burried 2 feet below. (So you cant access it either). … If a theme does not work well on an Android, I feel it is a second rate theme, that millions now and in the future cant use. Your fab pictures have caused the hype, but they are really a problem. Just try clicking some of them using a phone. …moi (Italy)
Thanks for the bug report – much appreciated. I will see if we can replicate this on an Android device and try to get it fixed – that definitely doesn’t sound like a good experience.
[…] here it is, the new hokament. I’m now using the Ryu theme by Takashi Irie from Automattic. It’s still simple and obviously bolder/easier to read, and […]
What is the name of the font used for the blog page description at the top? i really love it.
Hi Janay, glad you like it! If you mean the font used in the tagline, it’s Playfair Display, as you can see in this screenshot: http://cl.ly/image/370K2947473z If you mean something else, just let me know!
That’s the one!! thank you!!
How do I make my header lowercase in this theme?
Hi harshadakarnik, it looks like you’re using Ryu on WordPress.com, so you’ll need the Custom Design upgrade to add some custom CSS to make the site title lowercase. You can purchase the upgrade in your dashboard under Store and then post in the CSS Customization forum for help with the specific code you’ll need to add.
Hi! Is there the possibility you could add a DeviantArt option for the top-link section?
Hi Christian, thanks for the suggestion. As this isn’t a common request I don’t think it’s something that will be added, but you can always feel free to add a link to your DeviantArt page through either a text or image widget.
I love you to make my blog look so amazing. ❤
Hello. I am using the Ryu theme in my blog: http://travesiasyodisebas.wordpress.com/ I am trying to show excerpts on the front page by adding tags to the posts. But when I click the “Read more…” link it jumps to some place inside the post, but I prefer that the top of the page is displayed. Reading I found that WordPress proposes an easy solution for this issue:
http://codex.wordpress.org/Customizing_the_Read_More#Prevent_Page_Scroll_When_Clicking_the_More_Link
Is it possible to update the theme so it can has this feature? Thanks a lot.
Could you please make your request in the WordPress.com Themes support forum:
http://en.forums.wordpress.com/forum/themes
Here are some tips on getting the best support there:
http://en.support.wordpress.com/getting-help-in-the-forums/