Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Css Slideouts


  • Please log in to reply
11 replies to this topic

#1 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14786 posts

Posted 20 December 2016 - 10:36 AM

Someone asked me about these and I'm not sure if they exist but I like the idea...

 

Say you have an ecom site or directory site, with pages that are 3 columns. The left sidebar has all the sorting/filters, middle has the results of the searches and right sidebar has maybe a combo of ads, support pages, whatever.

 

For mobile, those 3 columns won't work in a single column display. The right one can go away, but the left one is needed to complete tasks. 

 

You know how how on some cars and music apparatus, how if you tap a button the CD is either inserted or ejected? (or you just press on the CD and it goes in).  

 

I'm thinking of how the left sidebar could perform like a drawer that slides out into view, you make your selections for sorting, close it to slide it away and the search result is in full view. 

 

There has to be something like this already out there.  Has anyone seen it or knows where I might the CSS to make one?

 

Are there any SEO concerns for something like this?  I'm thinking as long as the drawer can be slid back to the side out of view, this is ok.



#2 iamlost

iamlost

    The Wind Master

  • Site Administrators
  • 5484 posts

Posted 20 December 2016 - 11:48 AM

Sliders are all over mobile sites albeit usually packing massive javascript frameworks. Many that claim to be CSS still use JS to trigger.

To get you started with strictly CSS, zero JS:
* Pure CSS Off-screen Navigation Menu by Austin Wulf, SitePoint, July 2104.

and, of course, the exquisite offerings of Stu Nichols:
* CSS Navigation Menus, CSS Play: Doing it With Style.
Note: some of these free for personal use, mostly donation for commercial use BUT always free to play and learn to code to your own custom requirements.



#3 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14786 posts

Posted 20 December 2016 - 11:53 AM

Wow~ Exactly what I was looking for!!  Thank you so much  :infinite-banana:  :infinite-banana:  :infinite-banana:



#4 Grumpus

Grumpus

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 6612 posts

Posted 20 December 2016 - 11:53 AM

I make things like that all the time, and then all the usability experts come in and tell me not to do it. :D

 

I like them too, but the real trick is the way to indicate to the user how to activate it. The traditional way is a little tab (like the one we had on that form you couldn't figure out how to close last week). The downside is obvious... you've got something in your way (at least a little bit) to indicate that you can open it, and then because of the way the standard way of doing it works, it's often counter intuitive to close it if you aren't familiar with that kind of slide out.

 

They are EASY to do though. You can take any div and hide it and toggle it with a tab or button somewhere. The difficulty comes in on how you are going to indicate that it exists (and have the user remember it exists and what it's going to do) without gobbling up real estate.

 

G.



#5 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14786 posts

Posted 20 December 2016 - 11:58 AM

I have a proposal for a new client to write up and something like this is badly needed on a section of their site for mobile rendering. I have qualms about it passing accessibility standards and have to check on that too and of course, the UX of it, especially since part of their target market are going to be non-techie users trying to figure out how to use the site on their phones.



#6 Grumpus

Grumpus

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 6612 posts

Posted 20 December 2016 - 04:51 PM

I think a lot of the things in the usability standards listed as no-no's are perfectly acceptable to the average non-techie user simply because that's what they are used to. If you have a tab on your phone and you want to close it, you click the tab again. We call it a no-no because in our technically oriented minds, it makes no sense. To the average person, it does.

 

Here's an experiment - I don't think that screenshot you sent me last week with the tab on it has any client identifying info - and the form itself is from a standard wordpress plugin so there are certainly thousands more out there that look exactly like that...

 

Post that screenie to your facebook page and ask everyone what they would do in order to close that form. I'd wager that anyone not in our industry will get it right almost instantly, and anyone who doesn't get it is because they are overthinking it like we do.



#7 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 21 December 2016 - 03:04 AM

I've been testing this sort of thing for a while and by far the best results come from a menu system that always displays. Second best results are a hidden nav with a 'menu' button. The least preferred is a sildeout. The main reason being people often don't know how to get rid of it or it's just too complicated.

 

Google is now making a big thing out of page load speeds and mobile friendly. The more caggage you put on a site the less Google is going to like you.



#8 Grumpus

Grumpus

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 6612 posts

Posted 21 December 2016 - 08:46 AM

For menus, I like a traditional dropdown select box - assuming the menu isn't so long that it can't show on your screen.



#9 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 21 December 2016 - 08:55 AM

Which is why it was #2 in the list of preferred options.

 

Or you can reduce the number of links in the main nav, use a sticky header and make the UX a joy.

 

The problem with almost all themes is they go for the easy option: build the site with the full monty on a desktop and use the hamburger for everything else. I was looking at a site yesterday and they had huge complex mega menus. They then tried to make this work in a phone using multiple slideouts and arrows and concertinas and it was a complete mess. But if they had kept it really simple and linked the top level menu items to category pages it would have been so much easier to use.



#10 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14786 posts

Posted 21 December 2016 - 10:59 AM

I get what you're saying and agree...however, I'm facing a situation that I'm not sure how to help with regarding a very large international search directory in one area of the healthcare industry.

 

I can't show the site, so picture a left sidebar jam packed (biggest I've ever seen), with sections of sorting criteria that appear and then if you click "more", it will display even more options. On a desktop it's long and requires scrolling.  On mobile, it battles the other 2 columns.

 

The right sidebar can go away. The middle column is for the search results and it contains tabs for things like bio, desc., pics, directions, modalities...

 

Presently they do what Amazon does, which is to put a button for "Filter" under the header and users toggle back and forth, so you end up switching pages every time you need to change the search criteria. On the site I'm helping with, the filters are packed with options, so there is even a cognition issue there for users with short term memory probs or who are under stress (one of the behaviors of their target users.)  Remember, this is an international directory trying to fit into the world of mobile, for a huge user base of all ages, cultures, emotional states, etc.

 

My thought was that shelves that slide out keep the user on one page rather than forcing them to keep toggling and scrolling.  There is an increase in the use of the "back" arrow to go backwards, which is a usability no no, but users lose confidence with the toggle back and forth of pages thing.



#11 Grumpus

Grumpus

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 6612 posts

Posted 21 December 2016 - 11:55 AM

What about an accordion system above the results... http://www.w3schools..._accordions.asp



#12 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1976 posts

Posted 21 December 2016 - 12:21 PM

Accordions could work, I call them toggles: http://onepage.aerin...k/text-toggles/

 

You can make them very smart with just a few attributes: http://api.jquery.com/toggle/





RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users