Create Responsive Websites Like A Pro

Nowadays, it's really important that your website looks good on mobile devices. But how should you proceed there? Let me present you my way doing so:

Step 1: Get a framework!

You could either create typography, grid systems, image classes, responsiveness and more, but there are tons of frameworks that can handle that:

  • Bootstrap: probably the most famous one. Created by Twitter, it brings everything what you need. The community is big and the documentation is great. There are also tons of plugins for it.
  • Pure: If Bootstrap is too big for you, give Pure a try. It's developed by Yahoo! and has everything basic. The biggest advantage is the very small filesize.
  • W3.CSS: Built by the World Wide Web Consortium, it is a basic CSS-only framework. No jQuery, no JavaScript.
  • jQuery Mobile: If you only want to create a website for mobile users or a HTML5 app, you could also use jQuery Mobile. It is made for phones and tablets. Compared to the other two frameworks, jQuery Mobile is a giant with tons and tons of features that can be a bit confusing at the beginning.

My last article was about Material Design frameworks, maybe you also want to give those a try? Read it here.

Step 2: The code

Here are some points very important.

  • The text must be readable on whatever resolution, so avoid fontsizes in px and rather use em.
  • Make sure your images are fitting nicely. Most frameworks provide responsive utilites for images.
  • Improve your loadtime! Shrink code, avoid big images and don't preload videos.
  • Don't use Flash. Well, never use it.
  • Use the viewport tag:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  • Add a favicon and a Chrome tab color.
  • Don't let your website be too long.

Step 3: Testing!

You can test your site with various services like Mobiletest.me which you might know from my article "9 cool web development tools". But most browsers have a developer mode, which also has a function to test screen sizes. In most browsers, you can open it with Ctrl + Shift + I.

But nothing keeps you away from testing on a real device. On your computer, you have the feature called "Inspector", that lets you inspect every element of the website, as well as the JavaScript console, the network inspector and much more. But what's on the mobile side?
There's a tool called Weinre that runs on Node.js. You just have to include a JavaScript file in your code and have easy access to those tools on your computer so you can remotely debug your website.

 

That's it! You should now have the basic knowledge on how to quickly create a good responsive website.


Code

Newsletter

Subscribe to my newsletter and stay tuned.