4 Tips for Responsive Design
Hello, world!
In my coding bootcamp, we officially moved on to learning backend development a few weeks ago. While I appreciate the possibilities that backend databases open up, I really miss the design and UX aspects of working on front-end projects, so I decided to take some time to learn more about CSS this week.
I often find myself wondering how developers adjust apps to create a pleasant user experience across different devices of varying sizes, so I decided to do some research. Here are my top tips for developing web apps with responsive design!
1. Mobile-First Design Approach
Generally, designers will consider 3 base sizes for an app’s layout:
Mobile- 320px
Tablet- 768px
Desktop- 1024px
It’s important to design apps using a “mobile-first” approach. In other words, design the app the way you want it to look on a phone screen first, then move on to adjusting the display for tablets and desktops using media queries. One of the benefits of a mobile-first design approach is you can avoid auto-reformatting that happens when phones open apps formatted specifically for desktops. As you can imagine, the auto-formatting isn’t always the most user-friendly, and in an age where most people are using their phones to access information, catering to mobile users is of the utmost importance! Not to mention, mobile-first designs are also favored by Google’s algorithm.
Want to read this story later? Save it in Journal.
2. Media Queries
Media queries are a quick way to target specific aspects of an app and change them depending on the screen size for the app. You can even use media queries to adjust what a page will look like based on screen size, and even adjust how a page should render for printing.
3. Chrome Developer Tools
Chrome Dev Tools has a feature specifically for adjusting the layout of an app depending on screen size, which makes working with media queries much easier!
When you open dev tools (command, shift, C), you can click the “Toggle Device Toolbar” button to adjust what size screen you want to work with. A drop down menu is included to view how an app will render on a handful of common devices.
Here are some examples of how my GitHub profile would appear across different devices using the Toggle Device Toolbar:
There’s even a feature to see what the screen will look like if the user rotates the device!
4. ViewPort Units
In CSS, there are a few different measurement units you can use. Some of these include pixels, percentages, EM, REM, and viewport units. Percentages and ViewPort units are both effective manners of coding responsive designs.
I tend to lean toward ViewPort units since you can specify viewport height and viewport width for elements, and to prevent elements from getting too small or too big, you can use vmax and vmin.
Here’s an article that delves further into the possibilities available with viewport units.
And there you have it! If you have any questions, you can reach out to me here or on Twitter. Happy Coding! :)
Creating something of your own? Join the Journal slack community for support from creators like yourself.
