Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko

Advertisement

In this post we are glad to present to you yet another freebie: a responsive WordPress theme Yoko which was designed by talented designers Ellen and Manuel from Elmastudio1 and released for the Web design community. Of course, the theme is absolutely free to use in private as well as commercial projects.

Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.

2

Download the Theme for Free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

Screenshot3

Features

The theme requires WordPress 3.1+ to run. It has following features:

  • Cross-browser compatible (tested in Chrome, Firefox, Safari, Internet Explorer 8+)
  • HTML5 (with fallback for IE < 9) and CSS3
  • Responsive layout (CSS3 media queries, not supported in IE < 9, but you can use libraries like Respond.js10 by Scott Jehl or CSS3-Mediaqueries-js11 by Wouter van der Graaf to make it work in older versions of IE.)
  • WordPress post formats (aside, gallery, image, video, link and quote)
  • Theme options page, custom background, custom header image
  • Optional sub menu
  • A custom social links widget to promote your RSS-Feed, Facebook, Twitter, Flickr, Vimeo, LinkedIn or Delicious profile
  • Full-width page template
  • Google Web fonts in use (Droid Sans and Droid Serif)
  • Threaded comments with Gravatar support
  • Shortcodes for multiple columns, info boxes in three colors and highlighted text
  • Currently available in English, German and French.

Screenshots

three-column-layout12
Three-Column-Layout.

two-column-layout13
Two-Column-Layout.

one-column-layout14
One-Column-Layout.

comments15
Comments area.

customheader16
Custom Header.

post-format-gallery17
Post Format Gallery.

themeoptions18
Theme Options.

Behind the Design

As always, here are some insights from the designers:

“Since the mobile Web is getting more and more popular every day, we think that it’s also time for WordPress themes to become more flexible and adapt to different devices and screen sizes. While designing the Yoko theme, our goal was to create a minimalistic design with focus on content and good readability on various devices. Also we wanted the theme to be easy to use and customizable for everybody, so we kept the theme options simple while still including the most important options to add a personal style to the theme.

The main problem to solve during the design and development process was to make sure that all the different contents and plugins that people will use still work in the responsive layout. Of course the responsive design approach is still in development but we think it’s a lot of fun to explore new possibilities and as doing so make Web design and WordPress themes more powerful and flexible to use.”

Thank you, Ellen and Manuel! We sincerely appreciate your work and your good intentions!

