In less than three decades, the mobile phone has gone from being a status symbol to being a omnipresent technology that facilitates almost every interaction in our daily lives. In fact, a recent study showed that mobile search will outpace desktop search by 2015. As mobile development and responsive design continue to grow, I find myself using the same code over and over for certain things. So, I thought it would be a good idea to share some of those snippets here for you to grab as a quick resource in your mobile development.
Adding this to the header of your page will set the website to the width of the mobile browser viewport. This will prevent the scaling and zooming you would see otherwise.
In addition, you can also use the viewport setting to indicate an exact width to kick in and create a custom range for scaling on the mobile browser.
We can also use a code in the header to call up a specific stylesheet for mobile based on the dimensions only, instead of targeting a specific device.
If your mobile website uses the same HTML as your normal website, this is another way to add specific styles for specific screen dimensions (i.e. mobile and/or tablet).
These are some great quick links you can add to an element to let the user initiate a call or send a text to a specified number upon clicking it.
A lot of people find this is a simple, useful way to save a little screen real estate on the iPhone and get more of your site above the fold by hiding the URL bar. There are more complicated ways to implement it, so I've listed a couple ways I've seen it done so you can test them out.
When bookmarking a website to your iPhone, it will automatically take a screenshot. With this you can specify if you would like an icon/logo instead. The image should be 57px by 57px in .png format. You do not need to add any corners or effects because the iPhone will do that for you.
You can create rounded corners for your content boxes/areas using the webkit CSS3 rounded corners extension. This is a great way to avoid using background images or dealing with cross-browser compatibility issues. I've provided all the parameters that should give you good cross-browser support (save for IE):
Jesse is a Web Developer at Kuno Creative who regularly contributes his technical expertise to Kuno's blog. He carries a Master of Science in Mass Communications and has over 3 years of experience in web development and design.
| Follow @Jesseworldwide |
| Follow @Kuno |
