I thought I was redesigning a site responsively. I thought I was designing mobile-first, but that was all in my head. Now my site is broken in mobiles. Perhaps I shouldn’t have let my bosses pressure me so much about deadlines that I didn’t take to the time to test in mobile as I went. Perhaps I was just being sloppy or lazy. I dunno.
The big monster was a suckerfish menu. The site almost could have been rolled over to mobie with a few media queries if it hadn’t been for that. The trouble was, the menu is jQuery-based. Script tell the nested unordered list what levels to show and hide. Hell, I thought, when I roll it out to mobile, I’ll just make the top-level visible–no problem! But so much of the site is hidden in those other levels, and there is no other way to access them except from the submenus, that I am surely hamstringing my site by cutting them. What am I to do?
I thought about making an accordion script for the submenus (you know: click on the main list item, then the sub list slides out.) But that would conflict with the desktop script, right? Is it possible to assign a completely different script to a page if it is viewed in mobie?
I really don’t want to go about making new, mobile versions of each page (see first paragraph.) Is this really my only alternative?
Nobody is complaining. My boss views everything on his iPhone and he has only praise for my new design, and our mobile user base is only about 15%. Should I just take this as a lesson learned and just be sure not to be suckered into suckerfish menus from now on?
One possibility is to have the relevant submenu always visible. So let’s say that whenever you’re on a page within the ‘Products’ section, the ‘Products’ submenu is visible on screen below the main menu. That needs no scripting, and has great accessibility/usability benefits as well. Essentially it means that there is always a way to access sub-menu items without the need to use pop-up menus (whether script-based or :hover-based).
It’s why I stopped doing dropdown navigations on websites altogether, and instead use classic drill-down. You go to a section, the section has intro text for the section and links down one side… There are a lot of things people do in web “designs” (yes, making quotes in the air with my fingers) that are NOT compatible with fluid layouts, displays of certain sizes, and therein when you try to expand on those existing concepts with the so called ‘responsive’ layouts the whole thing falls apart miserably. Some of it is simply “But I can do it in photoshop” idiocy, but even more of it can be attributed to “gee ain’t it neat” nonsense like goofy animated sections, image rotators, flash content, dropdown menus, and other garbage that in general makes the page slower, less useful, and throws the very concept of accessibility in the trash.
Many times things like dropdown menus are useless to navigate, and I swear that like a lot of AJAX and DHTML content can be attributed to this rampant nonsensical paranoia of ‘pageloads are evil’ – where people will use these techniques to avoid page loads “saving bandwidth” and end up chewing twice the bandwidth in the long run.
The longer I work, the more I learn what deathshadow80 has said–the hard way. I started out as a slice-&-dice designer back in the table days. I was lucky to hook up with programmers patient enough to show me some of the errors in my ways; I haven’t been so lucky evangelizing their ideas to other designers.
I hope you understand the pressure some of us designers are in to swallow our ideals. I swear to God, the Art Director of this project wanted each page to be a separate PDF, all linked together, simply because he wanted the site to look exactly as it in print as it did in his Firefox. The President of the company added that he wanted that cool page-curl swipe like you see on iPod magazine apps. And guess who got the stinkeye and criticism for not being a “team player” when these follies were called unfeasible!?
Instead of making this a “client from hell” thread, I just want to emphasize what kind of pressure we front-end guys can be up against, and why we sometimes cut corners and do these weird things. The navigation menu was my idea, but it was a return to normalcy somewhat. I honestly thought it would not be a big deal, but I was very wrong.
But Stevie D’s suggestion is a great one–that I never even considered. I think I can style the CSS so that the submenu only shows up on the specific sub-pages. Hopefully, the jQuery that I used won’t add any inline CSS to blow things apart.
Geez man, guess it’s never easy. At the moment (not making this a client from hell thread either) I am dealing with somebody who I am trying to convince them a word document is not a website, and how it’s not ‘easy’ to code a website, and it takes far longer than a couple of days to do right.
I really don’t want to go about making new, mobile versions of each page (see first paragraph.) Is this really my only alternative?
I think so, sometimes it’s best to take a quick short-cut until you build a stronger knowledge base.
Here is something I threw together as proof of concept for managing two tiers with drop downs because I myself have been thinking of better ways to do this without using the app like approach of separate pages for each depth. This uses the mobile first approach and *should properly work on everything besides <IE7. It uses the technique here for the desktop drop downs. Again this is a proof of concept only having been tested on chrome, IE8 and ff.
You will need to view the example on a desktop and mobile device to compare. This is done so that media queries in the style sheet are avoided to support <=IE9 without repeating CSS. Though the styles inside menu_enhanced CSS could very easily be moved to menu.css to be responsive.
Sounds like a client I dumped six months ago… I was being nice and continuing to support them despite my being ‘retired’ from doing work for others for around 6 years. They hired me on for a new project under this new “project manager” who was micromanaging it so far into the grave with idiotic nonsense like what you described, that I finally blew up and screamed at him over the phone “You think you can do this better you {expletive omitted} do it, otherwise what the {expletive omitted} did you hire me for?”.
The laugh is, last month one of the owners called me up hat in hand asking for help, since their traffic had dropped 80% and it was suddenly choking out a dual Core 2 era Xeon, when I was comfortably hosting off a P4D with half the RAM… I said “Well, did you fire that new project manager?” Uhm… no, why would we?
CLICK
There isn’t enough money to make me work with people like that anymore. I’d RATHER flip burgers than put up with these people who to be frank, SHOULD BE flipping burgers. “Oh, I have a degree in media arts” – doesn’t mean you know jack about the Internet buddo. But again, I’m of the opinion that degrees in IT related fields aren’t worth a sheet of bog roll.
Unfortunately it’s hard to set clients straight, but we have to. We have to learn the art to give them the information to understand that things aren’t easy. I mostly work from home, does this mean I should work for free? Hardly!
We have to explain how hard things are, and why doing things a certain way will affect them. You have to understand you have your business structure, any other structure is counter productive to the way you run things, it’s as simple as that!
Clients defining their own business structure will be counter productive. We are not slaves, and we’re not servants, our job is one of the highest paid jobs on the planet, and we deserve some recognition.
This is what I do, I pretend to listen to the way they work, and continuously re-enforce my own business structure without being negative or mad, explaining to them that it’s not possible to do what they want. Often referring to the money involved. Money talks, and if you give a cheaper better alternative people always seam to get off their ego trips and go with you. If I still can’t convince them I let them know politely they will have an issue in the future, highlighting what they did which would be wrong, and ask them to find somebody else. So far this has happened twice.
People aren’t educated enough to know what they get for what money, and many a times people love the million-dollar website, only issue is they don’t have a million to spend. This is the main issue we mostly find.
I’ve been listening to the advice of Boag lately, and he is very practical about getting on with clients. His advice is to listen carefully to what they say, and if you have concerns, then ask them leading questions about how they will handle the negative consequences of their choices. It seems like a good way to go, meaning that they are educated and make better choices and decisions themselves, rather than being bludgeoned by the developer and not understanding why.
Think about why someone would want to visit your site on mobile. It is rarely to visit every page on the site. They want to get in, get the information, and get out. What is that information in your case? In this scenario, you would build a separate, mobile-based site. You’ll have to decide how much of the information would be ported over.
Sounds like me on the desktop! Really, any site where you can’t do this anyway is flawed. And who are we to decide what the user wants to do? I surf the web on mobile all the time, just as on the desktop.
There’s growing evidence that this is common, too:
I don’t ever start with a new client by talking design or even what they like. Instead, I speak to them specifically about their goals they want to reach with the site, I ask a number of questions to gauge their current knowledge of the right/wrong things in regards to site development. I ask if they want me to comment on their goals or about how they see their site/application. I then try my best to get them engaged in the ‘Best Practises’ for a given topic. All the time I try to demonstrate my knowledge in each area… I still don’t talk about design.
Next we move on to the content and I put a high emphasis on this. Generally the clients start asking ‘Well what’s it going to look like? Or, when are we going to talk about our ideas for design?’. At this point, I introduce the importance of content and demonstrate to them how modern search engines are rating sites and the difference between all the different platforms that will connect to their site. Most often the customer do get that the content needs to be the main focus with a directive for all information to add value to the users’ experience. They are not always successful at getting the content the first time, but we work through it until we feel it meets the information objectives of the site. It is at this point that I convince them to invest in a copy writer skilled in Web writing/editing.
Once we have all the content, we block it up on the site and arrange it into a logical number of pages and rough sections.
Now we talk about the design. It is easier at this point to defend better choices in the design as they understand how much information is on the site. Most of them want layout that looks like ‘Better Homes and Gardens’ and so you can introduce the concept of white-space, the golden-rule variants, and eye tracking results. We also discuss how this information will transfer to mobiles. If it won’t go well on the mobile, then we agree to a rule that it won’t go into the site.
Generally the graphic designers are a little uncomfortable with this way, but most of them adapt really well to the imposed boundaries of the information and the devices we need to connect to the information on the site.
By this time, customers generally call me for advise on all sorts of Web and even non-Web related issues, so in a sense the process has reinforced the idea to them that I am an technical expert that they can trust. This trust provides leverage for decision making.
This may not be possible with all customers although I am also careful who I will do work for.
The entire notion of ‘design first’ is flawed, but it’s the one most people adopt because it’s the most expedient. Expedience is not a good thing when it comes to any form of advertising campaign, and let’s be honest – for businesses that’s all a website is.
Though it sounds like you have far better success with graphics designers than I have. In my experience they fail to grasp any of the concepts, and repeatedly try to do “but I can do it in photoshop” idiocy… It’s why in the scenarios where I’ve been forced to work with them in the past I mark up the content semantically, make the layout in CSS, then send it to the ‘artists’ saying “do a paint-over, keeping in mind that everything is fluid in both direction so if your graphics can’t stretch or tile, you don’t get paid.”
But you really have a good process there for working with prospective clients – the “let’s slap out a pretty picture after talking for five minutes” approach that dominates the industry results in sites that are all flash and no substance; as I keep telling people there’s a reason you don’t see the major successes of the Internet – Google, Amazon, eBay, Facebook, Craigslist, Slashdot – using hordes of graphics designer BS. They are not a visual tour de force; neither should most websites… but you let the graphics designer in there, and next thing you know instead of a advertising investment all you have is an expense.
Which is why the majority of ‘design’ companies out there are little more than nube predation.
