Update: Surprisingly I’m getting quite a few hits on this article (which I published just 7 hours ago at the time I’m writing this update). I guess this sort of validates interest in the concept. I’ll talk it over with my partner in crime Remkus to see when we can free some time to do this thing the right way.
So, I had this idea for a menu system for responsive Genesis themes inspired by the Facebook and Google+ iOS apps.
Both the Facebook and Google+ iOS apps have a hamburger style menu. Clicking/touching the hamburger icon it slides the content to the right, revealing the menu system. Viewing Genesis on a mobile device however fills the entire view screen (on smartphones, tablets obviously have a larger screen).
Let me illustrate it with a few screenshots.
Genesis in Safari. Looks great, right?
Genesis responsive menu compared to a Hamburger menu
From left to right:
- Genesis responsive menu. The screen is filled with the header and the menu. No content.
- Hamburger style menu. The screen is filled with a hamburger icon, the header and a piece of content.
- Hamburger style menu open. The screen is filled with an easy accessible menu.
Note that this proof of concept is shown with the default Genesis 2.0 Sample Theme. I would highly recommend using less whitespace for mobile devices.
Proof of concept you say?
Yep, there’s some code here I made a quick plugin so you can test it. Please note the code isn’t perfect, the jQuery stuff works but could be optimized. If you want to chip in, please do, just fork it, improve and do a pull request. Do not use on production sites! Yet.
The code is on Github: https://github.com/daankortenbach/genesis-mobile-menu
In the main plugin file there are a few settings to experiment with:
GENESIS_MOBILE_MENU_METHOD can be set to ‘breakpoint’ or ‘device’.
- breakpoint - Set GENESIS_MOBILE_MENU_METHOD to ‘breakpoint’ of you want to activate the Hamburger menu below a certain window width. The breakpoint is set to 480px by default in the genesis_mobile_breakpoint() function. Adjust as needed.
- device – Set GENESIS_MOBILE_MENU_METHOD to ‘device’ if you want to activate the Hamburger menu for mobile devices. It uses the jQuery detect mobile browser function.
This plugin is very much a proof of concept, more of a proposal, and only tested in the Genesis 2.0 Sample Theme. No guarantees it will work on other Genesis themes out of the box. Also the menu isn’t styled as it is just an unnumbered list.
Also please note that the menu shows the secondary menu right below the primary menu. With a bit of added work a settings page could be added to dynamically choose which menu’s should be included.
So, this is it. Just a quick proof of concept. It would be awesome if this could be done purely in CSS but I doubt it. Maybe someone has a better idea, let me know!
UPDATE: The Dropbox password strength meter explained in this post is added to WordPress 3.7. You can read an article about it on WP Tavern.
Which password looks more secure to you?
If you thought the first one was more secure, think again. As is turns out the first can be cracked within 7 seconds. The latter will take centuries.
Leetspeak bad m’kay?
The thing is, we’ve gotten used to password suggestion systems. For example quite a few websites suggest to use at least one or more Capitals, a number, etc. In reality what happens is that people start to replace letters for numbers. “safepassword” becomes “5af3passW0RD”. Again, most people think of “5af3passW0RD” as a safe password. The substitution of letters with numbers is called leetspeak. It looks pretty difficult for most people but is extremely simple for computers to crack. Using leetspeak in passwords is a bad idea.
So why is a password like “myneighbourscateatsdogfood” so much more harder to crack? [Read more...]