To recap: at resolutions larger than 768px both main menu and portfolio filters on my site have drop-downs which are displayed on :hover. Looking for best practices tips for responsive WordPress interface? Check out our article “WordPress featured posts in a horizontal scrolling container.” And this meant that for touch screens from 768 px up :hover generated double tap was there and needed attention. So I have decided to code prowebdesign.ro accordingly. Me, I prefer to see more desktop-like versions of sites on iPad. It depends on many things: from site visitor statistics to your personal preferences. Discussing this in detail is beyond the scope of this article. As for the portfolio filters, I decided not to display them at all on devices with small screens.īut what about touch screen devices with larger resolutions, like tablets?įirst of all, you need to decide what variant of layout you will want for those devices. They take up almost no space, eliminate :hover interactions, and can hold a large number of links.

Toggle-menus are great for user experience on mobiles. This is probably the best solution available to web designers so far. On those main menu is a collapsible toggle-menu, which expands on click. Problem was eliminated completely on all devices with screen width less or equal to 768 px.

While coding prowebdesign.ro we ran into double tap behavior twice: with pure CSS main menu drop-downs, and with portfolio sorting filter drop-downs (see Filter 1 and Filter 2 on this page). Looking for a really simple responsive HTML/CSS template to kick start your project? Check out our FREE Simple Responsive Template

Wpd viewer doesnt work on tablet