Join James Williamson for an in-depth discussion in this video Adding home screen icons, part of Applied Responsive Design.
If you've designed a website or two, you've probably created a favorite icon--…you know, that tiny, little icon that displays in the address bar when somebody visits your site.…Well, for mobile devices we can actually go one better and create icons that will display…on the phone's homepage or home screen and allow people to launch your site the same…way that they launch apps.…So to do that, I'm actually--first here in Photoshop--just to kind of show you what you need to…create to cover all of your bases here,…I've got four pngs that I've created. Very simple logos with the desolve logo on it on a gray background.…
The first one is named apple-touch-icon- precomposed.png, and this is a 57x57 pixel icon.…I have the apple-touch-icon-72x72.png.…You see this is just a larger version, 72x72.…I've the apple-touch-icon-114x114.png.…And of course I have the 144x144.…And these are going to be used on different displays,…so the older iPhones are going to use the smaller icons; the larger iPads with the retina…
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites
Skill Level Intermediate
1. Planning Responsive Designs
2. Building Responsive Layouts
3. Responsive Navigation
4. Creating Responsive Media
5. Enhancing Sites for Mobile
6. Managing Resources
Additional resources4m 10s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.