Every good responsive design starts off with a solid grid that determines which content will get wrapped, reduced in size, or pushed down the page, as the screen size gets smaller. There are a number of great tools for accomplishing this, but SimpleGrid is easily one of the best. The system is designed to work with basic, CSS-driven frameworks, and can be used to generate a basic responsive grid with as many as six columns. With built-in CSS classes and a robust amount of documentation, developers will find that this is the best foundation on which to build their more mobile and responsive design.
The Bootstrap framework is a key overlay for a grid-based layout, enacting sensible design elements that cater to users of smartphones, tablets, and desktops alike. Best of all, it comes with a unique "Customizer" feature that can be used to customize virtually every included design element. This makes it a sensible option for first-time responsive developers or those new to web design entirely. The system is developed by the folks at Twitter, and it offers one of the most robust developer communities of any major framework currently available. Furthermore, Bootstrap is one of the most popular and widely used frameworks on the market, implemented on a number of top-tier websites around the world.
4. Fluid Responsive Slideshow
5. Genesis Framework
WordPress users have long sought a reliable framework built with their content management system in mind, and the Genesis Framework is exactly that. The framework was built by an independent template development company and, perhaps best of all, it comes with a vast WordPress control panel interface that allows for intricate column control, design modification, and more. Thanks to integration with a large number of templates and a column-based grid system that caters to desktops first, then mobile devices, the Genesis Framework is among the most popular options for WordPress-specific designs and portable content creation.
6. Responsive Slides
Most grids used in responsive designs are "fluid" meaning that they scale with the design as it gets smaller. Some developers prefer to simply "cut off" content and push it down when the browser viewport reaches a certain reduced width. When this is the case, Frameless is the best option. It allows for an unlimited number of columns that will stretch infinitely, with CSS-designated break points that will give the design a more static feeling on each platform.
8. Adobe Edge Inspect
If a responsive design doesn't properly scale down when a visitor comes to a website via a smartphone or tablet, then all of the time spent learning about grids, columns, and frameworks will have been for nothing. Instead of taking a chance on success, developers should consider using Adobe's "Edge Inspect" tool. The tool can be used to go to a website on its own, slowly scaling down and checking the site for effective responses as the screen sizes get smaller, rotate into landscape mode, and perform other common tasks done by today's smartphone and tablet users.
9. RWD Calculator
Getting the right column width, element size, margin, and padding, can be pretty tough within the confines of responsive design. For those developers who don’t want to spend the time doing the math themselves, the RWD Calculator can easily evaluate a few pieces of data for a given design element and then return the perfect width, height, margin, and padding, so that the element doesn't force the website to be too wide or unusable on smaller devices.
10. The Responsive Grid System
The Responsive Grid System, which sometimes is called Responsive.gs by developers, is a unique grid-based design method that can expand up to 24 columns in width. The system is designed as a "mobile first" implementation of responsive design, setting it apart from the many desktop-first grid layouts that are used by a larger number of developers. For those catering more specifically to mobile devices, this is a great way to design content that is mobile-friendly from the ground up.
11. The 1140 CSS Grid
The 1140 CSS Grid uses a 1140px implementation of responsive design that is designed to work perfectly on a desktop display of 1280px in width or larger. When that display gets smaller, the design becomes fluid and naturally adapts to work with even the smallest viewports. It's yet another way to create a solid and responsive foundation for more complex and CSS-driven web designs.
For those who are not sold on Adobe's Creative Suite and Creative Cloud products, Responsinator is a solid, web-based alternative to the Edge Inspector. The tool can show how a website will look on any viewport, ensuring that the design is bug-free and ready to go on smartphones, tablets, and desktops alike.
13. Adaptive Images
When a site's written content needs to be reduced in size to meet the smaller viewport found on a smartphone or tablet, images must follow suit. That's actually easier said than done, as images don't naturally scale very well, or at all, in most cases. For several years, early responsive developers have used a series of hacks and tag modifications that have gotten the job done in a sloppy manner. Now, with Adaptive Images, that is no longer the case. The script actually detects the device's viewport size and, with the help of a PHP script and the .htaccess file, scales images and uses better versions for each device's width and display. The days of complex, standards-breaking hacks are over.
Where Bootstrap is customizable and easy to learn for new developers, Foundation is the polar opposite. The Foundation Framework, while easy to learn, is the most advanced system currently available to mainstream developers. With a number of mobile-first design elements and column implementations. Foundation can be used to create truly unique sites that don't easily show off their column-dense design. For those that believe in unconventional design that breaks the mold, Foundation represents the best ally for making such design available to a wide segment of mobile device users around the world.
15. Adobe Dreamweaver CS6
Adobe's latest version of Dreamweaver comes with a fluid, responsive design template that integrates media queries and CSS3 design cues that will make developing responsive layouts easy for those new to designing in the first place. Thanks to the WYSIWYG nature of Dreamweaver, and the fact that it integrates perfectly with Adobe Edge Inspector, it's possible to see a design develop visually on all viewports at once.
16. Fluid Grid Calculator
Getting the right grid width is pretty tough, especially for developers who aren't used to the nature of responsive web designs. The Fluid Grid Calculator determines the appropriate grid width for each need, making it easier to develop columns and an appropriate CSS file.
18. Retina Images
19. LESS Framework
Though it has been replaced by Frameless in many circles, the LESS Framework is still offered to developers and it represents a really great way to create a simple, responsive design using a large number of columns. Perhaps best of all, LESS was one of the first frameworks to promote different designs for portrait and landscape modes on today's mobile devices. It remains one of the only solutions for doing so, although the Frameless successor has enabled this functionality as well. For those looking for something a bit more basic than Frameless, LESS Framework is a solid option.
No responsive design is worth risking functionality in early versions of Internet Explorer, as well as any other browser that doesn't support CSS3. CSS3, as many people know, is key to using things like media queries, CSS-based rounded corners and drop-shadows, and many other unique design elements that don't even require graphics. The Respond.js framework detects these limitations and compensates for them, essentially bringing CSS3 compatibility to browsers that have long been abandoned by Microsoft, the Firefox team, and other development circles.
A Wealth of Tools and Information for Those Embracing Responsive Design
From bare bones grid generation to advanced frameworks and design tools, it's never been easier to develop an engaging and unique responsive design. Developers can take their pick of numerous frameworks, a few great grid options, and tools, that will make it possible to scale images and check for browser incompatibilities. With the right combination of the tools mentioned here, web designers will find that responsive design is far less intimidating, and much more easily implemented, than the wider web development community would have them believe.
By: David Walsh