Editing Media Queries

Okay so this may not be new but it’s new to me. I usually edit media queries by *right click > Inspect Element*, and resizing the browser screen it’s self, and then making the changes in the back end of cPanel. However, I discovered a new tool inside Inspect Element.

*Right Click and select Inspect Element* But this time navigate to the top left of the Inspector’s window and click the mobile phone icon!

Voila!

Screen Shot 2015-07-12 at 11.44.50 AM

 

You can select specific viewport sizes or enter in custom ones.  It will show you what is overflowing and now realigning.

So neat!

If you didn’t already know, welcome, if you did, let me know if you have found any other cool things for editing media queries!

 

Create a Responsive WordPress Menu

Today I’d like to talk about creating a JavaScript-free, responsive WordPress menu! A lot of responsive WordPress menus out there use jQuery and other programming languages in order to achieve the adaptive effect. One of my favorite solutions for mobile menus is to use a php-based template tag that imports a menu and then reads it into a select menu.

But recently I had an idea for an expanding menu that used existing WordPress structures and simply added a class with CSS.

So the first step in creating this menu was to add an item to my actual WordPress navigation menu. I did this using WordPress’s menu interface, like so:

menu

I created the menu option “expand menu” using the custom link menu option, and have it set to link to a blank pound sign (#/Octothorpe/Hashtag) so that the link doesn’t go anywhere – which is a pretty important step. You don’t want people clicking on your expand option and being taken to a page somewhere – then they’d never be able to navigate the site!

I stylized it with some down arrows (made with ↓ for simplicity’s sake) so that people would not be confused as to the clear purpose of this menu item. Then I added a special class to the item – in the case the class was called responsive – so that I could handle the element individually in my CSS.

menu-expanded

Now we have to handle the .responsive class element! The first thing we want to do is hide it from people who aren’t on mobile phones, so in our CSS we’ll just set it to display: none; like this:

Easy enough. Now I’m just going to include one (completely not sufficient) media query here so you can get the general idea of how this works. But now you want the menu item to display on mobile phones, so you create yourself a media query for that screen size and then re-style your menu to fit:

I set the display to block so that the element will now be visible, then set the height of the menu to 50 pixels, the size of one menu item. The next thing to do was hide the overflow so that the other menu items wouldn’t be visible.

Now the magic part is making the menu display when our blank anchor is clicked. We do that with this little bit of code here:

What we’ve done is set the main element, whenever it or its child is hovered or clicked, to have a new height of “auto” – that is, to have a natural height compared to and containing the child elements. So now when our empty nav item ‘expand menu’ is clicked, the menu will expand to show the entire menu!

If you want to see it in action, browse to Remy Sheppard dot Com on your mobile phone, or resize your browser!

What YOU need from US

Now lets talk about the miscommunication from the designer to the client.  Designers need to understand that this industry is not common knowledge, a lot of times we “geek out” and talk about our passion and we lose you!  Clients need to feel comfortable with communicating with us and not dread a phone call or email because for them it may be another paragraph or conversation where every word flies over their head.
So designers, pay attention and keep these things in mind:

  •  Assume clients haven’t gone to school for what you have.
  • Also assume they are busy and don’t have time for elaborate explanations or questions.
  • It would help if you could make your explanation as simple as you can make it.
  • Don’t forget to ask the client if they understand or have any questions, sometimes they need you to start the conversation.
  • Try to stick to three options, about anything, if you give the client too many options they will most likely feel overwhelmed.
  • If you have no option but to give them a whole list of things to choose from then use a bulleted list.  Keep it simple too. 
  • Don’t get frustrated, keep your cool, find another way to ask a question or explain something if your client isn’t understanding. 

As I said in the last post about what designers need from clients, don’t be afraid to tell us you don’t like something.  We work better from direct criticism than beating around the bush, just be sure to be specific about what you don’t like.  Nothing is father from progress than us hearing “I just don’t like it.”

I hope the designers out there remember to keep their cool and dumb it down, and the clients out there remember to be specific and honest.

Happy creating!

What WE need from YOU

There’s always some miscommunication between people, how can there not be? With so many interactions throughout our day here’s one form of miscommunication that I am bringing to everyone’s attention.. the often missed mark with discussions from client >to> designer. “We” as in designers and “you” are the client. This post will talk about what we’d like from you, and don’t worry, a few days after this will be another post about what clients (you) need from designers (us).

Assume we’ve had our first meeting and you’ve paid us a down payment for the project you wish for us to complete. Now, we are trying to communicate back and forth about different small details (fonts, colors, spacing, first rough drafts, etc). You get the picture?

These types of responses are hard for designers to decipher:

  • “I’d like to see it pop more”
  • “Not enough color”
  • “I want it to not be cutesy”
  • “That’s too much pop”
  • “Make it brighter”

And so on and so forth. We really appreciate you trying to connect with us on a design standpoint but I wouldn’t know what to do with those responses truthfully.

However, here are some ways to help us get into your head and understand what you mean.

Send examples:

  • Pictures from a Google search
  • Pinterest board
  • Photos that you’ve taken
  • Websites you admire (be specific though: do you like the layout of information? the colors? Try not to say “I like the feel of it”)
  • Color palettes

Examples are the best way to convey what you would like us to change. Especially try to be as specific as you can, “Here’s a picture that I like, could you use the colors from it.”

We know that it is our job to do the designing but it helps when the client is very specific. Don’t worry about hurting our feelings, we want you to be happy with your product, if you don’t like something about the design state it up front and don’t say something like“that’s too much flare.” The quicker we can connect with our communication about your project, the quicker we can get it done for you.

Watch for the next post “What you need from us…

You’ve been using WordPress wrong

Imagine you’re trying to build a puzzle but you can’t seem to find the piece that you need to put right in the middle isn’t sitting right in front of you. Instead of looking for the piece (it must have come with the puzzle), you decide instead to break out a big set of watercolors, grab a piece of cardboard and some scissors and set about making the piece to the puzzle yourself.

Why on earth would you do that?

More than likely the piece you’re looking for already came with the puzzle and you’re wasting a massive amount of time and energy trying to recreate it yourself. I mean, you may get your recreation perfect – maybe you’re some kind of painter like that kid from the first Jurassic Park movie – but you’re still going the long way around.

I know what you’re thinking right now: Plugins! No. While I do like the fact that WordPress has a mind-blowing amount of plugins to help you do anything you could ever want or need, people become much to dependent on them, often activating a plugin for a feature that comes packaged in WordPress. I once had a client who had a plugin installed to allow him to put external links in his menus – an option that WordPress already has!

So let’s say that you need some extra functionality and you want to include some jQuery and custom javascripting. A lot of designers (and I was guilty of this myself for a long time) will open up their ‘header.php’ file and include jQuery there.

The problem with this is that a) it causes coding conflicts, and; b) WordPress comes packaged with the latest version of jQuery – and it’s usually already loaded by default! No need to include it again!

