Introduction to Responsive Web Design

Buzz or Something Much More

Responsive design seemed like so many other buzz terms when it came on to the scene. But those who have been indoctrinated into the vastly changing mobile devise design and development world have seen this revolutionary invention as a ticket to freedom.

So with this said I figured I’d put together a little synopsis of what we see after a couple years in the making. A little about the resources available, the major players and how to get started responsively for your business, design firm or development team.

Responsive Web Design

Coined by Ethan Marcotte in a A List Apart in May of 2010 as RWD or Responsive Web Design rapidly became excepted as a new standard of web. Responsive design was recognized by .net magazine as the #2 Top Web Design Trends of 2012 stating “It’ll be like the standards movement all over again.”

responsive layouts

The Major Players

Who do you know that’s actually using responsive web design? Is this just something all those big framed glass wearing start-ups are using? NO would be the strong answer.

Let’s see! Last I knew from an article I read from the man himself, Ethan Marcotte, stating ginormous companies such as Microsoft, General Electric, Disney and Starbucks (who even published there style guide for all to see).

So smart companies with great business minds are seeing the effectiveness and longevity of these new standards why wouldn’t we want a piece of the action. Is it out of our reach? (See strong answer above). As we even saw with Starbucks tools are being freely handed out for us to use it’s only a matter of knowing where to go to get them and what to do with them once we find them.

Open Re-Sources

Now in 2013 we have seen the progression of two major contributors in the field of responsive design resources. These contributors in the responsive world are none other than Twitter with Bootstrap, which is well into it’s second version, and the new kid on the block, but definitely a contender, Foundation by Zurb with it’s fourth edition just released.
twitter

 

zurb

Both Bootstrap and Foundation are built on a 12 column grid system which acts as a wireframe holding all the dividers and elements in place. Changing the position in Foundation per device is as simple as using small and large classes in CSS. Bootstrap has a built in standard of the class span with a number 1-12 following which defines the columns used per element with a default of full width for smaller devises.

There are plenty of similarities and differences in using the two open source structures for your responsive site and both have provided incredibly detailed and easily understood documentation. I will be getting into both in more detail in the following posts.

Other Words to Know

Next I will be getting into the terms Adaptive and Fluid. Understanding these terms will be crucial in understanding why responsive really works. Coming Soon…

 

Proyecto Perspectivas Application Design

Proyecto Perspectivas Publication Becomes an App for iPad

Revista Perspectivas is a publication dedicated to document and recognize outstanding design and works of architecture in the Central American region.

Published every three months, this publication, developed by Proyecto Perspectivas (PP) a Guatemalan based company, aimes to record selected projects in arquitectural, urban, industrial, interior, textile and jewelry design as well as landscaping.

Issue # 15 is the first edition to go digital. Pixelscut helped PP make that happen. In collaboration we created the Icon, Landing Page with a strategic QR Code announced in their magazine and developed the Perspectivas application with custom design for iPad. The APP is an interactive version of the magazine which contains music, images, voice overs, video and social media integration. This APP will be available May 17th of 2012 to download for FREE in the APPStore with the other editions to come soon.

perspectivas de arquitectura y diseño

PP hosted a party at Plaza El Globo with over 400 guests launching the new edition of the magazine and their new application.