Skip to Main Content

Responsive Design Pack 2015

Posted on 3.30.2015

It seems every website is being built with a digital eye toward responsiveness. The benefits are many of course (consistency of experience, better performance, etc.) but a responsive design initiative can be a complicated undertaking if you don't have the knowledge and resources to make it all come together.

Website Magazine has put together some useful tools, approaches and solutions (as well as numerous articles and posts) in its "2015 Responsive Design Pack," a guide to help designers build a bold and beautiful digital presence that will work anywhere - from the desktop to the vast array of mobile devices.

What you'll find below is a rough workflow for a broader responsive design initiative, ranging from some strategy basics to several tools and frameworks which make responsive possible (and more awesome than any available alternative). Keep in mind that the responsive approach to design is evolving rapidly; Website Magazine will routinely update and build out this list in order to provide Web professionals like you the latest and greatest information available.

~~~~~~~

Strategy, Concepts & Approaches: Website Magazine has written at great length about the broader concept of - and approach to - the practice over the past few years (readers can explore a few of those articles and posts on responsive Web design below that have been featured in the Design & Development Digest channel) but there is always more to know and better tactics emerge regularly to help optimize the user experience.

With a formal strategy in place, you'll know what to do and what to avoid; fortunately, there are also many popular tutorials available on the Web for designers and developers looking to know more about the practice (here and here for example), and even a few books for those that really want to dive in head first to these virtual waters. One of the best is Responsive Web Design in 24 Hours, from the Sams Teach Yourself series (and written by Jennifer Kyrnin).

+ 5 Examples of Responsive Design in Online Retail
+ The Pitfalls of the Responsive Design Approach
+ SEO Benefits of Responsive Web Design
+ 4 Critical Steps to Making Your Website Responsive

Tools & Frameworks: Perhaps the best part of adopting a responsive design today is the breadth of resources available to help websites get started. Most professional website builders use Adobe today, and that system's ability to help brands websites become responsive in undeniable, but there are also numerous frameworks, boilerplates and prototyping tools available for those looking to do it themselves. Bootstrap, for example, is one of the most popular responsive frameworks, but Website Magazine routinely and regularly covers popular and emerging solutions for designing a responsive website with the help of frameworks including Foundation (from Zurb) and others. Check out a list of essential front-end and back-end frameworks, boilerplates, prototyping tools, visual editors and more for designers and developers below.

Frameworks/Boilerplates: Maxmert, Gumby, Cardinal, Pure, Wirefy, Awesomeness, Cascade, Kraken,

Digital Bells & Whistles: Once the strategy is set and the foundation established, designers can start adding in all those necessary bells and whistles that are required today to impress users and provide a functional service.

Typography: FitText, Fitter Happier Text, CircleType.js
Images: Picturefill, ReSrc.it, Responsive.io
Video: FitVids.js
Charts/Graphs: Pizza Amore, Chartist.js, Chart.js, HighCharts,

WebsiteMagazineMiniLogo

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code

  • Unlimited potential. Unlimited names. .COM's just $9.99 each!

    5 Next-Generation Supplier Strategies

    Tipalti