If jQuery isn’t loading on your page, then you can change that through the functions.php file. The Functions file should be your life as a WordPress developer – almost everything you need done can be done through that singular file thanks to WordPress’s “actions & hooks” api.

For example, if you want activate both jQuery and MooTools, and a custom script, you would do it like this:

To add extra stylesheets to your theme, or to add something like Font Awesome, you would add this to the above code:

That is all you have to do to add any css-type code into your WordPress theme. WordPress has all of these things built in to it, and so much more, that – once you understand it – makes life a lot easier.

For example, lets say that you have something like our home page – with different sections, and each section has its own class and content. So how did we do that? Well we created our own CSS classes in our theme to use in those sections – .white, .black – and then we included them on the page through the use of custom WordPress shortcodes.

We could have achieved this by simply using <div> elements through the html-based editor – but what if we have a client who needs to use similar functionality on their site and they don’t have any html experience? Shortcodes are a much better option. And they’re easy to make! Here is how we made our shortcodes:

One day I’ll write up a tutorial on creating your own WordPress shortcodes, but for now check out the WordPress shortcode Codex for information on how to create your own shortcodes.

A few things to remember

There are a few things I wanted to get across with this post that can be summed up in a few points to remember when you’re developing on the WordPress platform:

  1. You never have to edit WordPress core file – if you find that you need to edit a WordPress core file to enable some kind of functionality, you’re doing it wrong, I promise.
  2. You don’t always need plugins! 90% of what you want to do can be accomplished by hooking into WordPress’s default actions.
  3. Functions.php is your friend! Any functionality you want to add to your website will be added through your theme’s functions file.

WordPress is like a giant box of legos. If you find yourself in need of a blue lego, don’t go and paint a white one, just dig through the box a bit – its in there, trust me!

Custom WordPress Searching

We had been commissioned by a client to create a custom searching function on their WordPress blog that would check through their posts/product inventory based on what was filled out by the end user in a drop down selection. The tricky part was the drop down boxes had to search through some custom post meta fields – four of them, to be exact – that we added to WordPress to give product specification.

We had to build a custom WordPress search that searched WordPress meta keys and custom meta boxes.

At first we tried modifying the search function itself, which worked to a degree but was extremely slow and didn’t provide the accuracy we had hoped for. Then it dawned on me that I could use wp_query(); to make my own version of search within The Loop.

So the first thing we had to do was create a custom function to grab the meta box information and display it in a drop down selection:

Let’s break this down!

The First thing we did is declare a function to do the heavy lifting for us. In this case we called it product_selector(); and this function accepts two variables (more on that in a bit). Basic php so far. Then we have to grab the global database variable with global $wpdb; so that we have access to database info. The next bit is straight out of the codex for grabbing meta keys.

We jump into the database and grab the meta value column ( SELECT meta_value ) from our specific meta key ( WHERE meta_key = %s ) – that %s being one of our function variables: $var.

All of that information gets read into an array at $a. Then we simply pretty up that array a bit, removing duplicates, removing null values, and putting them in order:

Easy enough. Next we create a foreach(); loop to print out our dropdown box using the accepted variables and newly cleaned array values:

This is all easy enough. Basic programming. In fact, by the end of this you’ll realize that every step of this is pretty basic stuff.

So now that we have our drop down boxes function we can call specific meta values by declaring our function within the template page: <?php product_selector('meta_box','Fancy Meta Info'); ?>

