Responsive Design
You have spent hours adjusting your website to look perfect, only to get a screenshot from the custom where it looks completely different. This is caused by a difference in hardware and software used to view the website; we usually simplify this by saying “device”. There are different methods of solving this; we refer to this as Responsive Design, meaning your design will respond to the device.
Most web browsers have a development mode that lets you adjust parameters on the fly. For example, Chrome allows you to hit F12 and open the inspector, then you toggle the device toolbar and have a rough preview of what your site might look like on each device.
You may also want to download The firefox browser because it uses a different engine, causing inconsistencies. Finally, You may need an IOS device because they don’t use the latest features; I have purchased an iPod touch which works well; it is easier than checking every piece of code’s documentation.
With modern web browsers, you can change how the site is displayed based on the screen size, whether it has touch, the operating system and much more. We can use these features to help align and reshape elements within the website. We can also tell the browser not to adjust page elements and define element styles that use the system’s default theme.
I start with setting every element max-with to 100%; this guarantees the page does produce horizontal scroll bars. I also pick a max width at which the page stops adjusting; generally, you don’t want the content to span across double-width monitors. You may also want to define a min-width as the text becomes unreadable when it begins to line wrap.
The containing elements may need to create a few different designs for set width; for example, on a phone screen (<400px width), you may want to remove all borders and horizontal spacing to reduce content and text becoming truncated.
Now you have your inner elements, such as columns and content. Modern browsers allow you to use “grid” and “flex” styling, which will automatically place content to reduce whitespace. You can use percentages for the width of your elements; they automatically scale to the width of the containing element. You may need to make new designs for cases where the content looks out of place.
Remember you want to avoid re-creating the design multiple times; you achieve this by using scaling elements and only having designed extra layouts for the container elements. You should load the site in different browsers as you develop it and resize the window to confirm elements are scaling correctly.