Designed my first responsive webpage
Beginner level Tips for designing responsive websites for different device screens
I have designed my first responsive webpage for 1440 px desktop and 375 px mobile screens. It is quite a hectic job to design a website that is responsive to different devices’ screen resolutions. Here are some tips that I have learned through my first experience of designing responsive websites and want to share them with you.
Tip No.1:
My first tip would be to use Flexbox and Grids in your code which will help your website to become more responsive. Flexbox is extremely useful for designing your website’s navigation bar and a footer that will always stick to the bottom of the page on different screen resolutions. Besides this, div containers should also be used to add responsiveness to your website. You can learn how to use Flexbox, Grids, and div containers by visiting W3 schools.
Tip No.2:
Tip number 2 is to use media queries if you want to add some changes to your website specific to a different set of devices and screen resolution. If you want a different design of your website for mobile phone devices than for laptop devices and a slightly different one for tablet devices then media query is the CSS responsive element to be used. You can use CSS media queries boilerplates to help you in designing code for different screen resolution
Tip No.3:
The third tip to take into consideration is to always search before using a new CSS feature for its compatibility on different internet browsers on Can I use to make your website responsive to different internet browsers.
The red boxes in the above image indicate that the feature is not supported on the specific version of the specific internet browser. Similarly, the green boxes represent the feature’s full support on the specific browser. While the yellow boxes represent the feature’s partial support on the specific browser i.e. not all the properties of this feature are supported.
Tip No.4:
My fourth tip would be to set the font size in viewport width(vw) instead of pixels (px). Similarly, also the height and width of flexbox, div and grid containers should be set in viewport height (vh) and viewport width(vw) respectively. This will help in adjusting its size according to the viewport (device screen) size/resolution.
Tip No.5:
The fifth tip is to open your website in the inspect panel by right-clicking or by using the commands:
For Linux and Window users
Ctrl+Shift+I
For MAC users
Command+Option+i
Then select the toggle device toolbar and toggle around different screen resolutions to verify if your website is responsive to these screen resolutions.
Tip No.6 (Final and Exclusive one):
All of the tips mentioned above are according to my limited knowledge and experience about the subject so you can share some of your expert-level tips in the comment section which could be helpful in building responsive web designs. Kindly give it an applaud 👏 if you find any one of the tips helpful.
