Bug Bytes is a weekly roundup of the Web’s best links, blog posts, and news articles related to web design, application development, and online marketing. Continue the conversation and share your thoughts on these stories in the comments below – we’d love to hear your own insights!

The Mac App Store

This past week, Apple introduced the Mac App Store, with the intention of doing for desktop apps what the iPhone App store has done for iOS apps. The Mac App Store should look familiar, as it looks and functions just like its sibling, mobile-based application store. This will help Apple users find applications as easily and create a new marketplace for application developers to sell their products. Users are now able to browse Mac OSX applications by category, featured applications, and many other parameters. The App Store offers developer descriptions and user reviews, as well as screenshots of the applications. Updates to the applications installed in your computer have never been easier.

Insight: Apple has popularized the concept of using an application marketplace to service an operating system or platform, and has now applied the idea to its most traditional offering, desktop computing. Apple is serious about moving toward an online-only mobile for application distribution, which is why Jobs chose not to release it as a stand-alone application, but instead as an overarching system update. Of course, the Apple Store will continue to sell boxed applications while users adopt the idea of buying applications through a virtual marketplace. However, eventually, application purchases will be strictly Cloud-based. By cutting out superfluous costs associated with packaging and transportation, everyone stands to benefit from Web-based application purchasing and distribution.

 

Why Your Form Buttons Should Never Say Submit

While you may not be totally aware of it, the boring, generic “submit” button can be an immediate turn-off to users filling out a form. A button that reads “submit” describes what the system is going to do when you click it – submit data into a database, or to an email – but doesn’t describe the conversion activity you want your users to perform. Your form buttons should describe exactly what the user does in their task. For instance, if you are signing up for an account online, the button should say something like “create your account.” By being specific about the function the user will perform, you can avoid confusion on the part of your site’s visitors.

Insight: Having descriptive form submission buttons helps make actions tangible and concrete for your users, and also helps make the user experience more memorable. A form button that reads “submit “might give users a false impression that the website is a generic, template-based site, and also gives off an air of unfriendliness and insincerity. If your visitors feel that your site is impersonal, you can count on fewer conversions through your lead generating forms.

6 Twitter Winning Strategies To Learn From

Social networking can sometimes create a dilemma for brands and brand voices. How should a company present itself to its customers (as well as potential customers) on Twitter? Mashable’s article proposes that the most important aspects to focus on who manages the brand’s content, the voice representing the brand, and what content is shared with the brand’s followers. There is not a scientific formula for this, since every brand has a different perception and desired positioning; however, the voice should always come across as professional and personable. The six case studies detailed in Megan Berry’s article show how a number of household brands have successfully achieved this, and how you may be able to replicate their success.

Insight: These case studies of Twitter success show there is no one right way of connecting with followers and brand evangelists on Twitter. Scott Monty (@ScottMonty) tweets on behalf of the Ford Motor Company from his own account, and amplifies the Ford brand through genuine conversations about the automotive company. On the other hand, JetBlue takes a more traditional corporate approach, heavily utilizing the @JetBlue handle with more than twenty people across all different areas of the company collaborating to have the best answers for any questions asked via Twitter.

Android Passes iPhone in Total U.S. Subscribers

The latest mobile subscriber estimates from comScore are out, and, and for the first time, Android passed the iPhone in total number of U.S. smartphone subscribers (for the month of November 2010.) Out of 61.5-million smartphone subscribers, 26 percent own Android devices, while iPhone accounts for 25 percent. Regarding the sales of new phones, Android also leads the iPhone. Both trail the market share of RIM’s Blackberry handsets, which still own 33 percent of the smartphone market. Over the past month, Android’s market share has grown 6 percent, while Blackberry has decreased by 4 percent.

Insight: The reason for iPhone’s decline in the rate of new subscribers could be the fact that the iPhone has saturated its current market on the AT&T carrier. Once Verizon begins selling a CDMA version of the iPhone, we may see Apple gain back market share of users who have previously opted for Android or Blackberry devices due to lack of availability of an Apple-branded smartphone on a CDMA carrier.

Mobile Devices Are The Main Source Of Tweets

