Log in   Register a New Account

Accessify Forum - Independent Accessibility Discussion Since 2003; Professional, Moderated, Web-based, Archived

New to the forum?

Only an email address is required.

Register Here

Already registered? Log In

Currently Online

No registered users are online.

What type of menu is suitable for a mobile website

Reply with quote What the best way to show a website menu on a mobile version of a website. I like to use a drop down as I find it easy to use. Is it ok to do it like this, is this bad or good for accessibility? What are other people ideas?

School Web Design
Reply with quote Might be worth checking out http://www.w3.org/Mobile for info on best practices? Touch screen devices will have a problem if you’re relying on Hover states for your drop down menu.

James Coltham – NHS web content manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
Reply with quote sorry my mistake I meant select menu

<select>
<option>Home</option>
<option>Other Page</option>
</select>

School Web Design
Reply with quote Modern smartphones don’t need a separate mobile version – finally! Only the most ancient mobile phones (like I have) and cheap phones in the developing world benefit from it.

In my experience, many bad phones are too stupid to load the media=”handheld” instead of the media=”screen” stylesheet. So they try and laying out out the full website on their tiny screen.

Others of them don’t load CSS at all and will degrade somewhat gracefully if your pages are well-structured with semantic HTML. Navigation bars become bulleted lists of links which is a bit sad. If 80% of your mobile audience are using totally ‘dumb phones’ then I’d suggest going way old school. Inline links separated by vertical bars for your navigation menu with no CSS at all.

Drop-down lists (that is the correct GUI term, at least in Windows parlance) are indeed a compact way to provide navigation on tiny screens. But these controls are often painful to interact with, in my experience. Remember, you can’t use a mouse on a dumb phone and the list often won’t fit on the screen once opened!

Dumb phones are pretty much extinct by now. I wouldn’t worry about them unless there’s proof of your website audience wanting to access your website using them.
Reply with quote Have a look at some of the really good responsive designs out there – http://bostonglobe.com/ is a good example where the nav is reveal upon clicking/tapping “Sections”. This works well for sites with large navs, otherwise keep it simple and ensure the menu doesn’t take up too much real estate.

My advice is to start building responsive designs and see how they look in your device. I personally find it really interestings, it’s like learning to design/build all over again as you realise with a different platform there are many other considerations to be had that during a normal website build (for desktop users only) you wouldn’t think of.

Good gallery of responsive designs mediaqueri.es

@itsdazzler
Reply with quote From an accessibility point of view if you’re targeting mobile devices with media queries I’ve seen this quite often:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />
. Don’t do it that way as you stop users zooming in which will affect, well me for starters as my eyesight has gone downhill and I pinch to zoom quite often.

Design, development and marketing for the web.
Edge Three Sixty Ltd: Web Design Liverpool
Reply with quote The Navigation is one of the very tricky part of responsive web design in order to ensure accessability.

You can create navigation for responsive web site through number of ways and even some jQuery plugins are also available.

HTML
Add the meta viewport inside the head tag. meta viewport tag required to scale properly inside any screen size especially for mobile.
Quote:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

Then add snippet as the navigation markup inside the body tag:-
Quote:
<nav class=”clearfix”>
<ul class=”clearfix”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Web Design</a></li>
<li><a href=”#”>Website Redesign</a></li>
<li><a href=”#”>SEO</a></li>
<li><a href=”#”>Internet Marketing</a></li>
<li><a href=”#”>eCommrce Website Design</a></li>
</ul>
<a href=”#” id=”pull”>Menu</a>
</nav>


Creating Style
For coloring:
Quote:
body {
background-color: #ece8e5;
}


nav tag that defines navigation will have 100% full width of the browser

Quote:
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: ‘PT Sans’, Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}

Then, we will float the menu links to the left, so they will be displayed horizontally side by side
Quote:
nav li {
display: inline;
float: left;
}


Add the following style rules in the style sheet

Quote:
.clearfix:before,
.clearfix:after {
content: ” “;
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}


For separating menu 1px use following code
Quote:
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}

For brightening color and when it is in :hover or :active state-
Quote:
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}


For making extra link hidden
Quote:
nav a:hover, nav a:active {
background-color: #8c99a4;
}


Quote:
nav a#pull {
display: none;
}



Hope it will help
Reply with quote Thanks, CBIL360. This is a helpful information. I’m still new and learning about making websites mobile-friendly and this is just the right start.
Reply with quote
CBIL360 wrote:
HTML
Add the meta viewport inside the head tag. meta viewport tag required to scale properly inside any screen size especially for mobile.
Quote:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

Then add snippet as the navigation markup inside the body tag:


No. Just said in post above, don’t use maximum-scale=1 as it stops people zooming which would affect a lot of people whose eyesight isn’t 20/20.

Design, development and marketing for the web.
Edge Three Sixty Ltd: Web Design Liverpool
Reply with quote I got what I’m looking for at this forum. Thanks too for Cbil360 for your answered. It works. Thanks

Last edited by torontolast on 03 May 2013 06:22 am; edited 2 times in total
Reply with quote
torontolast wrote:
I got what I’m looking for at this forum. Thanks too for Cbil360 for your answered. It works. Thanks

His answer was wrong if you read the thread as he was recommending usage of ‘maximum-scale=1’.

Design, development and marketing for the web.
Edge Three Sixty Ltd: Web Design Liverpool
Reply with quote You can use sidebar for mobile devices, this is the best menu and easy accessible I am sending you link from there you can dowload menu for mobile devices
http://plugins.adchsm.me/slidebars/
Reply with quote Responsive Mobile Menu’s Coding

<!DOCTYPE html>
<html>
<head>
<title>Responsive Mobile Menu</title>
<link rel=”stylesheet” href=”rmm-css/responsivemobilemenu.css” type=”text/css”/>
<script type=”text/javascript” src=”http://code.jquery.com/jquery.min.js”></script>
<script type=”text/javascript” src=”rmm-js/responsivemobilemenu.js”></script>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”/>
</head>
<body>
<div class=”rmm”>
<ul>
<li><a href=’#home’>Home</a></li>
<li><a href=’#about-me’>About me</a></li>
<li><a href=’#gallery’>Gallery</a></li>
<li><a href=’#blog’>Blog</a></li>
<li><a href=’#links’>Links</a></li>
<li><a href=’#sitemap’>Sitemap</a></li>
</ul>
</div>
</body>
</html>

//By http://www.intuitconsultancy.com/blog/ //
Reply with quote JQuery Mobile say:

<label for=”select-choice-0″ class=”select”>Shipping method:</label>
<select name=”select-choice-0″ id=”select-choice-0″>
<option value=”standard”>Standard: 7 day</option>
<option value=”rush”>Rush: 3 days</option>
<option value=”express”>Express: next day</option>
<option value=”overnight”>Overnight</option>
</select>
Reply with quote
schoolwebdesign wrote:

Hi Smile ,
For showing a website in the mobile version you can use dropdown menu to design a website menu in the mobile version.

Display posts from previous:   

Page 1 of 2

Goto page 1, 2  Next

All times are GMT

  • Reply to topic
  • Post new topic