Posts in Uncategorized (13)
Women in Tech: 60% female employees.
Ok, so ReignDesign is a successful mobile development company in China.
Lately we have 60% female employees. Yep, we're a tech company. Come over to Facebook and like ReignDesign, if you like this, like I do.
Tips & tricks for how to not have your new site look awful on phones
If you build a website for a company that promotes mobile development especially - make sure that it looks semi-decent (doesn't look completely distorted) on a portable device.
Supported devices with media queries:
Know how to target each device and it's orientation. If these are all the devices that you might want to support, create the following media query tags:
/* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } /* kindle fire ----------- */ only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5), and (min-device-width : 600px) { /* Styles */ }
More info on media query syntax here , and some good examples to get you excited about implementing them here.
Adjusting the layout viewport
Now don't forget to add these properties to the viewport-meta tag anywhere in the header of your html document, so that the site is being prevented to scale down when viewed on the iphone :
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />
For more information on the viewport meta-tag read here.
What to do about 7-inch tablets?
As Jacob Nielsen recommended for 10-inch tablets (iPad) - we simply served the desktop layout (it looks perfectly fine for our site).
While 7-inch tablets like the Kindle Fire or various other android tablets out there should be served the mobile version of a website. According to him - a site that is optimized for 3.5-inch mobile screens feels luxurious (in terms of space) on a larger 7 inch screen.
For having your iPad use the scaled desktop version of your site, after you deactivated scaling in your viewport, simply change the viewport properties in the header to depend on the screen-size:
<script type="text/javascript"> if ((screen.width<=600) ) { document.write('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />'); } </script>
More about detecting device-orientation
iOS 4, as iPad with iOS 3.2, supports the media-query "orientation" attribute, so you can apply different styles for portrait and landscape orientations.
Yet older iOS versions for iPhone do not, so we still included those work-arounds:
You can a combination of min/max-width: For older iPhone, landscape, you want to make sure the min-width is at least 321px, that way these styles won’t be applied in portrait mode. The max-width property is used if you implement iPad-size specific media-queries so that you don’t affect the desktop counterparts that support the orientation media query, it's set to 1024px which is the iPad's max landscape width.
For more complex orientation event handling, take a look at safari's event handling documentation here.
Use separate style-sheets to keep things clean
We didn't actually do this, - opposed to the applied best practices in our real development projects - our site's stylesheet is a meter-long mess.
But I would, next time around!
<head> <link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)"/> <link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)"/> <!-- and so on --> </head>
The next two tips are not really needed, but you can add them if you believe they make the experience of viewing your site on a mobile device special.
Have a iOS specific bookmark-icon
If a viewer wants to bookmark your site on home-screen - normally the iOS device will just create a screenshot of your site.
Now you can create your own "app icon" specific for your site - that is looking just as any other iOS app icon.
<rel="apple-touch-icon" href="images/appicon.png"/> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
Use special phone tags, if you link to phone-numbers
<a href="tel:008612345678900">Call me</a> <a href="sms:008612345678900">Send me a text</a>
(You ARE designing for a phone, duh.)
Update Flurry, Appirater now to avoid rejection from iTunes App Store
It's always frustrating when your app is rejected in the iTunes App Store approval process. Today we noted a new twist on the reason for rejection which we hadn't encountered before.
We found that your app uses one or more non-public APIs, which is not in compliance with the App Store Review Guidelines. The use of non-public APIs is not permissible because it can lead to a poor user experience should these APIs change. We found the following non-public API/s in your app: appName setAppName: multitaskingSupported If you have defined methods in your source code with the same names as the above-mentioned APIs, we suggest altering your method names so that they no longer collide with Apple's private APIs to avoid your application being flagged in future submissions. Additionally, one or more of the above-mentioned APIs may reside in a static library included with your application. If you do not have access to the library's source, you may be able to search the compiled binary using "strings" or "otool" command line tools. The "strings" tool can output a list of the methods that the library calls and "otool -ov" will output the Objective-C class structures and their defined methods. These techniques can help you narrow down where the problematic code resides.
This seems to be a new change in the implementation of Apple's policy, as we've submitted apps including this code several times in the past. Other people are also hitting this issue in the last couple of days We've investigated the issue, and the problem seems to lie in two third-party libraries which we use: Appirater (for encouraging users to rate your app) and Flurry (Analytics).
Updating to the latest version of Appirater solves the problem with the use of the multitaskingSupported API. To check if you need to upgrade, check for the presence of the string "multitaskingSupported" in your Appirater.m file. If it's there, you need to update.
Updating to the v3 of the Flurry SDK also solves the problem with the use of the appName and setAppName API. To check if you need to upgrade, check if your Flurry header file is called FlurryAPI.h (v2) or FlurryAnalytics.h (v3).
Verification:
strings libFlurry.a | grep setAppName
returns reults, showing that there's a method named setAppName used in the v2 SDK
strings libFlurryAnalytics.a | grep setAppName
returns empty, showing that this method is removed in the v3 SDK
The new libraries should be a simple drop-in replacement, but be sure to retest the functionality of your app before re-submitting! Of course it's good practice to regularly check for new updates/patches to any third-party libraries you may be using in your app.
We've also heard of an app using ASIHTTPRequest being rejected, possibly for similar reasons. If you have any other information on this issue, do let us know in the comments.
Stop annoying SMS spam
If your mobile carrier bombards you with advertising SMSes from various numbers, try this (on iPhone):
1. Create a new contact called “Spam”
2. Set its “text tone” to None
3. Any time you receive an SMS spam, choose Add Contact → Add to existing contact → Spam
Now, anytime you receive a spam, it will be clearly marked, and won’t sound an SMS alert.
DIY Book/Magazine App Creation
Developing custom apps can be quite a significant cost for small publishers or independent authors, so we thought we'd review some of the leading options for creating book and magazine apps, e-readers and the like. For this sort of app, it often doesn't make financial sense to build a custom app from scratch.
There are several relatively inexpensive ‘digital publication solutions’ which can take you through the otherwise technical and laborious process of getting your own content mobile. Which option is best really depends on who you are and (unfortunately) the depth of your pockets. However, you should be careful not to overlook the fact that one man’s ‘limited flexibility’ is another man’s ‘simplicity.’ Here are some options:

