Responsive Web & Graphic Design

It’s the age of smartphones and the internet. The number of smartphones user across the world has increased subsequently. As per Wikipedia “the amount of mobile traffic now accounts for more than half of total internet traffic.” because they come in handy. It is therefore been very necessary for websites to be compatible with the smaller screen too along with computers. A set of coding is to be done to make the websites look attractive to a smaller screen as well. Responsive Websites has since been a separate topic for web design. Companies invest dollar over their websites.

Responsive Web Design in a general sense means, the websites behavior to adjust itself to resolutions, screen size, orientation, platforms, etc.

Getting started with Responsive websites

CSS- Responsive websites can be created using CSS with media queries and transitions. Media query gives a range of resolution where a website would act as specified and change when the resolution changes. Transitions make the websites look cleaner and attractive. What happens is when we resize the browser window and the resolution changes websites design shifts directly to the next design making it look ugly. Transition adds attractiveness to it.

Design is the Key attraction

What we all know are the looks? When a visitor comes to a website, it is all about the looks & the design that attracts and keeps the visitor to stay on the website. The design of the website needs to be creative & the ideas should be unique. The graphic designer should show his innovation on unique graphic design ideas. The design is crafted on .psd which is later on shifted to the responsive HTML format.


Motiongraphic designs ideasare similar to craft and are designed with an intention to be experienced over a fixed time range or an online video that clarifies some portion of a paper article. They more often than not go past the visual, curating and promoting the sound of moving vector designs, photos, and video. The distinction between movement designs and videography or activity is equivalent to the contrast between two-dimensional designs and representation. Motion illustrations join liveliness, videography, and typography for an open reason, and this blend after some time and the space of the screen comprises the structure.

Crafting, a type of natural designs, alludes to marking connected all through and on structures or open-air zones like parks or thruways. While each sign or image in crafting is a work of structure, together the structure is the bigger framework that enables individuals to explore while keeping up a feeling of the character of where they are.


Frameworks are packages of HTML, CSS, jQuery or JS combined in folders of standardized code. The framework gives you an easy approach to make responsive websites according to your need. Out of the many few popular frameworks are mentioned here.

  1. W3.CSS- w3css is a responsive style sheet. It is easy to use.
  • Foundation- Foundation is another responsive framework. It had attracted attention for its functionality and rapid-prototyping capabilities. It is quite useful for new users and is easy to learn. Foundation features a floated grid system

3.       Pure: it contains responsive modules. It could be an alternative to bootstrap. Pure is a very small program and has an easy to follow guide to get you started.


  • Easy to operate
  • Lesser number of codes to be written
  • Individual with less HTML, CSS knowledge can work on it


  • One framework isn’t enough to achieve everything. You have to jump over frameworks
  • Some code can’t be modified according to our needs. It can only be extended but modified.
  • In a framework, the program’s flow of control is done by the framework and not the user. In case the framework gets corrupted the whole website crashes. 


There are a number of responsive frameworks but for a newbie, it would be smart move to know the traditional way for responsive websites i.e. using media queries. Media queries give you in-depth commands over your web pages. Once you have some knowledge about that one can move to frameworks for more efficiency and control. Choosing which framework is good for you isn’t an easy answer. You have to go through different frameworks to know what suits you best.

One Response to Responsive Web & Graphic Design

Leave a Reply