Footnotes

  1. 1 http://www.elmastudio.de/wordpress-themes/yoko/
  2. 2 http://yoko.elmastudio.de/
  3. 3 http://www.elmastudio.de/themes/yoko-wordpress-theme/
  4. 4 http://yoko.elmastudio.de/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/06/yoko.jpg
  6. 6 http://wordpress.org/extend/themes/download/yoko.1.0.4.zip
  7. 7 http://www.elmastudio.de/wordpress-themes/yoko/
  8. 8 http://www.elmastudio.de/wp-content/uploads/themes/yoko-theme-documentation.pdf
  9. 9 http://vimeo.com/album/1616312
  10. 10 https://github.com/scottjehl/Respond
  11. 11 http://code.google.com/p/css3-mediaqueries-js/
  12. 12 http://yoko.elmastudio.de/
  13. 13 http://yoko.elmastudio.de/
  14. 14 http://yoko.elmastudio.de/
  15. 15 http://yoko.elmastudio.de/
  16. 16 http://yoko.elmastudio.de/
  17. 17 http://yoko.elmastudio.de/
  18. 18 http://yoko.elmastudio.de/

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    looks awesome! thanks

    3
  2. 2

    Very nice looking theme!

    4
  3. 3

    thanks a lot for this inspiration and giveaway :)

    1
  4. 4

    Suddenly inspired!

    June 7, 2011 2:32 am

    I think I just died and went to heaven ;-)

    11
  5. 5

    The smartphone/iphone layout does not work well. The logo and image takes up too much space and the “categories”-links does not work (as well as taking too much screen space). Clicking on a category link loads “the same page” (it does change the articles listed below, but the user will only see the same page with the category links again and it does not seem to have changed).

    -4
    • 6

      Hi Pixelpusher,

      I actually think its quite common on mobile devices that you have to scroll down the page a bit to see all the content. But since the header image and the sub menu both are optional you can just not use them and have a very small header instead. In my opinion this solution is working good especially for a theme that has to hold so many different contents :-)

      7
      • 7

        Manoj Kumar Sharma

        June 8, 2011 4:32 am

        Hi,

        Excellent Theme. Looks really good, especially in the small screen versions.

        However, as already pointed out, if you were to switch to the phone view, the sub-categories in the menu never appear. On has to scroll all the way down to view the CATEGORY section to identify the sub-category names. And then, the sub-category names do not appear identifiable as sub-categories to the selected category.

        Thanks for sharing this.

        -1
  6. 8

    Very nice clean theme! well done.

    0
  7. 9

    Aweseome Theme – use it on both blogs!

    2
  8. 10

    Very clean and fresh looking theme. Will certianly use this somehwere :) Thanks

    1
  9. 11

    Amazingly awesome theme, thanks for sharing and a nice clean theme too.
    Bravo.

    0
  10. 12

    nice, but what about IE? 7-8?

    -18
    • 13

      What about them? If you want or need to make it responsive for them too you can use respond.js or CSS3-Mediaqueries-js as they said in the article.

      3
    • 14

      @franszo, I think this is your first time hearing about html5 and css3.

      1
  11. 15

    Ohh, very clean and fresh. Love the vivid green header picture. Many thanks.

    0
  12. 16

    Anterpreet Singh

    June 7, 2011 3:40 am

    Great theme. Simple and perfect :)

    1
  13. 17

    Thanks for this great high tech theme! Love the concept, so I’ve tried it out immediately. After having uploaded a new header image, I opened my blog on my iPad. It shows the default header image instead of the freshly uploaded one. On my desktop everything looks the way it should! Any idea why this is?

    1
    • 18

      Thanks for your feedback, Michael. I am not sure, but you might have to clear the cache one more time. Do you use a chache plugin for your WordPress blog?

      0
  14. 19

    Great looking theme, and I’m definitely going to put it to use somewhere.

    Running through the W3 Validator results in 21 errors however. Do you suppose this is more related to WordPress 3.1 rather than the theme itself?

    Thanks again for all your hard work!

    0
    • 20

      Hi Shad,

      thanks a lot for your feedback :-) Yes, you’re right about the validation errors. The theme didn’t have this validation errors just a couple days ago. I believe its the “rel” attributes that the W3C validation doesn’t accept, but I will check it for sure again :-)

      3
  15. 21

    Very fine work – thank you. Clear design and good readability.

    0
  16. 22

    i love this. but i am not sure if the media-query thingy is a really good solution …

    0
  17. 23

    I could be horribly wrong but this looks like fluid percentages rather than media queries, at least the way I have seen them implemented.

    0
    • 24

      Hi Jason,

      its a mix of both (media queries and % width sizes). With this solution the theme can adapt to as many different screen sizes as possible :-)

      1
  18. 25

    Nice….

    1
  19. 26

    Thanks for the lovely theme!

    0
  20. 27

    Very nice clean theme! Thanks for sharing.

    1
  21. 28

    Really nice to see these auto resize templates. If you are looking for a free framework that will yield similar results, try lessframework.

    0
  22. 29

    Extraordinary designer. Congratulations to Elmastudio!

    1
  23. 30

    awesome… thanks..

    in smaller screens, sub pages menu is not visible. it would be better if the fix is available.

    0
    • 31

      Hi Sriramajeyam,
      we’re happy that you like the theme :-) Since the space on the smartphone version is very limited, we decided to hide the sub menus in the smallest mobile theme size for better readability.

      So the mobile version will only show the most important navigation menus. To still provide a link to all your categories you could maybe activate the category widget in the sidebar :-)

      1
  24. 32

    The “live demo” link leads to a site that is blocked by my works Barracuda firewall. =(

    -3
  25. 33

    Not impressed. Big picture is just waste of space, especially when opening some category… acitve links? kinda not userfrendly… sorry 4 being honest. But still like resizing part :)

    -5
    • 34

      Hi Darko Škulj,
      the header image is optional. You can just remove the it with one click if you go to Appereance / Header in your admin panel :-)

      4
  26. 35

    Hi

    it’s a very nice clean WordPress Theme. But if I saw that it’s all about HTML5 and checked it via W3C validator I got 21 Errors and one 1 warning(s).

    I noticed that almost every WordPress Theme what was valid some days ago, are now invalid.

    Anyone have a answer why this happend?

    -1
    • 36

      Hi Erni,

      Yoko was also valide HTML5 code until just a few days ago. I still have to check again but I think something changed about the rel-attribute (this is the same code like in the standard WordPress theme). I will try to find out more maybe on the WordPress developer site and let you know :-)

      2
      • 37

        This would be really cool, if you could do that. Maybe they already know it and working on some fix on the standard WordPress Theme.

        0
    • 38

      Hi Erni

      You are right. This happens couse the rel attribute will accept only defined arguments/values. Some new of then in HTML5 are archives, author, bookmark, external, first, index, last, license, nofollow, noreferrer, pingback, search, sidebar, tag, up.
      You can also use alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag.
      These values was removed since HTML5 appendix, chapter, contents, copyright, glossary, index, section, start, subsection.

      So we need just to change the rel values in the Template.

      But there are also 4 real misstakes. There are 4 inline elements with closing tag /> and these is not allowed in HTML5.

      2
      • 39

        Thanks for the explanation, but if I go through the Templates and try to change the rel values, I’ve sometimes no idea which value I should choose and if I change some rel values, I’ve the fear that some things does not work. Because of some new unknown rel values.

        0
      • 40

        Hi Thorsten,

        thank your for your reply and your tips for the the theme files. I will look into the validation errors you mentioned and fix them in the next theme update :-)

        0
  27. 41

    Looks realy awesome!
    Great and cleen design!!!
    I love it.

    Only the technical html coding could be much better.
    There is too much code retundanter. I rewrite some parts already with less code.

    -1
  28. 42

    You guys are awesome.

    I love your giveaways like this!

    1
  29. 43

    Hi,

    i love your theme. But i have one question: Why is the site-title not linked with home when i have choosen the custom logo an not the h1-sitetitle?

    Thanks for reply!
    Micha

    0
    • 44

      Hi Micha,

      right now this it’s not possible for the logo image to be a link, a resizable image and not have a fixed image size all at the same time. So for now the logo image will not be a link to the homepage. I know this not ideal yet and we’ll work on a solution in a future theme update :-)

      1
  30. 45

    Until order a subject worthy of note. Very well produced with ccs3 html5. Approved.

    0
  31. 46

    i just can’t describe how thankful i m to smashing magazine

    4
  32. 47

    Awesome.. Thanks SM :)

    0
  33. 48

    Sumon @ Sumon Seleem's Blog

    June 8, 2011 2:40 am

    Looks like a great theme. Going to try this for my blog… Love the simple design and it has all latest features of WordPress :)

    0
  34. 49

    awesome..will try for our blog, Gracias!!!

    0
  35. 50

    very nice looking theme, will give it a try and use it as a framework for child theme dev.

    0
  36. 51

    Florescu Adrian

    June 8, 2011 8:59 am

    Thank you very much! I will use this theme on my blog for sure!

    1
  37. 52

    Christian Lilik Henry

    June 8, 2011 6:09 pm

    wow.. this is awesome, nice looking and clean design. Great job, thanks for sharing

    0
  38. 53

    Awesome work! Well done! Me like :)

    0
  39. 54

    Wow, looks great, and both design and function!

    0
  40. 55

    Really appreciate the time and effort put into this theme. Thanks!

    0
  41. 56

    Create theme ;-)) i like this for translate to spanish.

    Regards

    0
  42. 57

    Absolutely amazing use of media queries. Great job!

    0
  43. 58

    Great post! :)

    0
  44. 59

    Thank you so much for this theme! I updated my blog (tsukata.org) with it today, and it is wonderful! I love the flexibility, that it looks as great on my DROID X2 as it does on my 19″ laptop in Chrome.

    0
  45. 60

    Nice theme! Going to have to give this a test drive.

    2
  46. 61

    Hi. Thank you for the theme! My question: Is there a simple way to change the site title font and color?

    1
  47. 62

    Would it be possible, to have the header acting as a simple slider.

    0
  48. 63

    but if I put the icon? how do I change it

    -1
  49. 64
  50. 65

    One design multiple layouts, signs of how things will be done….Squirt Squirt…

    0
  51. 66

    Great start. Though this theme has a lot of issues on my Windows Phone 7(HTC HD7)

    0
  52. 67

    Surender Markam

    June 21, 2011 9:29 am

    awesome theme.. I’m going to use it on my next wordpress blog.

    0
  53. 68

    Thank you for this nice theme! I just wonder is it possible to add two additional modules – Tags (with Tag cloud) and Related posts? Can you advice how is it possible? Thank you in advance!

    0
  54. 69

    I love this wordpress theme! just changed over to it and have got it looking the way I want except for 1 sidebar only.

    Has this been rectified yet? I’ve checked several forums but it doesn’t appear to.

    Ellen…is this possible?

    Shauna
    Secret Secretary

    0
  55. 70

    Thanks, Ellen and Manuel! It’s a really nice, clean and fresh looking theme. I gonna use it soon

    0
  56. 71

    Shailesh Tripathi

    July 10, 2011 6:18 am

    Nice theme i’m gonna use it on my next site. I loved the layout and design of the site. Share it to each other is my current website and I am constantly conscious of it’s design factor.

    0
  57. 72

    Hi Ellen -

    How do I get a Post(with Categories, and Tags) to appear on a specific page? Right now what happens is; when I create a post it shows up on all of my pages. I don’t want that.

    Help.

    Thanks.

    0
  58. 73

    the categories widget in the sidebar does not work – clicking on any of the categories brings up ALL posts, not just those in that category. we would appreciate any advice to solve this matter. thanks.

    0
  59. 74

    So, duster / twenty eleven with a few tweaks, renamed Yoko? The custom logo function is great as is the second sidebar. But it should say somewhere that you forked twenty eleven and added some mild adjustments.

    -2
    • 75

      Why the red arrows on this comment? – it’s true. I’ve built many themes on twentyeleven and this theme is almost a direct port of twentyeleven with a tweak or two.

      0
  60. 76

    Hi Ellen, awesome work, great theme. Thanks a lot. I am trying to use it for one of my website. One thing I’m unable to get it right is the custom post type. While my other website (different theme) I was able to create custom post type. The same process I’m trying however I’m unable to lineup the posts in a page. I can view the custom post but they don’t line up in a page. Any help would be greatly appreciated.

    Thanks
    dip

    0
  61. 77

    official cheap tory burch sale

    August 24, 2011 10:31 pm

    The wide width dress sandals from Softspots are extremely popular because of the high level of comfort they offer while retaining the style element.

    -1
  62. 78

    Simple but nice and useful……
    Thank you for this nice theme!

    0
  63. 79

    Really very nice..
    And the greatest part of this is, it’s cross browser compatibility..Thx
    U can get more stuff related to HTML5 here..
    facebook.com/html5apps

    1
  64. 80

    Superb…. this is the only word that comes out…

    0
  65. 81

    Great theme and great work…

    0
  66. 82

    How can i change the display of comment posts? I want to display user name above the profile image and posting date and time below the image. Comment display should be normal like other posts.

    Is it possible by css or i have to change php

    0
  67. 83

    Awesome theme!!! ….. How can make a sticky post like in the demo? I’ve read the documentation, but I can’t find the way…… Thanks for reply

    0
  68. 84

    Is there a way when you set a featured image, to not have it show in the post too? On the home page, for each post, it has the feature image on the far left, and then the same image in the blog post – so two images are side by side and it looks funny.

    Also, is there a way to make the header image smaller? I’d like to have it be about 220 pixels instead of 350.

    This is a GREAT theme. I tried 3 or 4 others and this one turned out the best and gave me the most flexibility. I love the submenu.

    0
  69. 86

    well.great.simple but suitable

    0
  70. 87

    In FireFox (7.0.1), the rightmost page menu item (above the header image – where you have CONTACT in your demo) does not respond to the mouse hover. It responds to a click though, but hover does not activate the mouse cursor or shade the menu item. My screen is 1280 wide and FF is maximized. Incidentally, it does the same thing with your lie demo.

    0
  71. 88

    Its taking hell lot of time to load on Safari (5.1) not sure what’s the reason. Checked it in couple of machine and its the same across.

    0
  72. 89

    Hi, thankyou very much for this great theme…this is the best theme I’ve found in 3 day of search.
    Just one question: how can you put the category and sub-category like the demo under the main image in the home page?
    Thanks!

    3
  73. 90

    What a great theme! Inspires me to make some nice WordPress themes to go on my blog. We will be using this for a client’s blog.

    0
  74. 91

    LOVE the theme. Super responsive and nice and wide, just how i I need it to be! The only thing is that I want to make sure it works on IE7, and I’m happy to make some custom tweaks, but I’d love to know if anyone has tried it with IE7 so far. Merci!

    0
  75. 92

    Christopher Sullivan

    June 16, 2012 5:52 am

    Thanks for sharing.

    0
  76. 93

    Hi

    This looks very good to me but the only regret i have is about the sub menu from the category menu.
    My opinion is that a drop “down menu with hidden sub menu” option for this part would have been great. same with the mobile version, making the current submenu visible whenever you over the Main navigation item would have been great.

    But it s just my opinion.
    Anyway great theme with great fonctionality. and for free !! Thanks

    0
  77. 94

    I just love yoko!

    Thanks so much, Ellen and Manuel for such a beautiful work! This template was exactly what I was looking for and it worked much much better than my expectations! Just perfect!

    thanks, thanks, thanks!!!

    check out how it worked for my blog: http://www.mundodegato.com.br

    0
  78. 95

    The package cannot be downloaded. It comes in as a 1K zip archive with nothing in it. Tried it 3 times. Same result. Please check. Thanks.

    0

↑ Back to top