So what the hell is responsive design when its at home? And why should you care?
In layman’s terms a responsive design reponds to to the size of whatever devise you are using to view a website.
Before the advent of mobile devices a website would only ever get viewed on a desktop PC or laptop. Responsiveness wasn’t an issue. A “traditional” website would never be viewd in anything but landscape.
This all changed with the iPhone, and followed by its smartphone competitors. Smaller viewing screens presented a whole slew of challenges.
Without a responsive design a traditional websites shrink to fit. This makes text hard to read, buttons hard to press and large images would quite often “break” the layout.
Not good!
And then came tablets, large and small, to stick another spanner in the works.
So What?
With over half of all website traffic worldwide viewed through mobile phones, a website that is hard to use on a mobile devise isn’t going to hold your potential customers attention. They will soon lose interest and move on elsewhere.
Google also now ranks websites based on it’s mobile content! Without a responsive design, poor navigation or slow loading speed your google ranking will affected.
You can’t afford to ignore responsive design!
So how does it work?
A fluid grid responds to whatever size of the screen a website is viewd on. A desktop website which has 3 columns reduces to 2 columns on a tablet device then down to 1 stacked vertically on a smartphone.
Headlines and text reduce to fit a smaller device, keeping the content readable and easy to navigate.
Images also resize in relation to its column or design element. And if needed elements drop out altogether. What works on a full size screen can seem like excess baggage on a smaller one.
Touchscreens now also comes into play. What can be easily slected on a desktop with a mouse, becomes a problem with fingers needing to touch tiny buttons on smaller screens. Ensure your buttons are of a decent size and tap friendly.
Typically navigation menus dissapear and replaced with what’s called a Hamburger Menu (so called as the 3 vertical lines resembles a hamburger). Pressing a hamburger menu results in a drop down menu, making navigation much easier.
Conclusion
The user experience is everything! Your website should never be a struggle to navigate whatever size of screen it is viewd on. Responsive design helps eliminate this problem.
