![]() With some CSS and Javascript trickery we can make the menu initially appear offscreen. To achieve this - we initially hide the primary & secondary menus with css, then use javascript to move them into a separate “offscreen” div. ![]() APM had a large number of links in the primary and secondary menus, so we decided to go for the “hamburger” menu approach to maximise the use of available space, showing both primary and secondary menu links on the side of the screen once the menu is activated. Breakpoints.js allows us to fire custom events when the browser enters/exits the breakpoints that we’ve defined, which in turn enables us to run specific code in reaction to the firing of these custom events.Ģ - Create a mobile device specific menu that would replace the standard desktop menu. ![]() Using the excellent breakpoints.js, we also setup the same breakpoints in Javascript that we had defined in the CSS. We chose not to have separate mobile/tablet/desktop style sheets, instead adding the appropriate media queries into the respective modular css files. For APM these were 320px - Mobile, 768px - Tablet, 960px - Desktop. Crucially the site is now receiving a near perfect score from the google mobile friendly test tool.ġ - Work out the appropriate breakpoints where the site will transition from mobile to tablet to desktop, based on your current design. Now post upgrade, the site is fully responsive, displays and functions well across mobile devices, tablets and desktop browsers. More information about the change - which is commonly reffered to as ‘mobilegeddon’ can be found here ĭue to these new changes, we have recently completed a responsive upgrade to a clients website - which was previously unresponsive and only displayed well at a typical desktop browser resolution (960px). This change is likely to have a big impact on many Drupal sites, and ComputerMinds have seen a surge in requests for retrofitting responsive themes onto existing Drupal sites. On April 21st, Google updated their mobile search algorithms to boost the rankings of mobile-friendly web pages, whilst conversely decreasing rankings for pages that have been designed only for large screens.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |