Making PSD to WordPress Responsive website: A guide for dummies
Being a renowned WordPress conversion service, we frequently get projects for converting PSD designs to responsive WordPress sites. But for past two years or so we are seeing a steep rise in the requests for making responsive WordPress site. If you look at the current trend for viewing the Internet the answer becomes clear. Making your WordPress site responsive is no longer an added luxury. With the growing number of mobile devices doing the rounds, the number of views through a mobile device browser is also increasing. So, to cater to these mobile viewers, websites are increasingly switching to responsive designs.
You could get no of free responsive themes also but if you are looking for a professional and error free responsive website which can easily adapt to any resolution , then my recommendation would be hire an expert. You can easily fetch 10% Discount on PSD to wordpress responsive conversion.
What is a responsive site?
By now you may have got an idea of what is a responsive site. However, there may be some readers who are new to the concept. Here’s a simple explanation for them. A responsive website is the one that provides optimal viewing experience in all types of screen sizes and resolutions. Because of a responsive design a user can have similar viewing experience in his mobile device and his desktop or laptop computer. In general the main aim is to eliminate the need to scroll vertically and horizontally that we have to face in mobile devices when viewing fixed layout websites.
How to make a responsive WordPress site
In general nearly every responsive website is made using CSS3 media queries. These media queries molds the images, texts, and the overall rendered layout, according to the screen resolution and the size. In general there are three major ways by which we can build a responsive WordPress website. Apparently, each way can have a different difficulty level and produce the quality of output accordingly.
Way 1: Create your custom theme and custom CSS (For expert Developers)
Learn CSS
The most time consuming and most effective result comes from integrating a custom build CSS code into the theme of your WordPress site. This is also the most difficult process as it requires a heavy knowledge of CSS3 and media queries along with an understanding of WordPress as a whole. But integrating CSS into WordPress is not that difficult. But we highly recommend you to learn CSS if you are considering to be a web developer. It is not that difficult and it is the best programming language of today. Here are some resources to learn CSS
- W3Schools is the most popular resource for learning CSS for free on the web.
- https://developer.mozilla.org/en-US/learn/css: -Mozilla, the community behind Firefox, has complied a step by step list of different scattered articles, tutorials, videos and lessons in a single page following which you can master CSS.
- CSS Basics:- Just as the name suggests, a comprehensive guide for learning the basics of CSS.
- Eric Meyer’s CSS reference:- Eric Meyer, a world renowned web-developer and author, has a collection of articles on CSS along with a comprehensive reference list of all CSS tags.
- A List Apart:- This site has a collection of more than 120 articles related to CSS
- TutsPlus:- Tuts Plus, a premium video tutorial site, has a comprehensive course on HTML and CSS that is available for free, no strings attached.
Learn Theme Development
After mastering CSS through these resources the next question comes, how to integrate a CSS code into a WordPress site. Well, this process is also very difficult and requires complete knowledge of WordPress. Professional WordPress web developers create their own custom WordPress theme and add their custom HTML and CSS to this theme. To create your own theme here are a few resources-:
- WordPress Codex:- Bible for every WordPress developer. WordPress codex is must read documentation for every web developer who want to learn WordPress. This specific link will tell you what exactly there is in a WordPress Theme and what exactly you need to make a custom WordPress blog.
- Wpdesigner:- an extremely comprehensive tutorial on creating a WordPress theme from scratch. It is a little outdated but it is the basic course that you have to master to learn WordPress.
- Webdesign Tuts+:- “Word of warning: this Session is not for the faint-hearted!” the warning on the site says all. A complete video guide spanning multiple topics and multiple websites that will convert you into a CSS, HTML and WordPress developer. But enter at your own risk. It is extremely comprehensive information.
- Inforgraphic:- A simple Infographic on creating your own WordPress theme.
- CollectiveRay:- An easy to implement tutorial showing the process of converting PSD files to a WordPress theme using Bootstrap.
Alright now after reading that I think you’d have some idea about WordPress. Maybe even more than me; maybe (I am a very humble person).
Integrate custom CSS directly into WordPress theme
Now comes the part you have been waiting for- Integration. Well to be frank even now integration has two different ways.
First, you can create your custom CSS, store it in the custom theme’s folder, call it in the header.php file of the custom WordPress theme. You can then use the grids and frameworks of this custom CSS and have the backup CSS of the default style.css sheet. This will compartmentalize your code and allow easier handling of theme features, though it will require a little more complex coding. But if have reached till here, you won’t find it that difficult.
The other step involves directly changing the style.css of the theme. But be warned, it is risky business and may cause some plugins to break down. Integrating CSS in style.css sheet of WordPress has 5 steps only.
- Open the WordPress administrator dashboard
- Go to Appearance->Editor->style.css
- Scroll to the bottom of the sheet and update the grid
- Save and Exit
- Go to HTML file of each page and home page and add relevant CSS grid features.
- You are pretty much done. Told you only five steps.
Well it may sound simple but when you start to code it you are bound to miss a few <p class= >s so code carefully.
Way 2: Use a responsive theme and plugins (for non-coders using WordPress)
Responsive Themes
The most popular way among non-professional web developers to build a WordPress website from scratch, is through using a responsive theme. Most, old WordPress sites just switch the theme and viola they have a working responsive site that requires just some additional tuning to make it 100% functional like the older version. There are hundreds of themes available on the Internet. Most of them are paid but even then, many of them are free. Out of these free themes most are responsive themes you can use to create your professional or personal website.
Here is a list of 5 most popular responsive themes that are available for free
- Twenty Eleven: – It comes as a default theme with every latest WordPress install and it is free.
- Responsive:- The name itself says it all. The most popular responsive theme on WordPress.org.
- Mantra:- Mantra is a great responsive theme that can be used to create any kind of website.
- Adapt:- a features stuffed and beautiful responsive theme, Adapt is a free theme that can give premium themes, a run for their money.
- Photo:- designed especially for photographers and graphic designers, Photo can be used by anyone to display portfolio or images. It’s free and responsive.
Plugins
Ok plugins may not exactly make your site responsive, but they will make it mobile compatible. Use of plugins is the easiest method out of the three and also the crudest. You don’t have to specifically change your site to become compatible with a responsive theme or code your custom theme from scratch. Just install a plugin and let it do the job. Most plugins will even allow you to create a mobile compatible version of your site that you can also customize accordingly. Some, do that job automatically. These plugins are customizable and there are even free themes available, that are made specifically to work with these plugins. Here’s a list of top free plugins that will make your site mobile compatible
Way 3: Use a Service provider (For companies or organizations)
The most efficient and simplest way for everyone is to hire a professional PSD to WordPress service provider. They will convert your design PSD to WordPress responsive site in a matter of days. No messy plugins, no complicated themes, and no need to learn knotty codes. The only thing you need is an image design of your future site. WordPressintegration is currently the fastest and most economical PSD to WordPress service provider available on the web. Just send them your design files and they will give you a high quality converted WordPress pages before 3 days flat. This is one of the best options for organizations, professional website owners, bloggers, and large to small scale companies.
Conclusion
Now plugins and responsive themes are a great idea for creating a mobile compatible website, there are no shortcut to creating a high quality website, no matter which CMS you use or which plugin or theme you use. If you are thinking of starting your dedicated blog or a dedicated commercial site, learning markup languages and PHP is a must. You can learn HTML, PHP, and CSS in less than six months, if you learn part time, and can a become master very fast if you practice regularly.
