To achieve this we used a combination of CSS and Javascript breakpoints we had set up.
All the styling for this is now fully responsive so between the various resolutions the content re-sizes and scales appropriately.Ĥ - Blocks - Move any blocks around in the page structure at the different breakpoints to ensure the blocks are still displayed in appropriate places. For desktop we retain the same three column layout, for tablet we made both sidebars drop into one, and mobile causes the page to go into a single column layout. We switched the site base theme to Zen 5.x to give us a responsive layout with a fluid grid system to work with. APM had previously followed a 960px fixed grid system, consisting of 16 grid columns used to form a typical “three column” layout. We also have a non-javascript fallback which displays the slightly restyled menus in the site header instead, to ensure people can still navigate the website with javascript disabled.ģ - Change the grid system (if applicable) from a fixed grid system into a responsive one that will work well at all different resolutions. This delivers the familiar menu experience found across many mobile websites and apps. Once the hamburger menu icon is activated we ‘slide’ it in from offscreen, keeping half of the page body visible with the menu taking up the rest of the screen. 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.
#Drupal responsive grids code
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.
#Drupal responsive grids upgrade
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. html ).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. ONE TWO THREE FOUR FIVE SIX SEVEN EIGHT NINE TEN ELEVEN TWELVE Īdd some basic styles. In a few lines of code, you can create something like this: But it might not be as hard as you think to code your own. Many developers jump to a web design framework for their responsive grid needs. The modern solution is a responsive grid that changes based on the size of the screen viewing it. Are you trying to build a grid of elements? If so, you’ve probably noticed one size doesn’t fit every screen size.
0 kommentar(er)
