Design Blog 5.24.13-outlined-01
BY Zach Hink

Responsi(ve/ble) Design

There’s no shortage of discussion about responsive web design right now, and in an industry that changes every day, how do you ever keep up on this ever-evolving internet eco-system? Do you keep up on every new browser vendor possibility and prefix? Or dumb your website down so far as to be a 90’s era site that is completely flexible – but also looks completely “un-designed?” As with most things, I think the answer lies somewhere in the middle. As designers and developers, we should be aware of new and upcoming technologies, while at the same time actively strip out some of the “pop” and excess that may not have been needed in the first place.

The hot topic of flat design vs. skeumorphism is a relevant discussion that ties into where responsive design is at. I think that, at its core, this argument is all about what design should be and how to make purposeful decisions that communicate a specific message

Skeumorphic designs tend to have all this “jazzed up” stuff, which clients usually love, but often becomes excessive noise that detracts from the real message trying to be communicated. For example, instead of displaying a simple Help icon, we would rather show how great we are at realistically rendering a person in a call center with voice headset on, crammed into a 3D beveled, rounded square. There will be certain cases where this is a good design choice, but more often than not, we’re just adding another layer of noise.

I see the current shift from skeumorphic to “flat” design as more of a maturing process rather than a revolt to the former one. Smartphones and tablets put interaction at people’s fingertips-literally. Initially, it may have been necessary to guide people into pressing buttons as you would on an elevator, but users have adapted. They don’t need a reflection, shadow and texture to highlight points of interaction. That being said, I believe it ties back to responsive design in that we need to remember to communicate the right message no matter the point of delivery. Maybe the graphic-heavy, weighty home pages designed for the huge widescreen displays have become as unnecessary as excessive skeumorphism. Ask yourself: does every homepage need a full-width hero image carousel with five different selling points? Maybe not. A common problem with the huge, above the fold, hero image is that when it’s scaled down to a mobile device it gets really hard to see what neat features you have, or read any type that scales down with it.

Design Blog 5.24.13-outlined-02

If we really are on the cusp of mobile browsing being the main form of browsing, it may be time we give mobile viewports equal (or even more) importance than the traditional desktop. Perhaps before we figure out all of our work arounds, floats, snap points and flexible grids we can start by asking and answering these simple questions: What is the most important message we need communicate and how do we do that on as many devices as possible?

There are already hundreds of different browsing devices out there and more are released every day. With so many different devices available, the idea of pixel perfect design may start to seem archaic and, potentially, a hinderance to someone using a small screen. If I have to pinch and zoom in on your beautiful design to find your distressed, rasterized address, only to discover that the text looks terrible and can’t be copied, my experience has become a failure.

It’s not only screen sizes we need to keep in mind, but screen resolution as well. I think it’s safe to say from this point forward the days of 72 dpi are numbered. Thinking scalable, flexible graphics is a must. We can’t just expect to throw extra pixels at every situation; we need to consider how we implement, svgs, icon fonts, canvas objects, etc.; ideas and concepts that will scale with resolution on any device that might be in our user’s hands. And it’s only going to get more complicated as companies continue to increase their screen’s resolutions as quickly as possible, which will soon leave our X2 retina graphics in the dust. We need to make use of the scalable graphics that uphold their visual integrity in any resolution while keeping file sizes down for those viewing them over slow cell phone networks.

In writing this, I want to pose that question to myself and to all of us creating in this Wild West of the internet: Are we designing to make our great design fit, or are we being responsible to the message we’re communicating? In the very least I hope to help challenge some of us to re-assess how we approach designing in this digital age.

*Thanks to Eric Jorgensen for the conversations and edits.
menu_items
BY Justin Rhodes

Cleaning Up WordPress Admin Menus

As a WordPress developer, I often find myself tasked with building very specific WP themes. So specific in fact, that I end up leaving out a lot of the default functionality. The problem is, I want the client to have a seamless experience while dealing with the back-end of their site. I don’t want them wondering what the Comments tab does, or why the Posts tab brings them to an empty list, because maybe their site didn’t require those options.

So, what to do? Well, hide them. Hiding unused menu tabs is a quick and easy way to de-clutter the back-end of your WordPress site. WordPress 3.1.0 introduced two new ways of doing this: remove_menu_page and remove_submenu_page.

The example below shows how you would remove the Comments menu item, by pasting this code in your functions.php file:

	add_action( 'admin_menu', 'my_remove_menu_pages' );
	function my_remove_menu_pages() {
		// the parameter is the slug of the menu item to be removed
		remove_menu_page(‘edit-comments.php’);
        }

But what if you want to remove more than just the comments? That the easy part, just call remove_menu_page() again, inside the function, passing the menu item’s slug as the main parameter.

That works great for top-level menu items, but what if we want to remove sub-menu items? That’s where remove_submenu_page() comes in. The example below shows how you would remove the Editor sub-menu item, by pasting this code in your functions.php file:

add_action( 'admin_menu', 'my_remove_sub_menu_pages' );
	function my_ remove_sub _menu_pages() {
		// the first parameter is the slug of the top menu item to be removed
		// the second parameter is the slug of the sub-menu item
		remove_submenu_page( 'themes.php', 'theme-editor.php' );
        }

Again, you can call this as many times as you’d like, to remove even more sub-menu items.

Sign Up

Sign Up for our newsletter here. We’ll send you cool WordPress tips, tricks, and news. No spam, we promise.

  • This field is for validation purposes and should be left unchanged.