At this year’s CES 2011, Twitter CEO, Dick Costolo, revealed that 40% of all tweets come from mobile devices. About a year ago, mobile tweets only made up about 25 percent of tweets, which is an indicator of how fast mobile usage is really growing. With the release of official applications for the iPhone, iPad, Android and Blackberry platforms, mobile tweeting exploded. Twitter plans to become simpler and more consistent across platforms, with even more growth expected. Twitter currently has 350 employees, with 100 of those hired as recently as the last quarter of 2010.

Insight: Understanding the way users disseminate information on Twitter should make brands reconsider their Twitter strategy to ensure it is as mobile-friendly as it needs to be. If 40% of tweets come from a mobile device, users are more than likely doing their feed reading from the same mobile device. The kinds of information and links shared should be considered from a mobile user’s perspective.

Early last week, it was revealed that Facebook acquired the domain name “fb.com,” evidently tied to the company’s new email system being rolled out over the coming months. The “New Messages” system will incorporate the existing messages application, as well as an email service. It is speculated that the facebook.com domain will be limited to Facebook’s staff members, and fb.com will be used to all other consumers.

Insight: It is said that “New Messages” is Facebook’s attempt to kill Gmail and hold the Internet ecosystem within the Facebook platform. As opposed to having a relatively fragmented Web surfing experience, with users splitting their time up between Gmail, Facebook, and social news sites, Facebook would prefer to keep Internet users on facebook.com for as long as possible.

HTML 5 Microdata

HTML 5 is getting more attention from developers and designers as more and more browsers begin supporting the new Web standard. Microsoft has brought Internet Explorer’s latest iteration, IE9, up to date to support HTML5, as well. Marcofolio’s article on the semantic aspect of HTML5, “microdata,” sheds light on some of the new tags, and how it will affect future SEO efforts.

Insight: Microdata provides a wealth of semantic information that search crawlers use to determine relevance of a page given the user’s search query. While not every browser can read the microdata in an HTML5 document, Google is already using this information to populate rich snippets in search results. Implementing Microdata could give SEOs an upper hand, as search engines may favor websites that help provide the most relevant information to the user.

Yahoo! Clues

Y! Clues is the newest tool that Yahoo! has created to provide insights into search trends using their wealth of data. Y! Clues allows the users to see demographic charts, volume charts, maps, and other features beyond what Google’s own Insights for Search provides. Another important feature, called “search flow,” allows the user to see search patterns related to a particular keyword or subject.

Insights: It is important for marketing and advertising professionals to visualize trends in online search when developing and creating new campaigns. Now, with the features provided by Yahoo! Clues, we can see user search patterns, demographic information tied to a search, and determine if search volume indicates the creation of a new campaign.

Twitter Analytics

Measuring analytics within Twitter has never been perfect, and required the help of third party software to keep track of mentions and click-through’s. This past Thursday, Twitter announced an official analytics suite for its users. Twitter users will be able to analyze all types of data, such as clicks, views, replies, retweets, and more. This will help to make concrete the return on investment for small, medium and large companies.

Insight: Twitter has struggled to develop a business model, but inches closer and closer by monetizing new features, such as promoted tweets, and now, Analytics. Additionally, by providing analytics to its paying customers, Twitter can develop case studies to show the merit of social media to small and large businesses alike.

Google Voice on iPhone

The controversy surrounding Google’s Voice iPhone application is over. Apple finally released the iPhone App after 16 month of wait, and most iPhone users who have downloaded the application believe it was worth the wait. The application is completely free, and allows users can make phone calls over a data connection using a Google-provided telephone number. The difference between the Voice iPhone application and the iPhone’s native application is that Google Voice must be open every time you want to use it, and the iPhone’s native app does not. Google voice is only allowed in the US for now, but it will be international in 2011.

Insight: Apple claimed it rejected the application originally because it “duplicated core features of the phone,” and posed a threat to its partner, AT&T, by allowing users to skirt their voice plan in lieu of unlimited data usage. Now that the government has begun inquiring into Apple’s operations, app restrictions have eased up, giving application developers more flexibility and less to worry about when creating new applications.

