Archive for the ‘iPad’ Category
Being a salvation for Apple geeks, the iPad caused a painful headache for web designers that faced the layout issues. And some time ago we’ve started thinking on this and highlighted web design issues that might occur with developing websites for the iPad. In general creating website layout with the help of CSS is not really that much of a challenge for the experienced web designer. But the whole nature of the iPad will surprise with some small problems that will cause a real pain in you-know-where while trying to fix them. So while a creating website or optimizing it for iPad you should remember several important things about CSS and the iPad.
Links and Hover effects
Yes, the iPad has a touch screen and you have to use what appears to be a totally different technique for placing and displaying links at your website. It means that you have to avoid links in text placing them aside and marking them out to make them larger (actually it also concerns all other interactive elements of your website). Such great CSS effect as hover will not be user-friendly for touch screen and you should consider that too. And don’t forget that jQuery mouse events are not for iDevices either, so you’ll gain some extra problems along with them (for example you have to click the link twice, first time will show you a hover, second time will actually click the link).
Fixed position
If you want to use such CSS property as
position: fixed
it won’t be working in Mobile Safari. Front-end developer Richard Herrera has mentioned at his blog that this happens because:
Imagine a book in front of you. Take a piece of paper, cut a 320×416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want to see. This is exactly what Mobile Safari’s viewport is doing. When you flick and scroll, you’re moving the viewport around while the website behind it stays static.
Interesting solution on how to fix this is offered by cubiq.org in their Scrolling DIV on iPhone and iPad devices article.
Orientation
The iPad. The killer word coming off everyone’s lips lately… This is the newest mobile computing device (a.k.a. Apple Tablet) that claims to revolutionize how we consume web content. We must admit that this tablet has huge potential, so many people already want their website to be perfectly optimized for this recently unveiled gadget.
What do they need to do when designing pages to perform on this interesting Apple invention? For general design principles, we’ve rounded up a few options below that will give a little guidance. Now’s the time to keep your eyes open for the iPad-optimized design tips:
Specific Features of iPad Display
iPad has the high-resolution, 9.7-inch (screen resolution of 1024×768 pixels) LED-backlit IPS touch-sensitive screen which is remarkably vivid for web browsing, media consumption, gaming etc. Its tactile and luscious interface invites amazing close-ups putting the objects almost literally in the hands of the gadget user.
- Landscape and Portrait Mode Styling
The iPad allows for both horizontal and vertical style viewing. This will pose some interesting possibilities for web designers to incorporate features that wouldn’t have worked before. The point is that the styling has completely changed when the orientation changes, and for the designers this means two completely different layouts for which to design.
The fact is that the iPad marks the return to magazine formats introducing the web’s first truly vertical screen orientation. While computer monitors have always had a landscape styling, now we can see a lot of web content consumption in a vertical mode which will result in new web designs and web information architecture.
Since the portrait mode encourages vertical scanning and the user can now see the entire page without having to scroll, web pages will no longer be viewed one half at a time and the designers can finally design pages that are meant to be scanned and read all at one time. This vertically-inclined resolution means that versions of the websites for the iPad will get narrower and taller. The landscape mode in its own way makes it very easy to browse sites that display content horizontally. It’s for this specific reason that more of an emphasis is placed on smart and fluid layouts that can easily work both ways adapting the content according to the screen resolution.
Follow TemplateMonster Updates
Rss Feed: