Do you feel working in a mobile friendly world today is a big challenge in front of the business makers. Yes that’s true as today the world is advancing. So of course, your site too should…
Technological expansion of the web is making it easily attainable on huge range of devices from small-screen phones to huge-screen televisions. The best thing that you can do is to make your site become responsive, which, in other words means that the site will adjust itself (its layout and everything) to fit into any screen size.Each device presents its own unique benefits and also constraints. As a web developer, you are expected to support all ranges of devices. And it’s a must to avoid crappy look of your website on mobile platforms.
Keep Your Website User Friendly And Up To Date:
An adaptable and user friendly website, with today’s standards and requirements for social marketing, needs to be responsive. There are basically two ways to achieve this.
Add A Viewport:
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive Meta tag). Will set you up for cross-device layout peace of mind and without it, your site will not work well on a mobile device.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Set The Device Width:
<meta name=”viewport” content=”width=device-width”>
Set The Device Height:
<meta name=”viewport” content=”height=device-height”>
Constrain The Maximum Width Of The Design:
We need to constrain the width and center the elements to create an outer container around each major section and apply a margin: auto. This will allow the screen to grow but the content remain centered and at a maximum size of 800px.
Media Queries:
Medias are the responsive layouts which helps a site to attain responsive feature.
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
Media queries make a way easy to customize your WordPress theme so that it can restore itself appropriately on devices of different sizes.
Based on the media query, you will have a set of styles which will be common for all screen sizes. Then you will have to use media queries specific to the devices your site has to cater to and override any specific style you want, to be different for different screen sizes.
Although the technique above is productive, sometimes you may need to have more control over images and display a different image according to the client display size.
Typography:
Typography is also an important aspect. We all developers give font size in px.Its ok in case of fixed width. But when we talk about responsive feature, it should have a responsive font.
You can define responsive font sizes as shown below:
@media (min-width: 640px) { body {font-size:1.2rem;} }
@media (min-width:960px) { body {font-size:1.5rem;} }
@media (min-width:1100px) { body {font-size:1.8rem;} }
These are some of the ways to implement responsive website and to boost our business through this. Feel free to give your opinions and ideas on the same as it will be helpful for us to improve more.
