Is your website responsive?
Hey, folks! Is your website responsive? Can you look at it properly on your iPad? or on your iPhone? without having to create a separate mobile app or a separate website for these devices?
Save all your time with a Responsive website approach.
Responsive website design is basically where we have our web page make use of device compatible layouts, images and style sheets. All the content and images adjust to fit in the best way according to the device.
Let us understand it in a much more simpler way!
What if we ask you to play a pool game on a carom? You would start thinking about the complexity of the game, right? Why is it so difficult because the size of the balls and the stick is more than what is used in carom but how about getting small sized balls and stick as per the carom size. Now you are feeling better because the game will be in your reach and much easier to play on.
The exact same thing happens in the case of websites as well. You might have seen a website on a laptop and found it easy to be worked on however if we ask you to open the same site on your iPad or smartphone then it will look like a clumsy one, or you would see some horizontal scrolling, or images cut off, may the text is cut off. Not at all pleasing!
Responsive Web Design solves all problems.
Even for marketing, Google gives more emphasis on responsive sites. Check the Mobile Algorithm by Google
Check below the latest techniques we use in Responsive web designs:
1) Adjusting Screen Resolution
During the responsive web development, our frontend engineer will define ranges of screen resolutions that will be according to the type of the device whether it is a large desktop screen, laptop, tablet or a smartphone. There is a limit for the width for these devices which is known as breakpoints.
This is how the content rearranges itself depending on the type of the device. It is taken care of at the time of design and then during the creation of style sheets.
2) CSS 3 Media Query
These days, whenever we design a website, we think about the mobile version of the website first. This is where we use min-width and max-width media queries for. These allow us to apply different styles for different screens. Using CSS3 Media queries has greatly impacted building beautiful responsive web pages.
3) Showing or Hiding Content
When we have a big screen, we would like to view it all, but on small screens of smartphones, it’s not recommended to show full content sometimes to have users achieve the best of their experience. This is the reason we use this technique.
We can do this by using simple CSS and show and hide different content for mobile and desktop.
[Below code works in WordPress editor]
<div id=”content-desktop”>
This is the content shows on desktop screens.
</div>
<div id=”content-mobile”>
This is the content shows on mobile screens.
</div>
4) Responsive Typography
This solves the problem of showing too big text on a small screen or a too-small text on a big screen. This technique takes care of it. Here we increase or decrease our text sizes in proportion to the screen sizes.
h1 {
font-size: 48px;
}
@media (min-width:576px) {
h1 {
font-size: 24px;
}
}
@media (min-width:768px) {
h1 {
font-size: 32px;
}
}
5) Flexible layout
It’s all about using % instead of using pixels or em units. Instead of defining fixed widths or sizes, we define the elements to adjust in terms of % when the screen size changes. This allows the dimensions and proportions of all the elements to stay the same without getting skewed or messy. We use grid layouts so it doesn’t break the design for different screens.
Conclusion
To conclude, if you are getting a website created or creating yourself, do not ever create it fixed or rigid. People nowadays use tablets and smartphones more often than desktop. Go Responsive!
