Tags Posts tagged with "Apple"

Apple

2
How to add an app icon to your website

Having app icons for your website is a good thing to include these days with the amount of iPhone’s and iPad’s in the world. If you’re wondering what having an app icon for your website means then let me explain. Apple iPhone’s, iPad’s, and iPod touch devices give users the ability to add websites to their home screen (bookmarking) as if it were an app (see image below).

Enfuzed App Icon

This is great if your website does not have an app in the app store as it can be made to look like an app and acts as a quick access point for users to your website. The problem is, if you have not made app icons for your website then it will just take a shitty screen shot of your website and shrink it down to fit the app icon size.

This is not good for a number of reasons; one being, it looks like junk; two being, when a user is sliding through their apps, yours will be easily overlooked. I used Creative Bloq as an example of a site not having app icons since it’s one of the blogs I frequent.

Bookmark without an app icon

Assuming you don’t want that crummy screenshot as your icon if a user bookmarks your website, let’s get to the “how to” on adding an app icon to your website.

Creating an App Icon

The first thing you will need to do is create an app icon that is to be used for your website. We need to take into account the various apple touch resolutions and sizes when making an icon. Here are the icon sizes for the icon (in pixels) you will need to make:

*Note that these need to be in PNG format*

  • iPhone/iPod: 57×57
  • iPhone/iPod with Retina: 114×114
  • iPhone 5/iPod Touch 5th Gen: 114×114
  • iPad: 72×72
  • iPad with Retina: 144×144

You don’t need to worry about rounding the corners, Apple will do this for you, so just make square icons. You also don’t have to worry about adding the “glare” to your icon, as Apple will do this for you as well, but we will get to this later.

Now that you have all of your icons created, you’ll need to add them to your website’s directory naming them as follows so apple will recognize them:

  • iPhone/iPod: touch-icon-iphone.png
  • iPhone/iPod with Retina/iPhone 5: touch-icon-iphone-retina.png
  • iPad: touch-icon-ipad.png
  • iPad with Retina: touch-icon-ipad-retina.png

The Code

We have our app icons made in all device sizes, we’ve named them accordingly so Apple will recognize them, and we’ve added them into our website’s directory. Now we have to add the code to the head of our website. There are two ways to present your app icon to viewers:

  • The regular way – which includes the “glare” over top of the icon
  • The precomposed way – which shows the app icon as is

If you wish to show the icon “as is” (meaning just as you made it) then just add the words -precomposed after “apple-touch-icon” in your code. If you want the famous apple “glare” over your icon, then just leave the rel=”apple-touch-icon”.

Now to the easy part, just copy and paste the following code making sure the file paths are correct. We have chosen to leave our app icon “as is” which is a flat look, so we added “-precomposed” to the end of our rel:

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-ipad-retina.png" />

That’s it! Now you can navigate to your website on your Apple touch device, click the add bookmark button and see your new app icon on your home screen. Please make sure all of your files are named properly, your images are in the right format, and your file paths are correct.

Test It

Here is how you can add a bookmark to see if it worked. Navigate to your website and click the middle button (pictured below) to bring up a menu.

Apple Safari Bookmark Icon

In the middle of the menu you will see your icon and under it it says “Add to Home Screen”. Click this.

Add to Homecreen Bookmark button

Next it gives you the option to name your bookmark, this will be the name that appears under your icon on your home screen.

Adding name to bookmark icon

Useful Resources:

Safari Web Content Guide – Configuring Web Apps

iOS Human Interface Guidelines – Custom Icon and Image Creation Guidelines

0
Free iPhone Mockup PSD

Ever wonder where designers on dribbble and behance get those stunning iPhone screenshots to display their beautiful mobile UI designs? They come from mockup PSD’s like the ones below that Joe Mortell created. These two white and black iPhone mockups can be downloaded free of charge for you to use to show off your mobile UI designs in stunning fashion.

White iPhone Mockup PSD by Joe Mortell

White iPhone Mockup PSD by Joe Mortell

Black iPhone Mockup PSD by Joe Mortell

Black iPhone Mockup PSD by Joe Mortell

