 Hey, what is going on everybody? My name is Radii and in this video I'm going to talk about tips that can help you create a responsive website with ease Coding a responsive website can be a relatively complex process Luckily for us, the many tools and techniques that can help us improve the process and write clean, fast, unreliable layouts that scale Let's look into some of them starting with planning Trying to figure out how things will fit on different screens as your code can be time-consuming Ideally before you start developing the layout you should have a high-fidelity prototype That includes mobile, tablet and desktop views. A high-fidelity prototype is a realistic representation of the website that you want to build. It is an interactive, clickable version of the design You would also want to have different states for inputs, buttons, images, errors and so on Additionally, it would be nice to have the design of the pages such as 404, No Results, FAQ Policies and so on. That is the ideal scenario. Now, let's talk about CSS There is no set of rules on how you code your website I personally like to start from mobile, work in my app to tablet, desktop and so on When I say mobile, don't be confused by wrapping everything into a mobile media query I start with the base styles first and then work my way up This way I'm getting the foundation of the elements that I need and then I can use media queries to progressively enhance them as required. For those of you who don't know what media queries are they look like this and they can help us write tailored stylesheets for desktop, laptop, tablet and mobile screen size. Speaking of media queries, I feel that the fewer you have the better. Essentially, it's less complicated. Three media queries should be good enough but of course if you need to add more then go for it And as I was talking about using less media queries, you can also use something called queryless grids, a way of creating layouts that change depending on the size of the screen without using media queries. The most often used for responsive of design where the layout is optimized for any screen size. One of the benefits of using fluid grids is that there is no need to specify how many columns should be in a row or in total. The main advantage of using fluid grids over traditional grid based layouts is that they allow more flexibility and adapt well on different screen size. To achieve fluid grids or queryless grids, you can use Flexbox or CSS grid. The next point I want to talk about is avoiding fixed widths and heights. Fix widths and heights are bad for responsive web development because they can be difficult to create a layout that is flexible across different screen size. It could result in writing more media queries to ensure that your layout is somewhat flexible. So I would avoid them whenever you can and instead try using properties such as max width and max height instead. And the next point I want to talk about is building reusable blocks. You can think of everything as its own little component. If you develop a search bar, make sure that the search bar is responsive so it fits pretty much any reasonable section of your layout with a simple copy and paste. This way you can save time by not having to create new elements or modify elements for every layout variation. And now let's talk about responsive typography. Responsive typography is a technique that allows the text to be readable on any device. The use of relative units in web development is a great way to ensure that the layout is responsive and adapts to different screen size. And it is important for us to understand how to use units such as M, REM percentages in order to create responsive typography. As you might know, typography is probably the most important part of a website because it can make or break its design, usability and accessibility. Typography should use M, REM or percentage units for font size instead of pixels so that it can scale with the size of the screen. You can also use modern CSS techniques such as using the Client property and of course you can use media queries to make sure that your typography adapts well on different screens. So basically always use relative units such as M, REM and percentage. Okay now let's talk about responsive images. Make sure that your images are responsive as default. To do that you can use the following snippet using max width of 100%. This allows the images to scale within the parent width. Even when we want our images to be responsive, you should always try to add the width and the height property to avoid rendering issues. You know the little jumps sometimes when you refresh the page. Additionally you can use the picture HTML5 element to define different images for different window size. This is not only great for performance but it also gives you the opportunity to adjust your content so it's useful and legible on all screens. As we are on the topic of images let's talk about scalable vector graphics. SVG is an XML-based markup language that can be used to create two-dimensional graphics. SVG images are more compact than other formats such as JPEG, GIF, PNGs since they don't use any compression algorithm. This means that SVG images can take up less storage space on your website which means faster loading times and less data usage. The advantages of using SVG in the web design are scalability, flexibility and lightweight. You can use SVGs for pretty much everything from logos, backgrounds, icons and illustrations. One great thing about SVGs is that they can be animated. My favorite way of writing CSS is by using the SCSS preprocessor. You've probably seen me using it on pretty much most of my videos. The preprocessor is a program that processes the SCSS code before it gets compiled. It's used to write CSS in a more efficient way. There are many benefits of using SCSS preprocessor over pure CSS. It helps with writing efficient and clean code. It prevents better support for variables, mixings and other features. It allows developers to create their own custom function. And last but not least, it's faster. The next and the last thing I want to talk about is using CSS methodologies such as BEM. BEM starts for block element modifier. It is a CSS methodology that helps developers to create robust maintainable websites. The methodology is based on the idea of separating website code into blocks and elements. Blocks are the names of the sections or module, while the elements are individual parts of a block. This methodology was developed by Andex in 2009 for internal use, but it was later released as an open source tool for others to use. It's super popular among front-end developers and it makes it easier to maintain large web projects in many different stylesheets. Alright, so you might be wondering what's next for CSS? How can CSS help us write better responsive web layouts? We have CSS container queries coming up and CSS sub-grid. Okay, one thing that I wanted to mention before we end up this video is that if you're struggling with the stuff that I said today, don't worry. You can always use a framework such as Bootstrap or Tailwind that will help you out to create good responsive layouts. If you like this content, please give it a thumbs up, consider subscribing to my channel and I will see you in the next video.