I’m pretty aware of what goes into making a normal site as usable and accessible as possible, but I have no idea about mobile sites. I’ve heard of using xhtml/standard html, because it’s better than the mobile specific html. I’d really like to know of a good resource that shows common problems and methods to creating mobile sites (more specifically the different between layouts of a common site and a mobile site as well as any sort of css difference). All I’m really finding are out-dated blog posts or those 3rd party DIY software (I don’t want that).
There’s a lot to be said about mobile design, and there’s a forum just for that too, so you can find lots more info there. But in terms of usability and accessibility, there are certain basic principles like making buttons big enough to touch, keeping content well organized and easy to find, etc. etc. There are lots of other design considerations too, such as whether to let the content just fit the screen or whether the user will have to do a lot of scrolling.
Are you interested in this more from an accessibility standpoint or all issues related to mobile design? If the latter, there are some good books around at the moment, and some good articles online. There is a philosophy taing hold that one should actually design for mobiles first, such as this and [URL=“http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu”]this.
Wow didn’t really realize there was a forum just for mobile, sorry. I think I’m just sort of concerned about the CSS (working across various phones and how it differs from a normal site. Ie. phones dont use hover, but will use active states). Also, for buttons would I make them 100% width? Do I set min-widths? These are just some of the questions I have.
Also, why do @media queries if you need to re-structure the html for a mobile site??? I just don’t get it.
edit: Almost done with the slide show and I understand some of the important points of building mobile first, THEN full site. The problem is when people come to me with designs they need coded it just doesn’t always work that easily.
Those links I gave provide some introduction to that. The thing to remember is that HTML works just fine on mobile devices as on desktop machines. But when adding CSS, some of the styles you typically use for desktop layouts may work agains you on mobiles, so it’s about learning what works best on various devices.
Also, for buttons would I make them 100% width? Do I set min-widths? These are just some of the questions I have.
It’s up to you, but a 100% width button is a bit big. I think Apple’s recommendation for mobiles is at least 40px width/height to make a button easily ‘clickable’ (so to speak).
Also, why do @media queries if you need to re-structure the html for a mobile site??? I just don’t get it.
The whole point of using @media is that you don’t have to change the HTML for mobiles. For example, you might have a content div and a sidebar. For your desktop styles, you’d typically do something like float the content left and the sidebar right. But that may not suit the mobile screen. So, using media queries, you set alternate styles, for example, just not floating those divs, so that one site on top of another. A lot of modern sites now do this sort of thing, so if you resize your browser window you’ll see the layout change. Try this one, for example: http://colly.com/
Almost done with the slide show and I understand some of the important points of building mobile first, THEN full site. The problem is when people come to me with designs they need coded it just doesn’t always work that easily.
Yes, designing like this (with mobiles in mind) require a lot more thought and planning; and in my experience so far, the average client is not ready to hear about this sort of thing, or bother with the extra time/costs involved. In a few years, though, I predict that this will be a standard requirement.
We’re in the process of developing a homepage for a client from a design we created, AND they requested a mobile version (for iPhone).
It’s still in development right now, but check this link out on your iPhone and then in Firefox/Chrome and you can see some of the considerations/adjustments we made to make the content more accessible for iPhone.
http://projects.authenticstyle.co.uk/solarvoicemedia/web/index.php
I’ve heard of using xhtml/standard html, because it’s better than the mobile specific html.
[font=comic sans ms"]That really depends on who you’re building for. There’s an older standard for mobile browsers called WAP. Older feature-phones may also require XHTML MP rather than general HTML. Most newer devices and browsers are fine with regular HTTP and HTML though.
That second link from ralph: go through it. They make wonderful slides. Then continue with the other slides you see listed. Go through all of them. That company (yiibu) builds mobile sites for very large clients and bother to do the research on how to do so (and “how to” is very much in flux… recommendations change within months, so don’t feel bad).
You’ll really dig this PDF from PPK (add this guy to your bookmarks for mobile information… he’s dedicated his career now to studying and testing mobile browsers and vodafone (or someone) actually sends him free phones for testing): http://www.quirksmode.org/presentations/USTourApril11/albany.pdf [/font]
We’re in the process of developing a homepage for a client from a design we created, AND they requested a mobile version (for iPhone).
[font=“comic sans ms”] Did they request a mobile version or an iPhone version? Does anyone in that company own, say, a Blackberry? Excellent link explaining how the mobile barackobama.com breaks horribly… in almost every mobile, even iPhones. She points out some smart ideas and there are good links there. Also the comments (more in depth about jQuery for example).
Looking at the site in question, you haven’t designed for accessibility, so unless you’re going to create an entirely different site for every target, you’re pretty much up the creek.
Even as HTML 5, it’s not USING HTML 5 properly – endless “section” tags for nothing (probably from a past of endless div tags for nothing and endless tables for nothing before that), section tags doing the footer tag’s job, section tags doing the heading tag’s job, classes on all of the above AND all child elements for nothing… and it’s filled with ‘non-viable for accessible web deployment’ elements like those four equal height side-by-side sections, fixed width that isn’t even 1024 friendly (effectively useless on netbooks), massive image files that take forever to load on broadband landlined desktops… couple hundred K of javascript for christmas only knows what…
Very much reeks of the typical “but I can do it in photoshop” mentality coupled with a failure to grasp the concepts of semantic markup, separation of presentation from content, accessibility norms, or how to target multiple platforms using just one HTML file. Jumping the gun with the HTML 5 nonsense is just icing on top of an already non-viable page concept.
Hence the 2.3 MEGABYTE page size in an ungodly 58 files resulting in the half a minute page load here on a 22mbps connection… to be brutally frank I pity the poor client who gets saddled with that mess. Throw it out and start over. STELLAR example of everything WRONG with web development today and “designers” just not getting the point of the Internet.
Very pretty though.
Crusty: whose site?
Oops, didn’t notice the person who added an actual link (ws727) wasn’t the OP (mezner). My bad.
Your mobile site can be exciting if you use the most appropriate mobile application while developing a site. Choose mobile applications which fit your mobile website and make it user-friendly. It is important that you and others who will visit your mobile site can navigate each web page without any hassle.