Apple’s announcement of AirPrint as part of its beta version of iOS 4.2 should bring this bit of convenience to the iPad, iPhone and iPod Touch. Why does this prospect make me so very happy? Print CSS for these platforms + wireless printing = a great way to provide additional copies of materials when there’s one surprise person at a meeting or leave-behinds for clients who like paper. (I’m extra pleased that double-sided printing is an option so I can kill fewer trees in the process!)

Sadly, I can’t enjoy this until public release in November. Time flies like an arrow, so it should be right around the corner!

To read more, visit:

http://mashable.com/2010/09/15/airprint-coming-to-ios/

After you enjoy these mind-blowing links, Tweet, write on our wall or leave a comment below to let us know what you think.

Marketing

Samsung reveals tablet launch details.

iPad, iPhone and iPod Touch to get wireless printing with iOS 4.2.

Facebook passed Google in “time spent,” so what does that mean?

How to generate links through media relations.

What moms can teach us about the Internet.

Business writing for the Web: 27 ways to write more better-like.

The anatomy and evolution of Google Search results listings.

Matt Cutts acknowledges SEO 2.0 tactic of linking out as a ranking factor.

Design

A design is only as deep as it is usable.

What businesses can learn from designers.

Don’t make me wait. You wouldn’t like me when I’m angry.

Everyone who tried to convince me to use Vim was wrong.

Charts of the Yay!

Bing beats Yahoo for number two spot in search rankings.

Google’s Search share flatlines.

The ugly outlook for Nokia’s new CEO.

Oh, and remember to check out our delicious tags to see what else we’re looking at.

All I could think about at that moment was, “Wait. What? How are they going to pull that off without everything exploding?” What would he announce next? Cats and dogs living together in harmony?

The advantage that Steve Jobs kept hammering home was that by doubling the number of dots on the screen that create what you see (aka pixels) while keeping the screen the same size, text on the screen would look as good as it does on paper. This is something display engineers have been trying to achieve for decades.

And Jobs was right; text looks great. But because text has no intrinsic size, when you make a font size larger, it still looks great. We all know what happens when you try to resize an image; it gets blurry and pixelated and all around nasty. Instead of gaining detail, you lose it.

So when I heard about this Retina display – which basically doubles the density of everything (think of the difference between skim milk and mmm whole milk) – my thoughts turned to images. Text would look better, but images would look worse.

SCALABILITY AND DESIGN IN A MOBILE WORLD

So what’s this have to do with mobile web and application design? Well, the iPhone 4’s not the first phone to have a high-resolution screen. In the Android world, screens can be anywhere from 3” to nearly 5” with a variety of resolutions, and screen densities to match. What the iPhone 4 did, along with this year’s bevy of Android phones in all shapes and sizes, was bring a certain situation to a head that user interface designers had been dancing around for years — Scalability.

Mobile users have become accustomed to special websites and apps that fill the screen and are tailor made for their given device. You don’t resize windows or adjust things to your preference; you expect it to be perfect. So what do you do when you have to design something tailor made for screens between 3” and 5,” that varies from 120dpi to 326dpi, and needs to display on phones from six different manufacturers? That’s the very problem I had when I sat down to redesign the mobile template for our Docsites, a design option for some of our specialty clients.

This redesign was for a template that’d be in use for hundreds of websites. So, in addition to the display scalability problem, there were also issues of color and content scalability – as well as the need to keep the site petite so it would load quickly on slow mobile connections. One design for dozens of different screen types, for hundreds of websites. Piece of cake…

BROWSER POWER AND CSS3

One of the great things about designing for the mobile Web is the modernity of the browsers that you find on a phone. iPhones, Androids, and even Nokia’s Symbian based phones have browsers based on WebKit, the same core that powers Safari and Chrome — the most modern browsers on the web. Blackberry, prior to the new OS6-powered Torch (which uses WebKit as well), is pretty antiquated. However, it could be worse (I’m looking at you Windows Mobile). Even as bad as the Blackberry browser is, it’s still more predictable and less buggy than the #1 browser on the desktop web — the 10 year old IE6. Because of these advanced, nimble, powerful mobile browsers, you can count on modern features like CSS3, SVG, and HTML5, which are web technologies perfectly suited for tackling the three design considerations needed to create our scalable website.

Throughout 2010, CSS3, an update to the language that designers use to style websites, has been gaining popularity and use – thanks to modern browsers, such Safari, Chrome, and Firefox on the desktop, as well as the iPhone and Android in the mobility space. Even Internet Explorer 9 and Blackberry OS6 have joined the party as of this month. For designers this is a huge win, as the more CSS3 support there is, the more creative we can be in a shorter amount of time.

Making buttons or other assets with any personality, such as color gradients and rounded corners, used to require opening up a graphics programs like Photoshop, Fireworks, or Illustrator. But with CSS3, artwork that used to require an expensive program and hours of work can now be done in much less time and with just a few lines of styling code. Not only does this eliminate tedious design tasks, it also allows the designer to focus more on the design than the implementation. It requires less upkeep as you add more buttons and headers. Likewise, because the design is defined in CSS, rather than absolute pixels, it’s easy to adapt to other websites, change colors, and modify for any need.

You can also make text more interesting by adjusting text shadow properties to give you a nice drop shadow or a subtle letterpress look — again, without relying on fixed, absolute graphics. CSS3 also supports multiple backgrounds, allowing you to layer and position additional assets into a button or header when you can’t do it all in just CSS. When you put all these features together, you have the power to design, maintain, and make portable website elements without the use of images. A button made for website A, can be tweaked in just minutes to work on website B, while still looking bespoke, and without requiring anyone to open any programs and hunt for the original artwork. And because there are no files generated, the website will load much faster.

WINNING THE IMAGE BATTLE: RESOLUTION VERSUS SIZE

Scalable Vector Graphics (or SVG) are a type of graphic that has existed in the digital graphics realm since the dawn of the industry, but have never really been seen in a web browser. In general, vector graphics don’t define an image by using fixed pixels, but instead use coordinates and math. As a result, when you resize a vector image, shapes get recalculated and redrawn at a larger size, and there is no quality loss. While complicated images like photographs can’t be represented as vectors, illustrations, such as icons, can be.

As more and more high-resolution screens come to market, the importance of maintaining high quality graphics with detail becomes difficult. Non-vector (or bitmap) icons that might look fine on a normal computer screen will look blurry and jagged on a high-resolution screen, such as professional monitors, or newer iPhones and Android phones. With vectors though, no matter the screen size or resolution, icons will look razor sharp and perfectly detailed. The advantage here is that you don’t have to settle for cruddy looking graphics on high-resolution screens, nor do you need to create multiple versions of the same icons for low and high resolutions. One graphic, with all needed information displayed at any size, is used instead, so there’s no need to go back and make higher quality artwork in the future. As screens get better and more detailed, so will your icons without any work down the road.

CACHE, CAPTURE, AND SAVE

Lastly, HTML5, an update to the core language that defines every webpage ever created, provides us with an incredibly useful feature for this design: Offline Storage. Despite CSS3 and SVG reducing the number of files that are needed to create a website, there are still going to be some required. Icons, photos, and maps, for example, are all things that still need images to be downloaded every time you go to a site, or do they?

HTML5’s spiffy new offline storage feature allows for something called a Cache Manifest. A Cache Manifest list is a list of files that you instruct the browser to download in a normal manner, but then retain and save to the hard drive, or into a phone’s internal storage. Using this feature, any icons, photos, or maps, for example, can be saved without ever needing to be re-downloaded again. Every time you visit the site after the first time, those large files won’t need to be downloaded.

Combine that with CSS3 styles and SVG graphics and you have a site that downloads quickly, looks great on any phone (no matter the size), can be easily updated, and can almost self-maintain over the years as technologies advance.

We want to know what you think.  Tweet, write on our wall or leave a comment below.

Search

An in-depth look at search auto-suggestions.

Readers who liked this article also read…

Yahoo News testing related search results on news stories.

A Joint Policy Proposal for an open Internet.

Bringing sexy back to search.

Feeling lucky?

Using Google Earth to graffiti the planet.

Programming

Contrary to new survey, you should investigate location-based apps.

Ideas for iPhone apps.

Flip! A jQuery plugin v0.9.9.

Dynamic FAQ Section w/jQuery, YQL & Google Docs.

App icons on iPad and iPhone.

Marketing

Do we really need to be social on social media?

Take a walk on the client side.

3 ways Facebook’s pending page changes affect marketers.

Design

A man, a plan and a Sharpie: “The Great Typo Hunt.”

100 pages of images, fonts, & amusement!

Showcase of delicious coffee websites.

Beyond “I hate green:” Managing Productive Visual Design Reviews.

And don’t forget to check out our delicious tags to see what else we’re looking at.

Ruby as a language has always been useful, but the love affair didn’t really begin until Rails came along to provide direction.  Now there are countless online ecosystems devoted to all things Ruby.

Our very own Brad Huber is part of Ruby Bayou, a group of New Orleans based fans that meet every month at Gumbo Labs to talk shop and learn more about Ruby.  If you can’t make the meetings, here is a list of links that we think are helpful for anyone interested in Ruby and web design in general.

Blogs

Rails Dispatch – New blog by the EngineYard guys with a strong focus on new Rails 3 features.

Rails Inside – Ruby news!

Git Ready – Although it’s been nearly a year since the last update, this remains a great repository of Ruby’s favorite SCM: git.

Marc Andre – Marc Andre Lafortune is a Ruby core developer and covers interesting gooey bits of Ruby’s internals.

Screencasts

Peep Code – Provides a wide array of in-depth screencasts on Rails, iPhone development, testing and much more.

Rails Casts – If you need to know how to do a specific task in Rails, chances are Ryan Bates has already produced a 10-minute demonstration on how to do it the right way.

A Book

(You can print it out if you hate trees)

Ruby Best Practices – Freely available book on how to leverage Ruby’s features to write better code.

Posts

What is a Ruby Object?

How does Ruby store objects in memory?

So are these links great or really, really great? Did we leave anything out? Let us know in the comment section.

While the new device’s launch has been peppered with connectivity problems, it’s definitely a game changer in the technology world.  Aside from making a nice salsa, the iPad represents the latest and greatest user-friendly tablet technology, making media more accessible than ever before.

And yes, it blends.

But the iPad also represents a sea change in the web and application development world.  Websites and apps that have been optimized for the iPhone’s 3.5 inch screen seem to be gobbled up by the iPad’s 9.7 inch screen.

Programmers and developers are changing the way they optimize sites and develop apps for mobility, which can be easier said than done.

Booking it

The iPad’s Facebook app has a lot of catching up to do.  The difference in screen size from the iPhone screen the app was originally designed for means a lot of unused real estate right now.  Instead of the Facebook app taking up the entire iPad screen, it is limited to an area the size of the iPhone’s smaller screen, leaving a dead zone around the edges.

Like all iPhone apps running on the iPad, if you choose to use the app in doubled-up full screen mode, when you look at status updates or really any text on Facebook the words looks distorted and messy.  Now, you can always just log onto the internet directly and view Facebook that way, but the whole point behind iPhones and iPads has always been convenience and a tailored interface and it’s much easier to just tap an icon on the main screen.

Optimizing an app for the iPad’s larger screen means ensuring every inch of the screen is utilized to the best of the device’s ability, but the app itself can also be laid out differently.  The Marvel Comics app is absolutely beautiful.  There is an iPhone version, but the iPad version is much more impressive and the features have been tweaked for the iPad.

The new app is tailored for the physical attributes of the iPad, allowing for more robust swipes and taps across the larger screen. Viewing your library of comics, as well as browsing the Marvel store is not only easier on the iPad, but much more visually impressive.

NPR rocks the pad

The NPR app on the iPad is one of the most exciting examples of iPad optimization that I have seen so far.  The iPad app behaves nothing like any other version of NPR that you have seen before and it’s literally hands-on.  It allows you to scan multiple articles, videos and podcasts while reading an article or listening to your local station. You can even build a custom playlist of NPR content like Wait Wait Don’t Tell Me and Car Talk to listen to in the background.

