background preloader

Designing Web Apps for the iPad

Designing Web Apps for the iPad
What’s stopping you from creating a functional app/website for the iPad? My answer was the Objective-C coding language, time constraints and having to deal with the infamous Apple App Store. But if you’re a web designer, like me, and you think that designing for the iPad is outside the realm of possibility — think again. Love it or hate it, the iPad is an incredible medium. In this article, I will guide you through my creative process in which I developed a simple but useful iPad web app in just one weekend: BracketSlash.com. I do not consider myself a professional iPad app developer, so if you feel a little apprehensive, let my experience be an inspiration to you. Why Did I Create a Web App for the iPad? I created a web-based iPad app mainly for my own personal use. My particular project is a news aggregating app that makes it easy to take 5 minutes every couple hours and keep up-to-date on news stories from a variety of sources. Start with a Functional Goal Draw It Out! Know the Limitations

iPad web development tips Posted at April 6, 2010 09:00 am by Nicholas C. Zakas Tags: iPad, JavaScript, Safari By now you, or someone you know, has an iPad. Of course, Apple has been preparing people on how to design their web sites for optimal use with the iPad (see Preparing your Web Content for iPad). Semantics aside, there’s a lot of information about how your site can be made to best work with the iPad, and I’d like to add a few nuggets to that body of knowledge. User-agent string The previously-linked post describes the iPad Safari user-agent to be in the following format: Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 This was the user-agent string during the beta testing phase. Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10 You’ll note the addition of “iPhone” in the operating system segment of the user-agent string.

Making an iPad HTML5 App June 4th, 2010 About a month ago or so, Amy and I release a little (literally, it’s about 5k) HTML5 iPad App for looking up time zones. I don’t mean select-box wasteland like all other time zone sites (who likes select boxes anyway?!), I mean a nicely polished, touch-enabled UI that works offline, too. The site uses no images (‘cept for the ad), no JavaScript framworks, and no external CSS, and fits quite comfortably in a few k’s of gzipped HTML. First visit the site on your iPad (desktop browsers work, too!) Our first attempt ran really great on the Apple-supplied SDK iPad Simulator. And here’s what we did: 1. At first, we used a quite complex -webkit-gradient for the gradients in the “day bars” for the various cities. We replaced those bars with a big canvas element that sits in the background, and we redraw only those portions of the screen that undergoes changes (the different highlighting when you drag around the green bar). 2. Also a major source of slowdown. 3. 4. 5. 6. 7.

11 UI Kits for iPhone and iPad Development Last week we posted a collection of printable wireframing templates which included some for iPhone and iPad app design. These are great for communicating early mockups and ideas, but when it’s time for those ideas to make the jump from paper to the computer screen, it’s helpful to have a library of UI elements at your disposal. Since we love saving you time, we’ve found some for you. Here are 11 UI Kits for iPhone and iPad Development. iPad GUI Kit in PSD Format iPhone GUI PSD 3.0 Free iPhone Toolbar Icons Ultimate iPhone Stencil for Omnigraffle iPhone UI Vector Elements Free iPhone Toolbar Icons Yahoo! iPad GUI PSD iPad Vector GUI Elements iPad Stencil for Omnigraffle iPhone PSD Vector Kit About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. Related Posts 468 shares 8 Essential iPad Apps for Bloggers Before I begin, let me just say what this list is, and what it isn’t. Read More 930 shares 30 Inspiring iPad App Websites

5 Cross-Platform Mobile Development Tools You Should Try This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. As mobile OSes — especially iPhone and Android — wax and wane, the pressing question remains: How do you choose which mobile devices to develop for and which devices to omit from your roadmap? Cross-OS platforms for mobile development on the whole are not yet a completely perfect, have-your-cake-and-eat-it-too solution, but many of them offer an excellent alternative to ignoring one mobile OS in favor of another or, perhaps worse, burning serious resources to develop for two or three platforms at once. Here are a few cross-platform development tools that were recommended to us by sources we trust. 1. The tagline "one codebase, every smartphone" pretty much says it all. The framework lets you write your code once and use it to quickly build apps for every major smartphone. 2. Appcelerator's offerings also include customizable metrics for actions and events. 3. 4. 5.

