10 ms·
Try right clicking GitHub's logo
Not sure if this is something new but I really think this feature is very thoughtful. Great UX. I hope every site will do the same thing.
- hornbaker 15y agoI'm going to go out on a limb here and say that delightful bit of UX was Kyle Neath's idea and execution.
- vincentchan 15y agoI think every site should implement this great UX. So thoughtful.
- Ralith 15y agoViolating the user's expectations to this degree is not delightful UX.
- famousactress 15y agoI find it kind of disarming to overload not-typically-overloaded events like this though. I wonder if it'd be possible to let the right-click menu appear as normal, but background a div that pops up and give you the option of downloading the nicer logo files?
- soult 15y agoIn Firefox you can untick "Allow scripts to Disable or replace context menus" (hidden under Preferences/Content/Enable Javasript/Advanced), which gives exactly the behaviour that you described. I assume other browsers have similar options.
- cannuk 15y agoThat should be possible if you do not cancel the event bubble when the overlay is shown. I did not have time to inspect their code, but I assume they are canceling the event.
- unfletch 15y agoYou're thinking of preventing the default action, not stopping propagation. (Event.preventDefault() vs. Event.stopPropagation() in modern browsers.) But you're right, if they handled the right-click and did not explicitly prevent the default action it would do both.
- oops 15y agoIt's not exactly what you suggested, but with HTML5 you can add to the browser's context menu: http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/ http://hacks.mozilla.org/2011/11/html5-context-menus-in-fire... http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#context-menus http://www.whatwg.org/specs/web-apps/current-work/multipage/...
- helipad 15y agoI've seen this done a few times before. Akismet is one example: http://littlebigdetails.com/post/6493183632/akismet-when-you-right-click-the-logo-it-shows http://littlebigdetails.com/post/6493183632/akismet-when-you...
- RKearney 15y agoWhy was it necessary to bundle the _MACOSX and .DS_Store files with the zip download? I rarely see zip files with thumbs.db or desktop.ini files in them.
- bonzoesc 15y agoI'm assuming they put the files in a folder, right-clicked, and hit "Compress" in Finder. Finder takes the HFS+ metadata that can't be natively stored in the zip file and turns them into the files you mentioned.
- tomschlick 15y agoMost likely they didn't notice they were included in the .zip before they uploaded it. By default those are hidden on OSX.
- zobzu 15y agoits terrible when Windows (ouh ouh EVIL MS) does stuff like that it's normal when Mac OSX does it. Lets push this further. It's ok when github hijacks your right click (makes the logo download more annoying while pretending to make things nicer). It's terrible if MS/Mozilla/Whoever isn't hype right now does it. As simple as that. Sadly.
- jjcm 15y agoPlease let this become the norm. This is fantastic.
- bradleyjg 15y agoThis is a bad idea. It was a bad idea when paranoid sites did it to try and stop people from stealing their images and it is still a bad idea when trying to be helpful. There is a wide variety of behavior accessed through right click beyond save as.
- run4yourlives 15y ago...which moving your mouse away from the logo still allows you to access. Personally, I think it's a great little addition to a website.
- cj 15y agoCool feature, but it block the "open link in new tab" menu option.
- imperialWicket 15y agoWhile I agree that designating what a user can accomplish on your page is making UX sacrifices, this is handy: Ctrl (Cmd) + Left click = open link in new tab
- ttt_ 15y agoSo we then have to learn the shortcuts for all of a browsers right-click menu options? Not to mention the fact that a lot of add-ons add functionality to that menu.
- cousin_it 15y agoBut how long before someone figures out a way to override ctrl+clicks and middle-clicks with a lightbox as well?
- deleted 15y ago[deleted]
- 10098 15y agoClicking with the mouse wheel usually does that
- guelo 15y agoThe actual logo that is being displayed looks like it is suffering from being shrunk down too much from a bigger image.
- bonzoesc 15y agoIt is. In a presentation at Superconf, one of the Github designers (whose name escapes me) said that they serve some images at high resolution and resize in the HTML tags for the benefit of iPhones 4 and other high-dpi devices.
- tlrobinson 15y agoCan't this be handled with multiple stylesheets?
- sirn 15y agoYou can even handle it with a single stylesheet, i.e. with `min-device-pixel-ratio`.
- bkbleikamp 15y agoWe do it so that when people zoom in on the site (using `⌘ + +` on a Mac) the image doesn't become pixelated and ugly. We do it with most other images, too.
- Genmutant 15y agoWell this way it's pixelated and ugly by default. I don't think that's better.
- bkbleikamp 15y agoWhat browser/OS are you in? It looks pretty reasonable in Chrome on OSX; we spent a decent amount of time trying to get it as close as we could. Some browsers do weird math on resizing.
- sathishmanohar 15y agoNo, I'm not looking for Github Logo. I'm looking to open dashboard in a new tab. ok thanks.
- imperialWicket 15y agoCtrl + Left Click (or Command + Left Click) works in just about every browser.
- theon144 15y agoOr middle click.
- Foy 15y agoI couldn't help but notice the actual logo wasn't one of the download options. Although inspecting the element tells us that the original logo is at https://a248.e.akamai.net/assets.github.com/images/modules/header/logov7@4x-hover.png https://a248.e.akamai.net/assets.github.com/images/modules/h... I'm not entirely sure what Github was trying to accomplish with this, other than being a neat trick. EDIT: https://a248.e.akamai.net/assets.github.com/images/modules/header/logov7@4x.png https://a248.e.akamai.net/assets.github.com/images/modules/h... for the non-hover logo. ;)
- bkbleikamp 15y agoThat's not the actual logo. It's a variation that is only used in the header. The official logo includes the Social Coding tagline.
- OzzyB 15y agoI know that overriding expected functionality like this is considered a "no-no", but let's not loose sight of the fact that this "UX trick" was used on a logo, on the masthead, on the site's header. What do you really want if you right-click on a logo like this? If you did indeed want to right-click & save-as to get the image, this feature takes that a step further and actually offers you a selection of high-res images to choose from -- it's adding not subtracting. Its not like this trick is used unabated and disables functionality completely, like those "don't steal my image bro!" javascripts... IMO this could even be expanded further, i.e. Link to company's about/contact pages, mission statement etc. The logo acts as a gateway to the company -- I like it.
- sliverstorm 15y agoJust don't do it everywhere. Use it in moderation, PLEASE.
- johtso 15y agoThis has actually got in the way of expected functionality for me. I've often right clicked on the logo to try and open the github homepage in a new tab.
- majorlazer 15y agoI know that in some cases it is not an option, but middle-clicking will open the link in a new tab. One of the best shortcuts I ever learned.
- DarkShikari 15y agoMy laptop doesn't have a middle mouse button, and it's a modern Dell. Naturally I use a real mouse when I'm on a desk, but remember that not everyone has a middle mouse button.
- mmmm 15y agoTry clicking both right and left touchpad-button on your laptop. At most (all?) laptops it will open the link just as if you had middle-mouse-clicked it.
- jawns 15y agoHere's how I would improve this: The lightbox that opens up asks, "Looking for the GitHub logo?" But it doesn't let you answer no. It just presumes that your answer is yes, and supplies you with what it thinks you actually want (or, more cynically, what it wants you to want). I would suggest adding a "No thanks -- just let me right-click" link at the bottom. That link would close the lightbox and prevent it from reopening for the rest of the session, which would be in contrast to its current behavior, where the lightbox pops up no matter how many times you right-click.
- EricR23 15y agoI like this idea. Sounds like a "nicer" interaction.
- illamint 15y agoI think this is a fantastic way to handle it. I feel like it should probably be a user-configurable setting, too. There are a surprising number of comments in this thread from people whose process has been interrupted, and I think it's a cop-out to just tell them to ctrl-click to open a new tab. Don't get in the user's way.
- javery 15y agoYou must be a program manager - you have taken a simple and easy solution and added a ton of complexity for a problem 1% or less of people will encounter.
- pclark 15y agothey really should save this kind of preference to their database so that it follows the user across other sessions and machines too. and then add a setting in their account preferences to opt back in to the right hand click lightbox.
- webjunkie 15y agoMaybe it's also useful to sync this settings to the Mac App and possibly other apps... an email every time it gets changed would also be useful, in case someone with your login decides to change it. And finally, in teams one should be able to control which member can change this setting for himself, and which not, and the team lead can also set a default what should happen on the right click.. Yeah, that's it.
- falcolas 15y agoNote - requires you to load javascript from akamai.net. Didn't notice a thing different until I enabled that through noscript.
- ak217 15y agoBehold, the Octodex: http://octodex.github.com/ http://octodex.github.com/
- OzzyB 15y agoThat's awesome, they should definitely have a link to this page on their pop-up :)
- gravitronic 15y agoI ran into this the other day when I was attempting to right-click & "open as new tab" and got so confused.
- zacwitte 15y agosmart
- baby 15y ago$(".site-logo").on("contextmenu",function(){ return $.facebox({div:"#logo-popup"},"logo-popup clearfix"),!1}) TIL about ContextMenu[1] and Facebox[2] in Jquery [1] http://archive.plugins.jquery.com/project/jqueryContextMenu http://archive.plugins.jquery.com/project/jqueryContextMenu [2] http://defunkt.io/facebox/ http://defunkt.io/facebox/
- JoshTriplett 15y agoIn Firefox, open Preferences -> Content, hit the "Advanced" button next to "Enable Javascript", and uncheck "disable or replace context menus". With that unchecked, you get the right-click menu as usual, in addition to whatever the site wants to offer.
- rhizome 15y agoPOLA violation.
- idan 15y agoSaw this on Flask (http://flask.pocoo.org/ http://flask.pocoo.org/) a while back. I don't remember where Armin got inspiration from, but I remember he showed me another site that did this before his. Sidestepping the UX discussion here, there's an important moral here for startups: Have a logo page with print-suitable copies of your logo. Actually, do one better and have the following logos: 1. Vector, raster (large), raster (small) in color 2. Vector, raster (large), raster (small) in monochrome Anytime somebody wants to write about you, anytime you're sponsoring a conference, anytime you need stuff printed—that page will serve you well and let your t-shirt suppliers/conference organizers/curious journalists the thing they need without having to bug you. Until you get really big, misuse of your logo is unlikely. Just make it easy for people to get, like everything else about your company. At Skills (http://skillsapp.com http://skillsapp.com) we have a direct link in every page's footer and another on our about page.
- suyash 15y ago// Listen to Right Click events on your logo image $('img').bind('contextmenu', function(e){ // Your code/interaction goes here });
- callmeed 15y agoI think this is awesome. I'm in an industry where our customers (pro photographers) are at paranoia level: tin-foil-hat with regards to people stealing their images. Regardless of how much I try to educate people, many will always want right-click disabled. I think this is a great compromise. If you could offer them a low-res or watermarked version, that would be something people would pay for.
- invalidka 15y agojust click shift+/ and be done with it.
- human_error 15y agoMaybe I just want to right-click and open the homepage in new tab. With this feature, I can't do this.
- thristian 15y agoA long time ago, when I first installed Firefox, I went Preferences → Content → Enable JavaScript → Advanced and unticked all the "Allow scripts to:" options, including "Disable or replace context menus". I still get the cute dialog-box when I right-click, but I also get my proper right-click menu for the link in question.
- atesti 15y agoHow can I disable that a webpage can hijack right click in Chrome like it's possible in Firefox?
- bricestacey 15y agoWasn't the logo not even a link a couple of days ago? All this whining is ridiculous.
- jumpinoverboard 15y agoThis is pretty neat. A nice way to share the logo with the world.
- insraq 15y agoI thought Akismet was the first to adopt such design: http://akismet.com/ http://akismet.com/
- michaelmartin 15y agoI think this is a cool way to do it. It's a very nice effect and ensures people are using good quality versions of their logo. Akismet (The anti-spam tool) does something similar with theirs: http://akismet.com/ http://akismet.com/
- tonetheman 15y agohahaha i cant see anything... what happens exactly?