In the next step we build it out into a search function on our page. Now the beginning of this is a lot of repetitive code that I’m certain anyone could figure out, so I’ll write it up in pseudo code for you to work out on your own:

Now here’s the fun part: We’re going to check the submitted variables to see how many, if any, of the fields were filled out and then read that into an array for our wp_query(); to process:

Once you’ve checked to see if the field is empty, you then read the information into an array variable. You can put that variable then in your new wp_query();. Note: You can rinse and repeat this step as many times as needed.

From there you simply run your loop to display the posts that match the criteria set in your meta boxes. The Loop at WP_Query() work a lot faster than the built in WordPress search function for things like this, and this method is expandable to fit any need you may have for searching through your database and displaying relevant information to your users.

I wrote up this short (not too awesome) tutorial to show you how I accomplished a parametric drop-down search in WordPress so that users can search through posts based on custom meta boxes. I searched online for quite a while and couldn’t come up with anyone who had done this yet. Plenty of people tried similar things, but no one actually did specifically this, so I came up with the most elegant solution I could, borrowing from this and that. With the help of Google and a lot of coffee, I managed to get the exact functionality I was looking for.

Share this post if it helped you out any!

UPDATE: In reading over this after writing it I realize that using GET to pass information to the database is stupid. The code has been modified on the client site to pass the information through POST instead.

Good business requires strong ethics

[su_quote cite=”Henry Ford” url=”http://www.brainyquote.com/quotes/quotes/h/henryford122318.html#qiuQqyrxpKKK2TXF.99″ class=”post-quote”]It is not the employer who pays the wages. Employers only handle the money. It is the customer who pays the wages.[/su_quote]

It has always been the practice in business to attempt to make as much money in the margin as you possibly can. To make as much money off of each individual client as humanly possible. I don’t think that is a valid way to run your business. When you run your business that way, you are doing everything backwards because your focus is money.

You provide a product of decent quality because people expect a certain threshold of quality when they pay a certain amount of money for an item. The problem  is that when money is your focus and quality isn’t, you provide the bare minimum quality you can skate by with for the money you’re charging.

I find the idea of making something to the bare minimum quality simply because you’re charging a premium to be morally outrageous. If you can create or craft something at a certain quality level, than to do anything less than that level of quality is to intentionally not do your best because you aren’t being paid enough. It smacks of hubris and is generally very poor business.

In the end you as a business person suffer because you turn away business that can’t afford you – you are so special, after all – and your customers suffer because their inability to scrounge up your “protection money” ends up causing them to get a less than satisfactory product.

[su_quote cite=”Henry Ford” url=”http://www.brainyquote.com/quotes/quotes/h/henryford106096.html#36SKQM1kBFC2VxKI.99″ class=”post-quote”]Quality means doing it right when no one is looking.[/su_quote]

Then there is service. It’s so easy to do a Google search on a business and see just how they treat their customers. Sure, online reviews need to be taken with a grain of salt. After all, it is much easier to get online and leave a bad review because you’re upset than it is to take the time and leave a good review when things went well.

But still, online reviews can be an accurate measure of a company. If they have no good reviews at all, probably a safe bet that something is wrong with their business model. Nine times out of 10, the problem people have with a business is customer service. For example: If I were to leave a review of a Ruby Tuesday I ate dinner at, my review will have little to do with my food – I know what I want, I know what to expect – it will most likely reflect my interaction with my waitress.

When you run your company for profit, to make as much money in the margin as possible – that is to say, as much money per customer – then customer service becomes an obligatory necessity, much like your minimum standard of quality. You don’t provide customer service because you truly love your customers. You don’t provide it because it is what a good business does: Stand behind its product to the end.

No, you provide service because you haaaave to.

Like a whiney child who cleans his room even though he doesn’t want to, most businesses these days begrudgingly provide a minimum level of customer “service” because they are forced too, lest they lose their precious bottom line.

Henry_ford_q

True business should be run the other way ’round. If a business really wants to achieve success they will focus on their customer first. Providing good customer service is the number one aim of any business. Because without your customer, you have no business. Forget money, forget time and energy being put into helping your customer, don’t think about bottom lines – if you are helping a customer you are servicing your bottom line. If you are helping a customer to the best of your ability, you cannot lose money, you can only gain it.

A true business understands that the only morally acceptable position on production is quality. High quality. The highest quality that can possibly be delivered to your customer. Focus on creating the best product on the market and you will find that you have absolutely no money worries at all. People want a high quality product. They want to be treated with decency. If you can fulfill these things in your business, you’ll find yourself very successful.

This is the approach we take to website design here at Big Wolf. We don’t charge thousands of dollars and we never will as long as I’m alive and a part of this company. To do so, to charge thousands simply to make money on the margin, is morally reprehensible.

Our goal will always be high quality, low price, incredible service. If you’re a business owner, I encourage you to follow my lead and give your customer the best service and quality humanly possible. Start focusing your business on your consumer, not your salary. Focus on the customer, not the profit, and you’ll find that the rest will work itself out.

photo credit: Refracted Moments™ via photopin cc