Published on <a href="https://blog.prototypr.io/3-tips-to-get-started-with-responsive-design-beb747d254?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Jingyi Lai 
<h4>Quick Starting Kit for New Designers</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UwLPcbrsL69Ikhg4EI2P1g.png">This is a responsive design example of a previous project . <a href="https://merchant.mintchip.io/">It is live here</a>, but not 100%responsive and some changes were applied. This is also my first trial on responsive design.
Responsive design is not a new thing, bu for new designers, it is not easy to start with. If you are not familiar with the concept, <a href="https://www.w3schools.com/html/html_responsive.asp">please get a refreshment here.</a>
<blockquote>Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).</blockquote>
<blockquote>Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:</blockquote>
The reason why responsive matters is not only to make webpage look good on all devices(mobile users increasing dramatically), but also make sure users will have comfortable visual experience when accessing your website with a not-full-width browser.
We never know how our website will look like on users’ computer: maybe they prefer to resize the browser to half the screen while working on the other half.
<h3>1. Breakpoints = Screens Needed</h3>
When I first got started with responsive web design, it was intimidating. I was thinking: In order to make it look good on all the devices, that means I will have to design so many versions!Well if we want, we can do that. But it will not only cost much more resources and time, but make the website hard to maintain or revise for future improvements.
So here comes the concept of <a href="https://responsivedesign.is/strategy/page-layout/defining-breakpoints/">breakpoints.</a>
<blockquote>Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information.</blockquote>
For designers, that is the point when we need a screen. For new designers, I recommend using the default setting in Sketch.
320, 768, 1024, 1440
<img alt="" src="https://cdn-images-1.medium.com/max/432/1*dTAXcEqii5seGR-StZvQDQ.png">Sketch responsive design setting
But if you have a specific device your want to target, or if your development team is using a specific framework like <a href="https://getbootstrap.com/">Bootstrap</a>, things will be different. Communicate with the team before deciding.
<h3>2. Transition Between Breakpoints</h3>
Tricky thing happens here.
Designing five version of the website doesn’t mean the work is done. As a designer, we also need to think of how the website will look like when the size is between two breakpoints. As mentioned before, we can control the size of a certain mobile product, but we cannot do the same for the browser. There are a few points that we need to pay attention to, and more importantly, always communicate with development team, you will receive some unexpected but fabulous insights.
<h4>1/Position</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*FZpvG8Dl3N-Z8sPifAfypA.gif"><a href="https://www.google.ca/">Google</a>
Think of how the elements will position while resizing. For example, what Google does is to always centre the search bar and thumbnail, also fix the width of each thumbnail.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*VLOeeRzndDc5KhEGXBqpOQ.gif"><a href="http://amazon.ca">Amazon</a>
But for Amazon, the side bar remain at the right, relative the same position.
Just a side note here, Amazon’s website seems not responsive in the small size but actually they disabled this on computers. If you visit their site on mobile devices, you will see a mobile optimized version for it.
<h4>2/Size</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*J3Gy7la9538vVDnqzOhafQ.gif"><a href="http://dribbble.com">Dribbble</a>
When resizing Dribbble’s website, the thumbnails remain the same size, it reduces the number of the thumbnail on each row in order to fit smaller size.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*YI_bbKocfLdUStCJ797XaQ.gif"><a href="http://w3schools.com">w3school</a>
But for w3school, you can see they resize the width of the element instead. Whichever way you prefer, for the dribbble stye, it requires a well-working grid system, while for the other, it just allow the content to flow accordingly, normally used in content-based website.
<h4>3/Interaction</h4>
The way of interacting with the website should be carefully considered in different sizes. For example, the navigation bar:
<img alt="" src="https://cdn-images-1.medium.com/max/790/1*lUVSHRp1684vPvvcyC70pg.png">w3school’s mobile with hamburger menu button<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*K4jL0DjXK5K3WEeLoroAMA.png">w3school’s web nav
Hamburger menu is pretty popular now for smaller screens, but I’m still not confident with it as people tend to interact with the visible.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QAnvh9BOeDFLuwGH56MeMQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/820/1*G5wkZ2DxnntSxayqCXG4ZQ.png"><a href="http://stripe.com">Stripe’</a>s tab menu and drop down menu in different sizes
Stripe uses a tab menu in the larger screen but a drop down in smaller screen in order to save space.
One important thing, hover is not available on touch screens, so always have an alternative for touch screen, don’t rely solely on hover!
<h4>4/Image &amp; Text</h4>
These two doesn’t need a lot of tweaks for gradually transition as themselves are naturally flow to fit the screen, however, we need to think of showing different images in different screens, and offer different text sizes for readability.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bUPMg7QhI5mwRxQtsGDpYA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BCLQ4IYGd_B15qFWuGrzwg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*F6-UPsZkO6qS77YhkBLLaw.png">Stripe using different images
Take Stripe for an example again, for large screens, it shows the first one, medium screen the second, small screen not images. This can maintain the visual experience while not taking up too much space with the same image. Resizing the same image also works, but be careful if it becomes too small to convey the message.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2mDwtV9B2oJyFydyhzxbXA.png"><a href="https://polaris.shopify.com/visuals/typography#navigation">Shopify’s style guide for font scale</a>
In Shopify’s style guide, it clearly states the different recommended font sizes in different screens to maintain readability. A large 56px slogan make senses in a big screen, but it will become a giant in a mobile phone screen.
<h3>3. Which to Start First? — Mobile First</h3>
When we start doing the design, should we start with the smallest one or the biggest one? Mobile first is highly recommended because it can make website load faster on small devices.
To explain this, we need to understand how developers make the website responsive: the use <a href="https://www.w3schools.com/css/css_rwd_mediaqueries.asp">Media Query</a> in CSS to do that. CSS loads from top to bottom, which means if we put the CSS for mobile first, mobile phone will load the corresponding CSS at the first place while computers often has a more stable Internet access, and they can go all the way to the end to find the CSS for larger screens.
<h3>Final Note</h3>
I hope this 3 tips can help you get started with responsive web design right on the go.
As a beginner for front-end development, I strongly recommend you learn a bit HTML/CSS, at least understand how it works. It will help you make wiser design decisions, and reduce the development cost. Believe me, your developer folks will thank me for that 😋!
And while trying to write a website, it really helps you understand how responsive web actually work.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*1p6lEsluDJzq_PDPQbPMfg.gif"><a href="https://dribbble.com/shots/4367882-Responsive-Style-Guide">Responsive design style guide</a>
Above is my second experiment with responsive web development. As you can see, it is really simple, just a content-based one, I centered the content in larger screen, and let it flow to 100% width in smaller screen while placing the sidebar at the right top. It is not a perfect user experience but it is simple and easy to develop (coded by a designer with limited front-end experience-me). For a design style guide for internal use, it is enough.
<h3>Some More Resources</h3>
<a href="https://blog.prototypr.io/responsive-interface-design-pattern0425-674589e26102">Responsive Interface Design Pattern</a>
The following two might be a little advanced for beginners, but absolutely good read.
<ul>
<li><a href="https://alistapart.com/article/fluid-images">Fluid Images</a></li>
<li><a href="http://alistapart.com/article/fluidgrids">Fluid Grids</a></li>
</ul>
Jingyi is a product designer and a beginner of front-end development. Welcome to connect me via<a href="https://dribbble.com/fairylie89"> Dribbble</a>, <a href="https://www.linkedin.com/in/fairylai/">Linkedin</a>, and <a href="https://twitter.com/fkojiang?lang=en">Twitter</a>.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=beb747d254" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/3-tips-to-get-started-with-responsive-design-beb747d254">3 Tips to Get Started with Responsive Design</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

3 Tips to Get Started with Responsive Design

Quick Starting Kit for New Designers

Top Stories