5 ms·
I updated an older website last month that was built on a static 960 grid and converted it to a responsive layout by doing the following: * Split the framework
by neovive 12y ago
I updated an older website last month that was built on a static 960 grid and converted it to a responsive layout by doing the following:
* Split the framework's grid CSS from the actual website styles.
* Used media queries to conditionally load the framework's grid.css only on larger devices and load a dedicated mobile.css on smaller devices.
The mobile.css focuses on improving the mobile experience by increasing the spacing of elements, converting display properties to "block" (where appropriate), and hiding extraneous design elements (ideally, this should be done on the server prior to downloading), collapse the navbar into a slidedown "hamburger" menu, increasing font-sizes and clickable area's on links.
Google's Web Fundamentals for Multi-Device Layouts (https://developers.google.com/web/fundamentals/layouts/?hl=en https://developers.google.com/web/fundamentals/layouts/?hl=e...) and Mobile-Friendly Test (https://www.google.com/webmasters/tools/mobile-friendly/ https://www.google.com/webmasters/tools/mobile-friendly/) were very helpful.
- e40 12y agoI would love to hear more about how you did this: collapse the navbar into a slidedown "hamburger" menu. Can you point me to any resources for doing it? Thanks.
- misterbwong 12y agoI'm not grandparent but usually people have a hidden nav that shows on smaller screens using media queries
- dmdeller 12y agoCheck out Bootstrap's 'Default navbar' example. It does this. http://getbootstrap.com/components/#navbar-default http://getbootstrap.com/components/#navbar-default
- neovive 12y agoSure. In the default desktop page, the navigation menu is a traditional horizontal navbar (a styled unordered list). * When the media query for mobile devices is triggered, the mobile.css is loaded which, among other things mentioned above, hides the navbar and overrides the previous styling in the embedded list with: .navlist li { display: block; margin: 15px 0; text-align: center;}. The new CSS changes the layout of the navlist to a centered, vertical list. * Another div with an id of #mobilemenu (hidden by default in the desktop css) is absolutely positioned in the top right corner of the page. That div contains a small hamburger menu png icon. * jQuery is used to capture the click event and toggle the mobile navigation menu: $("#mobilemenu").click(function () { $(".navlist").slideToggle(500); });