NPR’s website looks static by comparison.  The iPad app takes full advantage of the larger screen, separating everything into three rolling feeds that you can easily scroll through.  The designers have incorporated all of the iPad’s functionality, allowing for quick fingertip browsing.  With this interface, only possible on the iPad, the act of consuming news, media, or entertainment is done with your hands and fingertips; you can literally just grab what you want.

Every app designed for the iPad or optimized from its iPhone version should look at what NPR and Marvel have done right out of the box.  Having a fully functioning app ready to go on day one can mean the difference between thousands of sales and dozens while you play catch up.

Game Changer

Making a website look good on a mobile device mostly involves scaling down an existing site and choosing what features or services a visitor will most likely need to access on the go. It’s about choosing what’s only essential both in terms of content and design. An iPhone app operates along much the same lines, relying heavily on the features most suited for the devices particular uses.

Creating apps for the iPad presents a new challenge for designers.  iPad apps are different from the web or desktop apps in that you perform gestures with your fingers. But the iPad is also different from the iPhone since you can display more, lay things differently and use gestures in a way that didn’t really make sense on the small screen but are perfect for a larger screen.

To go back to the NPR app, it’s a design that’s too big and complex for the iPhone, but also wouldn’t feel as natural to use or make as much sense with a keyboard and mouse. The challenge for designers and developers now is they’ll need to step up their game and be creative and innovative in new ways. The advantage is that, even if sales slow down and usage diminishes, which doesn’t seem even remotely likely, touch screen tablets are the wave of the future.

With nearly every other software company either already selling or developing an “iPad killer” tablet, it seems clear that touch screens are here to stay.  All websites will soon have to offer innovate touch screen experiences for tablet users in order to stay viable.

The question is how can your business cash in on this emerging trend? Investing in large touchscreen apps and sites is an investment in the future of how consumers will interact with media-with their hands.

Over the weekend, Adobe CTO Kevin Lynch finally responded, committing to improve performance, while Flash engineer Tinic Uro blogged about the improved performance of an upcoming version of Flash that addresses some of the myriad problems and drawbacks that inspired the “lazy” comment.

I think Jobs’s persistent trashing of Flash and refusal to allow it anywhere near Apple mobile products has finally hit home, but I don’t think there’s much Adobe can do about it.

Mobile Problems

I liked Flash in its earlier years as an accessory to the web. But as the web moves forward and becomes ever more mobile, Flash’s performance, cost, and proprietary nature creates a recipe for disaster as it nears ubiquity.

Open a Flash-heavy site on your laptop and you can literally watch the temperature shoot up to 180 degrees, the fans ramp up to maximum speed and your battery life plummet.

These responses rule out opening that site on your iPhone or iPad as it would quickly crash your device.  The future of the internet fits inside your pocket or in the bag across your shoulder, so as long as Flash remains as cumbersome as it is today it will necessarily get left behind.

Not Dead Yet

Flash still has some advantages.  Ninety percent of web development time is spent making sure the site is compatible with all versions of Internet Explorer, the most widely used web browser out there right now.

Since Flash looks the same on every site, except for mobile devices, it’s seen as a shortcut to instant compatibility.  But the overall drawbacks are beginning to drag down any site that relies too heavily on Flash to get by.

Other Options

We’re still years away from Flash’s demise, but in the meantime, I think there are a few different options out there right now that are faster, easier to work with and ultimately much better than Flash will ever be.

Flash is used for a lot of web interactivity, but things like jQuery are replacing that now.  Creating a site from scratch in good ol’ HTML and jQuery may require more work, but the site will load faster, run faster, use less power on laptops, look the same on mobile devices, and remain easier to maintain over the years. It also won’t cost you hundreds of dollars to get started.

YouTube has been the number one Flash user for years, but Youtube and Vimeo each recently launched HTML5 versions, giving that comparatively new video platform a serious foothold in the market.

As more developers see the advantages of ditching Flash, I think Adobe will have its hands full playing catch up to try to keep Flash viable, but I think we’ll see a Flash-free internet within 10 years… apart from Adobe’s home page.