Designing normal and non-responsive website is not a reason not to display sites on different devices, but the website is displayed on both computers and mobile devices, but you may have to zoom in to see part of the website. Or scroll through. In the following, we will get acquainted with the process of creating a responsive website.
Table of Contents
The Basic solution
Initially, to solve the problem of optimal display of the website in different resolutions, designers created different templates for different resolutions. This method, in addition to being very expensive for users to design several templates, had other drawbacks, including that if In the future, a new device would be introduced to the market and spread, still had to pay extra to support this new system, and also greatly damaged the SEO and ranking of the site.
Is mobile app a good solution?
Developing mobile applications is also a solution for easier access of the user to different parts of the website, but this method also requires cost and time to design and build software. Synchronizing website changes and web-based software is also a separate issue in estimating costs.
The best solution
The best way to solve this problem in web design industry for programming and coding a website is to use responsive methods that by creating a responsive template, the site is adapted to the device for each resolution and there is no need to design multiple templates for one site.
The difference between normal websites and responsive websites
The difference between responsive sites and regular sites is that in responsive mode, if you open a web page in a browser and zoom in and out by taking the browser corner, you will see that the site reacts and resizes and Adapts to new sizes, in case of non-responsive sites, the site does not react and only scrolls horizontally and vertically.
How to build a responsive site?
To create responsive pages you need to have backgrounds on css3, html5 and JavaScript and use media queries, you will also need to use certain components and frameworks, such as using bootstrap, Foundation, Skeleton frameworks , YAML and …
Using media queries
Next we want to create a simple responsive site page using media query. We use media query to determine how the web page should be displayed on each device with different resolutions.
For example, by using the @media tag, we specify that if the width of the device resolution is 320 pixels, the background of the screen will be green. We use the media tag to create a responsive template, this tag checks the resolution of the device and based on it uses specific codes related to those conditions. Do not worry, you do not need to have an infinite amount of resolution in mind to design a responsive site, these codes are created based on standard resolutions:
Responsive site design standard sizes
- Dimensions of mobile website design
320 * 480 pixels
360 * 640 pixels
- Dimensions of tablet and desktop website design
1024 * 768 pixels
- Dimensions of desktop website design
800 * 1280 pixels
980 * 1280 pixels
1280 * 600 pixels
1290 * 900 pixels