The Ultimate Teacher's Guide To Creating Educational Apps It’s no secret that students love their smartphones. Most were seemingly born with one in their hand. They use them to chat, talk with friends, get news, and to learn. Wait, learn?! That’s right, EduDemic is pleased to share with you some of the best ways teachers can make iPhone, iPad, and iPod Touch apps that will help students learn and feel a bit more engaged in class. We have tutorials for both tech experts and also teachers who are new to the tech game. Why Make An App? You may have decided to create an app simply so you would seem hip. A 24/7 learning store at your fingertips. Shop the App Store on iPhone and iPod touch to find apps for learning. Apps aplenty. Whether students need help defining a word, locating the lumbar spine, or practicing French vocabulary, there’s definitely an app for that. Wi-Fi wherever Voice Memos Record interviews, reading samples, study guides, or class lectures with Voice Memos — included on iPhone and iPod touch. VoiceOver Zoom White on Black Mono Audio

The iPad Web Design A few months ago, we published a set of resources for iPhone developers, covering a huge range of different types of resource. From podcasts and conferences to design kits and frameworks. Today we’re doing something similar, but specifically with designing websites for the iPad in mind. It won’t be quite as extensive (let’s face it, the iPad is still fairly new!), but should offer a brilliant set of resources for developing a browser-based site or application for Apple’s latest gadget. Getting Started The main focus of this article relates to designing websites for the iPad. That said, if you’re wanting to develop a native application, there’s a considerably more complex process. You can either register for free if you’d like just the basic access to Apple’s SDK, or pay $99 per year to have the ability to test applications on your iPad itself, and submit them to the App Store. Once you’ve done one of the above, you’re ready to get started! Apple’s Resources General iPad Design Articles

iPhone and iPad Development GUI Kits, Stencils and Icons | Speckyboy Design Magazine Apple don’t have any comprehensive pre-built GUI resources for app development, making it very hard to match the uniformed style of the iPhone or the iPad. You will need to create your own. To help streamline your iPhone app design and development, we have put together a fairly comprehensive collection of iPhone & iPad GUI kits that will allow you to focus on developing rather than having to design everything from scratch. Within this post you will find complete GUI kits and stencils, iPhone GUI elements and PSDs and finally a collection of the best icon-sets perfectly suited for the iPhone. (Some of the preview images are intentionally to large to show the as much of each GUI as possible). iPhone PSD Vector Kit This iPhone PSD Vector set, from Smashing Magazine and designed by Renee Rist, comes with several button elements as well as six different iPhone interface options. iPhone PSD Vector Kit » iPhone GUI PSD Design Template iPhone GUI PSD Design Template » This iPhone Yahoo! This.

PadPressed- Make Your Wordpress Blog Look Like an iPad App So...You Wanna Design Your Own Apps I have published lots of posts on my favorite iPad resources, my favorite apps for administrators, and posted countless Tweets and had a number of conversations about apps for learning, producing and consuming. But what about if you want to take the next step? You want (or better yet your kids) to create apps. Before I go the easy route, there are some standard (fairly nerdy) ways to create apps. Now, I am lacking on my computer programming skills so I turn to those that have streamlined the process. AppMakr-This is one of those "plug and chug" app makers. iBuildApp-Another one of the easy app builders, there are lots of features to choose from. Shoutem-Similar to the others, this has a few less features but when it comes time to publishing, you do save a little bit of money. Android App Inventor-Created by Google, this is now a project for MIT that aims at helping anyone who wants to create an app do it for free.

Top 20 Must-Have Educational iPhone & iPad Apps Used By Real Teachers in the Classroom - iPhone app article - Shara Karasic With the advent of the 2011/2012 school year, teachers who have access to mobile technology are scrambling to find the best education apps for the iPod Touch, iPad and iPhone. Educators use apps for everything from communicating with students to inspiring creativity to dissecting virtual frogs. Luckily, we have lots of educators (including Apple Distinguished Educators) on Appolicious who share their lists of the best education apps for elementary, middle school, junior high, and high school. These are the education apps most listed by educators on Appolicious. 1. 3D Brain (iPad, iPhone. Reviewed by educator lmorris: “This is a great learning tool for any student. Subject/Grade: Science (Biology). 4-12. Listed by: Alline, techsupv, and SkylineiPads. 2. Reviewed by educator lmorris: “This is a great app for learning about priceless pieces of art. Subject/Grade: Art. 6-12. Listed by: justatitch, uwcsea and LaurieFowler. 3. Subject/Grade: Language Arts, Math, Science. 4. Listed by: klbruni331.

Related: