Pull Down for Navigation. 27th February, 2012 Tom Kenny Tutorials Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so I decided to have a look and see what I could come up with using some nifty CSS and a touch of jQuery. Trying to condense a navigation down onto a mobile screen tends to push the actual content of the site down and out of initial view. Luke Wroblewski has explored some solutions in Mobile First but I’ve developed something that I haven’t come across just yet. In fact, in the process of writing this tutorial, Brad Frost released a great roundup of responsive navigation patterns so I suppose this could be an additional technique to add to his list. Pull Down to Refresh Pull down to refresh was a concept first introduced to the mobile world by Loren Brichter in his Twitter app, Tweetie as you can see in the screenshot here.
Pull Down for Navigation Demo Step 1 The HTML Step 2 The CSS Step 3 The jQuery. Return of the Mobile Stylesheet. The past couple of years have seen numerous new web-capable mobile devices arise, including Apple’s iPhone and its Safari browser, the creation of Google’s Android platform and Webkit-based browser, the rise of so called “full web” browsers (Nokia’s S60, Opera Mobile and Opera Mini, among others), the early development of Firefox’s mobile version, and more. These mobile browsers improve users’ experiences, giving them access to websites formerly off-limits to most mobile devices.
Indeed, as a 2008 Nielsen Media Research report highlighted, mobile devices have increased traffic by an average of 13% across several popular websites. Ideally, site authors would be able to meet the growing demand for a quality mobile experience without changing a line of code. But the reality is that a site designed specifically with mobility in mind will always provide a much better user experience to mobile users, even when they are equipped with the device du jour. Screen style sheets strike back#section1. Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5) | David Calhoun's Developer Blog. (updated June 27, 2011) Mobile-specific HTML Viewport tag Use the viewport tag to properly fit the content to the screen: Tel scheme (to initiate phone calls) <a href="tel:18005555555">Call us at 1-800-555-5555</a> Sms scheme (to initiate text messages) iOS-specific HTML (some work on Android as well) You also have access to several Apple-specific tags to use in your iOS applications (iPhone, iPad, and don’t forget the iPod Touch!).
Turn off autocorrect, autocomplete, and autocapitalize And also some handy attributes to turn off annoying autocorrect features: Mobile-specific CSS Mobile browsers are now starting to support these basic CSS properties better. Also, iOS 5 has additional CSS to give the native scrollbar and momentum/intertia to elements with overflow:scroll: Media queries enable you to target specific features (screen width, orientation, resolution) within CSS itself. @media all and (orientation: portrait) { body { } div { } } Here’s a few examples of using inline CSS: Miscellaneous CSS. The 5-Minute CSS Mobile Makeover.
More people are surfing the Web via mobile device than ever before. It’s just so convenient to have that mobile access to anything you need. Sadly, most websites have not yet considered their mobile visitors, who probably move on to the next site before trying to make sense of a jumbled mess. Those of you who surf the Mobile Web know exactly what I’m talking about here: sites that “get it” are a joy to visit, but those that don’t are a total pain. What’s to get? Well, for one, if you do nothing else for your mobile visitors, take five minutes and implement a basic stylesheet to make your site readable via mobile device. This tutorial will show you how to retain visitors and reduce bounce rate with a super-easy 5-minute mobile makeover.
You think I’m joking Before we begin, I feel it necessary to emphasize the serious need for millions of mobile makeovers. Mobile screenshots of WordPress.com, and About.com, Go.com Mobile screenshots of Alexa.com, DailyMotion.com, MediaFire.com, and Hi5.com. The viewport metatag (Mobile web part 1) | David B. Calhoun – Developer Blog. The skinny Use this: Introduction This series of posts is intended to introduce web developers to basic techniques for designing for the mobile web.
It assumes at least a basic knowledge of creating desktop websites. The problem Ok, so you’ve settled down to learn how to write a website for a mobile device using your current knowledge of building desktop websites. So you start off with some pretty basic HTML: <! Ok! <p class=”wp-caption-text”> Hello World on the iPhone </p></div> Doh! This is the first lesson in making mobile websites: width is your enemy.
If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. Viewport But this is no good! Now we tweak our Hello World just a bit… <! And we get this… <div id=”attachment_203” style=”width: 320px” class=”wp-caption aligncenter”> <p class=”wp-caption-text”> Hello World with the Viewport tag </p></div>