What type of menu is suitable for a mobile website
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
School Web Design
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.
James Coltham – NHS web content manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
sorry my mistake I meant select menu
<select>
<option>Home</option>
<option>Other Page</option>
</select>
School Web Design
<select>
<option>Home</option>
<option>Other Page</option>
</select>
School Web Design
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.
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.
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
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
From an accessibility point of view if you’re targeting mobile devices with media queries I’ve seen this quite often:
. 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
Code: |
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" /> |
Design, development and marketing for the web.
Edge Three Sixty Ltd: Web Design Liverpool
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.
Then add snippet as the navigation markup inside the body tag:-
Creating Style
For coloring:
nav tag that defines navigation will have 100% full width of the browser
Then, we will float the menu links to the left, so they will be displayed horizontally side by side
Add the following style rules in the style sheet
For separating menu 1px use following code
For brightening color and when it is in :hover or :active state-
For making extra link hidden
Hope it will help
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
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.
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
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
Last edited by torontolast on 03 May 2013 06:22 am; edited 2 times in total
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
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/
http://plugins.adchsm.me/slidebars/
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/ //
<!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/ //
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>
<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>
schoolwebdesign wrote: |
Hi ,
For showing a website in the mobile version you can use dropdown menu to design a website menu in the mobile version.