We are fully operational during COVID-19 pandemic. Get a Quote

Responsive Website & PSD Design

Responsive PSD

Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to tablets and mobile phones ). A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment-along with fluid proportion-based grids and flexible images.

1. Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

2. The fluid grid concept calls for page element sizing to be in relative units like percentages or EMs, rather than absolute units like pixels or points.

Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.

“Mobile First” and “Unobtrusive JavaScript”/”Progressive Enhancement” (strategies for when a new site design is being considered) are related concepts that predated RWD: browsers of basic mobile phones do not understand JavaScript or media queries, so the recommended practice is to create a basic web site then enhance it for smart phones and PCs-rather than try “graceful degradation” to make a complex, image-heavy site work on the most basic mobile phones.

In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. It’s about mathematics mostly, ratios and equations are everywhere in grid system design. In making the move to responsive web design, one of the important thing is maths for calculating the percentage-based widths necessary for fluid layouts. Below you can see a sample image of Grid PSD with percentage-based widths.

1000 is a nice, easy, round number that made me use 1000px width in this example. For example, if you are designing with a 960px Grid in Photoshop and you have six columns, each 150px wide, you divide 150 by 960 to get your percentage-based width.

We can get clean and better percentages value as result while dividing by 1000. Dividing by 1000 is something we can do in our heads, just remove the zero. A 160px column inside a 1000px container is 16%. A 400px column in a 1000px container is 40%. 340px is 34%. Nice & Easy!

The 960 Grid was born in a world of fixed-width layouts, the days of worrying about absolute-widths / fixed-width have passed. While building fluid designs, the simple reality is that your grid can be whatever size you want, because we are concerned only with relative widths. In general a grid system is a grid design which has been designed in such a way that it can be applied to several different uses without altering it’s form. There are so many tools/frameworks available, search in web “Responsive PSD Gird Design” and explore more ideas.

CSS3 media queries allow us to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML and CSS markup.The techniques in this article explain how we can leverage this powerful capability of CSS to also change imagery, alter the navigation on hand-held devices, and set up default CSS for compatibility older browsers.

When altering your design for different devices, consider creating multiple versions of your graphics. This can greatly affect the speed at which your design loads on smaller screens, and gives you the opportunity to customize each version of your graphic.