The conversion of your PSD (Photoshop) files into Responsive can empower you to own a powerful and feature rich website with cross browser and cross device compatibility. However the PSD to Responsive conversion process is not an easy one, so to fully understand the process let’s speak about Responsive first. Smartphones, Phablets and tablets has changed the way people browse the internet. These handheld devices have made viewing contents on the web much easier. We are no longer constrained to browsing only on our desktops or laptops. Now we can access any information on the web from anywhere and on any device and thus each and every website had to adapt to all the screen resolutions to provide the best optimum viewing experience. This innovation has made everybody rethink about the functionality of their website.
since then the web design environment has changed drastically, and it was imperative for business owners to provide the same experience to the users of browsing the websites on their handheld devices as it would have been on any laptop or desktops. thus the idea of rwd (responsive web design) evolved and everybody has embraced it to provide the best optimum experience to their end users.
responsive web design is the process designing a website in various resolutions so that the website adapts to the various screen sizes and enables a user to easily read the contents of the website and navigate through the various pages with the option to resize, pan and scroll. to be more precise, rwd means when a user switches from their laptops to ipads the website should adapt itself to the screen resolution of the ipad, the images and other contents should adjust accordingly so that the user can optimally view the website in the platform/device he is viewing on.
here is a list of the features that are considered while following the responsive web design
1. adjust screen resolution - now a days there are devices with varying resolutions and screen sizes and orientations (portrait/landscape). there are the iphone, ipad, various android devices, phablets and tablets; each and every of these devices has varying screen size and resolution. the various screen resolutions are 320*240, 480*320, 800*480, 1024*768. so to make a website fit in these screen resolutions automatically we use the following
a) fluid grids - the flexible/fluid grids enable the web page to easily adjust itself to the height and width of the device it is being viewed on. the main concept is resizing the webpage in relative measurement units like percentage, rather than using absolute measurement units like pixels, or points
b) flexible images - the images are resized to adjust itself in the resolution it is viewed on, it is very important because doing so will prevent the images to be displayed outside their containing element. there are various ways for creating fluid images
i. hiding and revealing portions of images
ii. creating sliding composite images
iii. foreground images that scale with the layout
c) css3 media queries - it allows the website to adjust to the width of the browser it is being viewed on. it uses different css style rules based on the characteristics of the various devices/platforms the website is viewed on