Show HN: Hummingbird - Preview Mockups on Devices in Realtime | Hacker News Reader

Show HN: Hummingbird - Preview Mockups on Devices in Realtime

blog.vivekpanyam.com

26 pointsvpanyam13 comments

This post set off the voting ring detector, but I'm restoring it because we want to see original work on HN.

A voting ring is when people get friends to upvote their post. This is against the rules. We want stories to be on HN because they're good, not because they were promoted.

All: Please don't do this; just take your chances with HN's randomness. If a post is solid and hasn't gotten any attention yet, a couple of reposts is ok. Questions are welcome at hn@ycombinator.com.

I love the transparency. Thank you.

I really like the approach you're taking to moderation. Leading by example and providing constructive advice is definitely the way to go. Great job with everything so far.

Thanks (to both of you) for saying so!

Definitely not everything, but there's nothing wrong with a learning curve.

"Preview Mockups on Devices in Realtime" - Does this say exactly what you want it to say, because it's the very first thing I read, and I need to understand it before I read any further. What this said to me, on first impression, is a way to see final renders of a URL on different browsers and running on different devices. Only later am I thinking this connects to Photoshop actually?

Scrolling down, I don't understand the huge picture of a bird. Switch the white to transparent, the blue to white, and put it small in the top-left corner I think. But you know it looks too much like twitter, you probably will want to change it. One random suggestion to make it distinct; add a tablet with a wireframe, and the hummingbird is feeding off it.

"Hummingbird lets you preview designs and webpages from your computer on devices in realtime." Did you consider adding the word 'target' almost anywhere you say devices? Is it "designs and webpages" or "webpage designs"? Is it devices, or browsers? I guess "devices' browsers" actually.

Maybe a table with what devices you support. I think that would make it immediately clear what you were doing. You could also have a 'Preview' which shows how you used hummingbird running against your own site.

"Hummingbird works on Android and on any browser that supports websockets (Safari on iOS, IE 10 on Windows Phone, Chrome and Firefox on desktops...)." OK, now reality is starting to sink in. I'm going to need to possess each one of these devices... and have it setup and configured... It's not really HTML Preview Service.

It would be nice to mention you are releasing under MIT license on the main page. I looked for the source for Android and iOS builds, but it's not up on Github yet, so I guess at this point it's not quite fully released. But everything is brand new as of today, so no problem to wait and see when it comes.

I'd love a screen capture of the installation process, and example output. Even better, show me how this fits in your workflow and how it makes you work faster. If you can fit a compelling demo in under a minute, I would put it at the top/center.

I think it would be cool on the site to tell us if this is a hobby project, MVP, or what are YOUR goals with this? Just switch into first person and go for it :-)

I am with @zaroth in that the name + bird does not quite work. Furthermore the page above the fold image of the camera does not do it for me. I wish I could suggest a better name for the product but I am of ideas. 'Hummingbird' to me sounds too close to 'Thunderbird', which probably isn't used a lot, but is close enough to be confusing to me.

I also felt that the write up was written from the programmer point of view, not the user. It is all well and good knowing how it works, but, if something is to be useful you want to see what it does and have some setup steps - it is a different perspective on the write up.

Criticisms aside this does appear to be a reasonable product to solve some reasonable need. Anyone care to brainstorm some branding/naming ideas?

Thanks for the feedback! I'm working on a site that should make everything a lot clearer.

Here it is: http://vivekpanyam.github.io/Hummingbird/

Let me know what you think!

> What this said to me, on first impression, is a way to see final renders of a URL on different browsers and running on different devices.

Same here. By the way, I need this. I'd be particularly interested in seeing a wide range of devices in each form factor in order to illustrate the variability that exists in the ratio of CSS pixels to actual inches (for example, Kindle Fire HD 8.9 vs. Kindle Fire HDX). Also I need an option to include a variety of hands to covers a range of ethnicities but also hand sizes and ages to illustrate the (im)practicality of touch target sizes.

Here's an update: http://vivekpanyam.github.io/Hummingbird/

TL;DR: An open source, cross platform Skala Preview/ Sketch Mirror that also works with HTML

Great work!

Except find it a little ironic the page doesn't look right on my mobile browser (iphone safari) , header is all chopped off.

Might have a hard time using "Hummingbird" as a name:

http://connectivity.opentext.com/

Reply on news.ycombinator.com