followers 4 popularity
following 1

followers  view all

following  view all

jackcalder is not in any groups


Web Design, Web Development, Website Development, WordPress, CMS, Marketing
Jack Calder | jackcalder

Avoid Responsive Design Mistakes In PSD to HTML Conversion

Aug 11th 2015 at 10:33 PM

There are so many designers who do not pay attention to the common problems that are not good for clients to run a business website. Basically, in the matter of PSD to HTML conversion these mistakes commonly seen because of the lack of the designers and developers. I have shared some useful points which need to be avoided in making the responsive design basically when you are converting Photoshop design files.


1). Starting the designing process with special focus on the website's desktop version

As a web designer you might have got prompted to design a responsive site with focus on its desktop version. Well, the reality is that it is quite easy to start the website designing process with a mobile screen, followed by scaling to a desktop version. With a special emphasis on designing the site for mobile users, it would become easier for you to design for both the channels viz: mobile and desktop.

2). Using heavy images

Not optimizing the images for multiple screen sizes and resolutions is perhaps one of the common mistakes committed by the web designers and developers. Especially, when it comes to building responsive websites which use a single markup across multiple devices, it is advised to ensure that the images have been optimized for high-end performance on the web pages.

3). Not having enough negative space

It is with the help of right negative space that a web designer can place the elements over a web page effectively. The small-sized mobile interface can post as a huge problem under situations wherein the designer is interested in incorporating multiple icons into the webpage.

4). Leveraging multiple JS libraries

A web-based menu loaded with 30 JavaScript libraries might look great on the desktop but can undoubtedly fail to impress the mobile users. Hence, it is vital to be sure about the count of requests that are made in addition to the size of JS libraries that you intend to use for your responsive website.

5). Ignoring the significance of testing the design

Prior to making your responsive website available to the public, it is recommended to test the same for cross-browser compatibility, bugs etc. Hence, I suggest you to test the user flow on your website and its flawless compatibility with all primary browsers like Safari, Chrom, Firefox, Internet Explorer etc. You also need to test the site for compatibility with multiple operating systems like Mac OS and Windows.


In the current era, where owning a responsive website has become a key to instance success, tackling the responsive design pitfalls efficiently is something that you should do immediately. Hope the above details would have helped you in delivering a better and improved responsive website. Some people use various mediums just to move their website from any language or platform to responsive design but, they don't undergo the problems of responsive design. While developing psd to responsive html or any kind of website in this design the designers should know the solution to get rid of the problem so that these common mistakes can be avoided.

Please to comment

sign in

Remember Me

New to IM faceplate? join free!

Lost Password? click here