**Click the title link or the image to direct to the download page**

3
iOS 7 App Icon Guide by Seevi Kargwal

After the recent announcement of Apple’s new mobile operating system, iOS 7, I figured it would only be appropriate to relate today’s freebie to iOS 7. One of the bigger and more noticeable changes (besides the “flat” design) is the change in icon size. iOS 7 app icons are now 120px (compared to the previous size of 114px) and the border radius is now 27px (compared to the previous 20px).

With this change comes the need to change the size of your apps icon(s). Thankfully Seevi Kargwal designed this iOS 7 App Icon Guide in PSD format to help ease the redesign process. You can check out more of Seevi’s work on his dribbble and behance.

iOS 7 App Icon Guide by Seevi Kargwal

iOS 7 App Icon Guide by Seevi Kargwal

**Click the title link or the image to direct to the download page**

0
ios7-reimagined

Just days after Apple’s newest mobile operating system, iOS 7, was announced at the 2013 Apple World Wide Developers Conference (wwdc) designers across the world are already redesigning it. Critics are upset with how the new iOS was designed, being a mix of flat with a dash of something else.

One of the more odd changes was to the icons,changing the overall size from 114px to 120px and increasing the border radius from 20px to 27px . So here we will look at just a few of the hundreds of redesigns already on the internet. You can view Apple’s Original iOS 7 design here.

iOS 7 Reimagined by Zane David

iOS 7 Reimagined by Zane David

iOS 7 Reimagined by Zane David

iOS 7 by Dmitry Kovalenko (design team lead @Readdle)

iOS 7 by Dmitry Kovalenko

iOS 7 Icons Redesign by Ida Swarczewskaja

iOS 7 Icons Redesign by Ida Swarczewskaja

iOS 7 Redesign by Leo Drapeau

iOS 7 Redesign by Leo Drapeau

iOS 7 Icons by Jackie Tran Anh

iOS 7 Icons by Jackie Tran Anh

iOS 7 Icons by Jackie Tran Anh

iOS  7 Springboard Redesign by Doney Den Ouden

iOS  7 Springboard Redesign by Doney Den Ouden

iOS 7 Icons by Matthew Skiles

iOS 7 Icons by Matthew Skiles

iOS 7 Redesign by Michael Boswell

iOS 7 Redesign by Michael Boswell

iOS 7 Redesign by Michael Boswell

iOS 7 Icons by ididi

iOS 7 Icons by ididi

iOS  7 Control Center Redesign by Sam Nissinen

iOS  7 Control Center Redesign by Sam Nissinen

iOS 7 Control Center Redesign by Clement Ng

iOS 7 Control Center Redesign by Clement Ng

iOS 7 Safari Icon Redesign by Tim Poot

iOS 7 Safari Icon Redesign by Tim Poot

iOS 7 Safari by Apostol Voicu

iOS 7 Safari by Apostol Voicu

Safari by Anon Wuttowsky

Safari ios 7 icon by Anon Wuttowsky

iOS 7 Maps by Gabriel Ghnassia

iOS 7 Maps by Gabriel Ghnassia

*Note that all of these redesigns were done for fun*

1
iOS 7 Close Up Look

There has been tons of speculation as to what Apple’s new iOS is going to look like and what it will feature. One of the biggest speculations for the new iOS 7 is it’s axing of the skeuomorphic design and it’s switch to a flat user interface. Like we’ve said in previous articles,  flat UI has become a big hit in recent years and it would be hard to believe if Apple didn’t follow suit.

SimplyZesty, a full service digital agency, has put together this video showcasing a mock up of what they believe the new iOS 7 could look like based off of rumors and speculations. I think they did a good job with it, it is definitely a concept that could become reality when they announce the new iOS at WWDC June 10-14th in San Francisco. (Video Below)

iOS 7 Concept Designs by SimplyZesty

iOS 7 Concept Designs by SimplyZesty

iOS 7 Concept Designs by SimplyZesty

iOS 7 Concept Designs by SimplyZesty

iOS 7 Concept Designs by SimplyZesty

iOS 7 Concept Designs by SimplyZesty

Video

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods