Professional web designers and web 2.0 experts

Touchscreens and Hover states

With the huge popularity of mobile touch devices and the current major drive to make everything web related compatible with these devices, today’s Design Reviver Answers discussion is certainly relevant with current development trends. The question that was asked was “Will Touchscreen devices make hover states a thing of the past?”

You can leave your thoughts and point-of-view below, or you can leave your answer on the original question on Answers here: Will Touchscreen devices make hover states a thing of the past?

Will Touchscreen devices make hover states a thing of the past?

This question was originally asked by Mpstud.

The best answer comes from Darrell Estabrook :

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

The Future of Mobile Development

There was an interesting question posted in the last few week on Answers, discussing a web design topic which is very popular and certainly relevant within the design community. The question was “What Do You Think is the Future of Mobile Development?”. Questions like these deserve to be opened up to a wider readership, so, what do you think?

You can leave your comment below, or you can leave an even better your answer on the original question on Answers: What Do You Think is the Future of Mobile Development?

What Do You Think is the Future of Mobile Development?

This question was originally asked by a Themans, and you will find the best answer below:

The Best Answer came from an Andrew Miller:

The Next Answer came from a Steve Workman:

Unanswered Answers

That is now four weeks without any unanswered questions!!!

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

8 Ways to Make Your Website Mobile Friendly

Now that mobile browsing is ever increasing in popularity, it is in your best interest to start optimizing your websites to better fit the mobile platform and its limitations. There are many easy ways to enhance you website for mobile browsing without hindering much of your website; we discuss eight popular ones that can make a huge impact on usability.

Fluid Width Layouts

Giving your site a fluid width layout is a major step towards making your website mobile friendly. It not only gets rid of the extra dead space surrounding your website, but it additionally enables viewing across many different resolutions or platforms. So what exactly does it mean to make your site have a fluid width?

Fluid width, as its name describes, makes the width of your website stretch or squish depending on the browser size. Its ease to implement depends on your current setup or layout. If you have a simple easy to work with layout, changing your width property to a percentage is all you need to modify of your css style sheet to get it working.

No Ad Clutter

Advertisement clutter is a major issue for mobile platforms, the user ends up viewing more of the advertisements than content, if the layout has not been destroyed already. There is an easy fix to hide this clutter without creating a mobile specific version of your website. You can either use the css’ handheld stylesheet type or simply detect resolution size.

Either one you use, using a simple display:none on the obtrusive advertisements will eliminate them from view and clear things up. You should always remember that most handheld mobile devices have limited real estate, meaning the screen size can only fit a few things, and those few things should be the content the user visits your site for.

Centered Content

Centralizing your content is key on mobile devices as that is what users see immediately. A lot of mobile websites tend to stick in a lot of unneeded clutter in this spot such as images or advertisements, however the webmasters need to understand that displaying the content users came for is exactly what they need to focus on.

If a user is accessing your website from a mobile phone and is not connected to a land based network connection, bandwidth will definitely be a limitation, which means the user will select through the sites he or she wants to visit rather than visit the sites they would on a desktop.

What this means is that you need to make sure your website utilizes a small amount of bandwidth during mobile browsing, which means images should be limited, and text content should be focused. What if your site is based on imagery content?

If your website is mainly based on imagery, it is in your best interest to create a separate mobile website, one that is optimized for that platform which can size down the imagery and highly compress them. An alternate way is to create mobile applications for applicable mobile devices that allow third party applications, as this could be a helpful tool for your users.

Cross Platform Friendly Links and Effects

As new web tools and effects continue to expand, it is hard not to include a nifty hover tooltip or a drop down navigation or even links that open up a small new window using javascript to display some information. However, to a user on a mobile device, these effects and tools may not work on their platform, leaving many unusable links and tools. An easy solution to this is to always provide an alternative for users who cannot view or use them.

Some mobile devices allow Javascript but it will not be able to utilize the effects you have on your website anyway, so the best thing to do is to detect the type of platform that is connected to your website and disabling or changing some tools and effects to suit it better.

Keep Your Pages Short and Compact

Long pages for mobile devices are definitely a huge draw back because of the longer load time it takes to download the webpage. Therefore, keeping your web pages short and compact makes your website accessible across all platforms even on a device that has a very limited download speed, thus, the last thing users want to be doing is waiting for pages to load rather than spend the time browsing through it.

Thorough Navigation

As you know, typing on most mobile devices is a real a pain as the keypad or virtual qwerty keyboard is not going to be easy to work with at all. Therefore, creating a thorough navigation for your website is a key aspect to making your website mobile friendly. If you offer a genre of content, you need to assure users can get to them via browsing and not through using a search engine. If you cannot get to certain parts of your website without searching, chances are, they will not either.

Large and Clear Content

Today, many new mobile devices are touch screen, which means users will be using their fingers to navigate about their device and your website. If your website’s content and links are not large or clear enough, navigating through your website will be a pain.

To easily prevent this, try to eliminate links that are scattered within articles or paragraphs, as they are difficult to press or click on since they are surrounded by plain text. Instead, place these links above or below the bodies of text while keeping them fairly large, this allows users to easily click them with their finger without hassle.

Short and Sensible Links

This is another typing related issue; when users have to type in a long URL to get to your site, chances are, they will not. As mentioned earlier, using a keypad or virtual qwerty keyboard is not ideal for typing long text blocks, so make sure your website has a short and easy to remember domain. Additionally, eliminating typing work as much as possible to get around while they are on your website is also ideal, as usually they are accessing your site to quickly pull or reference information.

High-Quality Fonts & Resources For a Better Mobile Experience

Designing for smaller screen resolutions can be a daunting task, especially if you’re not sure which fonts will mesh well with the mobile resolutions you’re designing for. In example, dark bold fonts that are prone to look really well on larger computer monitors will more than likely become blurred and distorted on smaller screens.

Choosing the wrong font could be a disaster, and selecting the right font for mobile web pages may not work well with your current project. It’s sometimes shoot or miss, however, by reading up on resources on mobile type you can decrease the chances of selecting the wrong font. As you can see below, we’ve compiled a list of high-quality fonts and great resources that are sure to give your users a more complete mobile experience.

Delicious

Fontin Sans

Dekers

Sansation

Latine

Advent

Dejavu Sans

Fireye

Accents

Zekton Free

Mobile Typography Resources

Mobile Typography

This article covers the challenges and technical aspects of mobile typography. It shows you exactly what makes a font “worthy” of being displayed on a smaller screen, and its characteristics. You’ll learn about font measurements, letterforms, vital families, styles, kerning and more. It’ll also show you a guideline for selecting a the right typefaces for small-screen devices.  Read More

Typography for Mobile Phone Devices

The following case-study conveys valuable information on QUALCOMM’s decision to develop and strategically design the typographic aspect of their mobile user interfaces. They previously had a custom family of sans-serif fonts that were going to be used with previous devices, however, the project led to the assessing the impact of digital type on mobile devices. Follow the link to download the full case-study. Read More

The Typography Manual 1 (Mobile)

This manual is straight to the point, easy to follow, and lets you in on some intriguing insight having to do with mobile typography. It’s a detailed guide (60+ pages) for designers that displays a history of type, the basics, characteristics and more. It also comes with a Visual Type Anatomy Glossary that shows you the types terminology in the form of letters and their definition as well. Read More

Fonts for prototyping mobile UIs

Here you’ll find great pointers on using the right fonts for prototyping mobile UI’s. Because there are is a plethora of designers that create prototypes before developing a mobile website, you should know which fonts work best and how. When you design mobile web pages your designs suffer from bad pixelation, now imagine your fonts being displayed in the same manner. This article covers the right type to use, which manufacturers (Nokia, Samsung, Etc..) use which fonts, and what fonts should/can be replaced. Read More

Typography for Mobile Devices

Just as the title states, this article goes over Typography for Mobile Devices. Just about 3 billion people use mobile devices, can you afford not to select the right fonts? You’ll also see that the author discusses quick points on relative fonts and which ones are not worth using. For example, the use of Times as a mobile type is frowned upon, but why? Because it lacks personality.

This is a good argument, in fact, Time is one of those fonts that look much better after 12px. The author also relates using fonts for smaller screens to the reasons why you would choose a specific font for print. The selection of fonts for use of print requires such topics as hinting, kerning, and x-height to be covered. Interestingly enough, the author says that these are also grounds for selecting a mobile type. Read More

E-mail To SMS Providers List (Easiest Way To SMS-Enable Web Applications)

You remember Uptime Robot, a free website uptime monitoring service that we launched few weeks ago.

While building it, we're looking for a free & easy way for adding SMS support to the application which would notify users when their websites were down (and back up).

There are great APIs around but they are paid & we experienced that the best way to do this is using the e-mail to SMS gateways of mobile providers.

But we needed a list of providers that had support for e-mail to SMS.

After digging, we found several lists, realized that every provider has a different format where some requires a prefix & other can require a suffix, digit requirements differ, etc.

At the end we merged lists, removed invalid entries, added new ones with the help of Uptime Robot users & created a flexible MySQL table that included this data.

Now, we're sharing it (as SQL & CSV formats) at the Uptime Robot website so you can easily add SMS support to your web applications & won't lose the time we already did.

P.S. Note that there may still be some invalid entries that we couldn't get a feedback yet. If you think there are, please share them in comments, we'll updating them & always be sharing the latest version of the data.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• iPhone Application Development – Step By Step: Apps Amuck
• Free Site Uptime Monitoring: Mon.itor.us
• Free & Web-Based Development IDE: UIzard

The Future of Mobile Apps: Flash CS5

One of the biggest problems facing mobile internet surfing is Flash based content. However, this is soon to change. Flash CS5 (code name “viper”) is now under development with features that will enable it to create applications for mobile devices using action script 3. According to Adobe Labs, new features will include:

• Applications for iPhone — Publish ActionScript 3® projects in Adobe Flash Professional to run as applications for iPhone. Learn more.
• New text capabilities via the Text Layout Framework (TLF) — Get unprecedented text control and creativity with projects created in Flash. Advanced styling and layout, including right to left text, columns, and threaded text blocks, let you work with text in Flash like never before.
• XML based FLA files — Manage and modify project assets using source control systems and enable teams to easily collaborate on files.
• Code Snippets panel — Choose prebuilt code that can be injected into
• projects to increase interactivity and also reduce the ActionScript 3 learning curve.
• Flash Builder™ integration — Use Adobe Flash Builder software as your ActionScript editor within projects in Flash.
• Improved ActionScript editor — Improve productivity with custom class code hinting and completion.

Here are some screen shots:

for more information on Flash Cs5 please visit http://labs.adobe.com/technologies/flashcs5/

Additional Info:
Adobe Flash Professional CS5: Applications for iPhone
Flash CS5 and the iPhone – David’s Tech Heap
iPhone Dev and Flash CS5 – Arthur Lockman’s Blog
Flash CS5 to feature iPhone support | Gareth Jones @ Quak Multimedia
Adobe Flash CS5 Professional Revealed!!
Twitter Trackbacks for Adobe CS5
Building iPhone applications with Flash CS5
Adobe Flash CS5 will be able to output native iPhone apps

Photoshop for iPhone

For many, the name “Photoshop” is associated with one of the most advanced photo and image manipulation software platforms ever created. From this comes Photoshop for iPhone. Released October 8th, this new (and free) application developed by Adobe Systems allows users very basic Photoshop editing tools on the go. According to the product page, the program’s top features include:

Editing: Crop, Rotate, Flip.
Color Manipulation: Exposure, Saturation, Tint, Black and White.
Filters: Sketch, Soft Focus.
Effects: Vibrant, Pop, Border, Vignetter Blue, Warm Vintage, Rainbow, White Glow, Soft Black and White.

As sales of Apple’s popular iPhone have steadily risen, so have the development of numerous applications for everything from map directions to tip calculators. Though Photoshop’s more advanced features such as 3D modeling are a few years in the works, Adobe has stepped in the right direction entering the mobile marketplace.

for more information please visit: www.adobe.com or