5 Tips for Responsive Web Design

Ben GidneyUncategorized0 Comments

These days, a freelance web designer can’t ignore the fact that websites aren’t just being viewed on laptops and desktop computers any more. Every man and his wife either has a Smart Phone, a Tablet device or another gadget that lets them browse the internet on the go or away from a standard computer. This is great for the user, but it does make designing a website more complex than ever before.

Here are a few tips which I follow when creating a Responsive Web Design:

  • Design with Mobiles and Tablets in mind What is a Call to Action? Well, quite simply it is an element that calls a website visitor to make an action. This could be clicking a button that links to a contact page. Or filling a form in for some sort of incentive; perhaps a Free Download. Either way, the Call to Action is there to catch your viewers attention and to direct them to complete that important action which converts them from a visitor to a lead!
  • Use Percentages in your CSS Using percentages for divs and containers in your CSS will allow your columns and other elements to shrink and stretch with the screen size. For example, your header div may be 100% width, your main content may be 70% and your sidebar 30% width. Then combine the width percentages with a max-width value in when using pixels.
  • Use Media Queries Media Queries allow you to target specific sized browsers with CSS to only be processed by them. For example, you could set a CSS rule for a screen size of 320px or less which makes your font size bigger and easier to read on a small screen.
  • Make images flexible Again, use CSS to target images for when they are being viewed on different devices. I usually set images to 100% width when being viewed on Mobile device screens. This means they are easier to see and click on.
  • Remember the sizes As a general rule of thumb, I target up to 320px width for Mobiles; 768px max for Tablets; 1000px for Tablets in landscape mode and anything above for laptop and desktop computers.

I hope the above gives you some insight into designing for Mobile and Tablet devices. If you require a web designer please contact me on 0208 466 8160 or 07790 777 488. I will be more than happy to assist you further and I look forward to hearing from you. If you prefer, you can email me directly at contact@hatchitdesign.com.

Leave a Reply

Your email address will not be published. Required fields are marked *