Responsive Design Team

In the field of Web design and development, we’ve reached the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device with adaptive design would be impossible, or at least impractical and definitely not cost effective. Responsive Web design is the approach where design and development respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

A framework is a set of standardized concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to approach and resolve new problems of a similar nature. !!In the world of web design these are defined as a package made up of a structure of files and holders of a standardized set of code (HTML, CSS and JS documents) which can be used to support the development of new web based projects or as a basis to start building web based solutions. !!The aim of frameworks is to provide a common structure so that developers don't have to start from scratch. In this way, frameworks allow us to cut out much of the work and save a lot of time. !

What are Frameworks?

There are many frameworks available.!A few examples:!!•  Foundation!•  Twitter Bootstrap!•  Gumby!•  Unsemantic!•  Skelleton!!Based on the established criteria, this group, made up of impartial, multi-agency personnel, designers and private consultants, recommends Twitter Bootstrap.!!It is the most feature-rich framework and it allows you to build pretty much any type of web project.!!

Frameworks

1. Bootstrap is built on responsive 12-column grids, layouts and components. Whether you need a fixed grid or a responsive, its only matter of a few changes. Offsetting & Nesting of columns is also possible in both fixed and fluid width layouts. Another useful set of features are the responsive utility classes using which you can make a certain block of content appear or hide only on devices based on the size of their screen. Very handy when you want to hide some content based on screen size. Adding a class such as .visible-desktop to a element, will make it visible only for desktop users. There are similar classes for tablets and phones. 2. A website has many different elements such as headings, lists, tables, buttons, forms, etc. All these fundamental HTML elements have been styled and enhanced with extensible classes. The HTML elements for which styles are provided are:

•  Typography •  Code •  Tables •  Forms •  Buttons •  Images •  Icons

!

5 Reasons we recommend Bootstrap

3. Whether you need drop down menus, pagination or alert boxes, Bootstrap has got your covered. Styling of every single element follows a consistent theme and if you know LESS, then customizing it takes just few minutes. Some of the components pre styled are:

•  Dropdowns •  Button Groups •  Navigation Bar •  Breadcrumbs •  Labels & Badges •  Alerts •  Progress Bar •  And many others.

4. The components such as drop down menu are made interactive with the numerous JavaScript plugins bundled in the bootstrap package. If you project requires sliders, tabs, accordions, then you no longer have to try and test numerous different plugins across the web. Adding these functionalities is just a matter of adding few lines of code and you are all set. One of the requirements set forth for this recommendation is standardization, these features would be available yet uniform across all government web projects. With the customization option you can also choose only certain plugins to keep the file size to a minimum. 5. Good documentation. Not only does Bootstrap offer styling for almost every element a typical website or web application requires, it also provides a great documentation with examples and demo that only make it more easier for even someone new. !

More Recommended Best Practices:

Menu Fallback

No Absolute Dimensions

NO FLASH!!!

No technology where the user has to download a

support plug-in

NO GIF!!! Graphic Image

Format

No Embed Audio or Video

No Browser Exclusivity

Limit Animations to Simple Animations

Limit the Javascript in the Design

Validate with

W3C validator

1.  Eduardo Cuyar 2.  Rogelio Albandoz 3.  Eliud Echevarría 4.  Dianelle Rodríguez 5.  Javier Vélez Rivera 6.  José Márquez 7.  Alexis Torres 8.  Maribel Rodríguez 9.  Julio Malavé 10.  Joel Calderón

Responsive Team Coach: 1. Roberto Rosario 2. Helga Carrero