A couple of month ago, after finishing (almost) Standfords Saas-class (https://www.coursera.org/course/saas), i decided it was time for my first webapp.
A directory for wordpress themes sounded like a small enough project to start learning everything there is to know about running a webapp. What i learned the last 2 month feels more valuable then 3 years of college. The backend runs on rails, the frontend is done with backbonejs and i'm using mongolab.com as my database-(service).
the skills that i learned so far are mostly technical, now i need to figure out how to get the word out... any pointers on how to do that are very welcome.
I thought i start here since i love how much you help fellow hackers out. any feedback on the app would be highly appretiated.
It's pretty neat, I like the ability to view a lot of themes at once juste scrolling.
One minor thing : when using the filter part, if I tick for example "business" then untick it maybe it should come back to "all" by default instead of showing a blank page?
How do you manage the color detection, do you tag it yourself? For Orange, there's one theme that should not be here : the "screen" one but as the theme is based on pictures "wallpaper" changing maybe one of them has orange in it?
This is a great first app. I assume you are looking for ideas of things to think about and work on next, otherwise I wouldn't criticize. So here are a few ideas:
- Right now you have to click directly on the checkboxes and radio buttons, which are small targets. There is an easy way to let users click on the text next to the checkbox, and a padded area around it a few pixels, which will make them much easier to use.
- You are mostly using the browser-default typography. Most web applications look better with sans-serif fonts, like the ones you see in any menu on a desktop application.
- The url is currently a bit ugly for the default case, with lots of ?blah=all. Can you figure out a way to remove those and just assume "all" as the default if it isn't in the url?
- The filter tab currently has what I would technically describe as "a big jumble of options". Everything looks the same and is the same size, as if you expect all of the options to be equally used and to have the same relationship. Can you think of a way to provide more understandable structure, by making some of the options (the more useful ones) stand out more, and others be out of the way. Or can you find some relationship between the different options that can be expressed visually?
- "Only free themes?" All, Yes, No. Are "all" and "no" the same? Perhaps you mean: All, Free, Paid?
Have fun! I know how exciting a time it is tuning your first big thing. Good luck.
I came to offer advice on your first bullet point. Definitely look into the <label> element. This will let you click on the text associated with the button. Not knocking you here (as this is your first web app!) but I am shocked by the number of large websites that do not do this properly. Drives me bonkers.
You can use it one of two ways. Wrap the text and radio/checkbox button in the <label> tag such as :
Excellent first app! I'm sure you've learned a lot about building it. That would actually really interest me, a blog post perhaps detailing all of the things that you learned while building it.
Very nice.
Here’s just a small thing I’d change:
You update the url using backbones router.navigate, right?
If you pass {replace: true} in the options object, the browser won’t create a new entry in the history as it does right now but still update the URL.
http://documentcloud.github.com/backbone/#Router-navigate
I got a question and a feedback :
1/ how do you make money ? Do you get a commission for each theme you sell
2/ It would be great if you had some info about the theme, for example, when I'm looking for a wordpress theme, I want to make sure its design is responsive. You should add some theme info to your app !
1) yes, through affiliate links. most marketplaces give you commission on sales.
2) yes better filters/ more infos is on the roadmap. getting data of ~4000 themes is not a task i want to do by hand. and the infos i get by scraping the sites is limited. but as someone said before, the user doesn't care about how its done, the user cares about how it works. so i'm going to think about that. maybe i let mechanical turks look for all that data.
but for now: there is a filter for responsive themes. its the layout-> responsive layout filter. if you select that, you will get all the themes where i definitly knew that they are responsive.
To get the word out; posting here is a good start. Post on Reddit too. Also, you could try sending a Press Release type email to relevant blogs - they might blog about your app.
Think about SEO and how your site ranks in a Google Search for instance.
If you're sending it out to other blogs, avoid the term 'press release'. It may come with bad connotations from bloggers, who could be getting plenty of random PR already.
Pick the most important theme related sites and hand craft a very concise and to the point email without it looking too generic sounding.
slightly off-topic: i'm not a big reddit user, so i dont know whats what. can you recommend a good subreddit for showing webapps. is there a show-hn-like subreddit?
The more I experience it, the more I think the "pinterest-style" layout is absolutely the best way to consume visuals. Great idea and great execution! I would definitely use this.
From the perspective of a dev who occasionally buys from Themeforest, I find a few of the pieces of default TF metadata really important: price, browser support and # of sales (in decreasing order of importance). Don't know how accessible that info is via the API, but it'd be great to access that info without many (or any) clicks.
This is a very nice first web app. Congratulations, you've done fine work.
I will offer one UI design tip. The radio button for All and check boxes for yes/no, etc under the filters tab is not how these ui elements are typically used. Checking Yes and No is all, so there is no need for the All option, just have all the check boxes checked by default and allow the user to uncheck the ones they don't want to see.
[+] [-] muellerwolfram|13 years ago|reply
A directory for wordpress themes sounded like a small enough project to start learning everything there is to know about running a webapp. What i learned the last 2 month feels more valuable then 3 years of college. The backend runs on rails, the frontend is done with backbonejs and i'm using mongolab.com as my database-(service).
the skills that i learned so far are mostly technical, now i need to figure out how to get the word out... any pointers on how to do that are very welcome.
I thought i start here since i love how much you help fellow hackers out. any feedback on the app would be highly appretiated.
[+] [-] koopajah|13 years ago|reply
How do you manage the color detection, do you tag it yourself? For Orange, there's one theme that should not be here : the "screen" one but as the theme is based on pictures "wallpaper" changing maybe one of them has orange in it?
[+] [-] ahmadss|13 years ago|reply
1 - how many hours/how much time did you spend on this, from beginning to end?
2 - what tutorial did you use for the nodejs part of this project?
3 - are you pulling in themes dynamically or through an API, or did you pre-load the themes into your database?
Great job on your first app!
[+] [-] asolove|13 years ago|reply
- Right now you have to click directly on the checkboxes and radio buttons, which are small targets. There is an easy way to let users click on the text next to the checkbox, and a padded area around it a few pixels, which will make them much easier to use.
- You are mostly using the browser-default typography. Most web applications look better with sans-serif fonts, like the ones you see in any menu on a desktop application.
- The url is currently a bit ugly for the default case, with lots of ?blah=all. Can you figure out a way to remove those and just assume "all" as the default if it isn't in the url?
- The filter tab currently has what I would technically describe as "a big jumble of options". Everything looks the same and is the same size, as if you expect all of the options to be equally used and to have the same relationship. Can you think of a way to provide more understandable structure, by making some of the options (the more useful ones) stand out more, and others be out of the way. Or can you find some relationship between the different options that can be expressed visually?
- "Only free themes?" All, Yes, No. Are "all" and "no" the same? Perhaps you mean: All, Free, Paid?
Have fun! I know how exciting a time it is tuning your first big thing. Good luck.
[+] [-] whalesalad|13 years ago|reply
You can use it one of two ways. Wrap the text and radio/checkbox button in the <label> tag such as :
Or using the for/id attributes as follows: Excellent first app! I'm sure you've learned a lot about building it. That would actually really interest me, a blog post perhaps detailing all of the things that you learned while building it.[+] [-] muellerwolfram|13 years ago|reply
[+] [-] benelsen|13 years ago|reply
[+] [-] muellerwolfram|13 years ago|reply
[+] [-] corentino|13 years ago|reply
2/ It would be great if you had some info about the theme, for example, when I'm looking for a wordpress theme, I want to make sure its design is responsive. You should add some theme info to your app !
Great job anyway ;)
[+] [-] muellerwolfram|13 years ago|reply
2) yes better filters/ more infos is on the roadmap. getting data of ~4000 themes is not a task i want to do by hand. and the infos i get by scraping the sites is limited. but as someone said before, the user doesn't care about how its done, the user cares about how it works. so i'm going to think about that. maybe i let mechanical turks look for all that data.
but for now: there is a filter for responsive themes. its the layout-> responsive layout filter. if you select that, you will get all the themes where i definitly knew that they are responsive.
[+] [-] DevAccount|13 years ago|reply
To get the word out; posting here is a good start. Post on Reddit too. Also, you could try sending a Press Release type email to relevant blogs - they might blog about your app.
Think about SEO and how your site ranks in a Google Search for instance.
[+] [-] jschuur|13 years ago|reply
Pick the most important theme related sites and hand craft a very concise and to the point email without it looking too generic sounding.
[+] [-] muellerwolfram|13 years ago|reply
[+] [-] muellerwolfram|13 years ago|reply
yeah seo is a hard one, since the app is basically just images...
[+] [-] danielna|13 years ago|reply
From the perspective of a dev who occasionally buys from Themeforest, I find a few of the pieces of default TF metadata really important: price, browser support and # of sales (in decreasing order of importance). Don't know how accessible that info is via the API, but it'd be great to access that info without many (or any) clicks.
[+] [-] chimi|13 years ago|reply
I will offer one UI design tip. The radio button for All and check boxes for yes/no, etc under the filters tab is not how these ui elements are typically used. Checking Yes and No is all, so there is no need for the All option, just have all the check boxes checked by default and allow the user to uncheck the ones they don't want to see.
[+] [-] jwblackwell|13 years ago|reply
How about adding a text search as well? I regularly search for stuff like "admin" or "app" to narrow the search.
[+] [-] blahbap|13 years ago|reply
[+] [-] bti|13 years ago|reply
[+] [-] stuffihavemade|13 years ago|reply
[+] [-] vladsanchez|13 years ago|reply
[deleted]
[+] [-] gaius|13 years ago|reply
[+] [-] jschuur|13 years ago|reply