Many website owners say to themselves, “I want my site to look great on mobile, but I don’t know where to start.”
If you are in the business of building and designing websites, you cannot ignore the fact that many people are going to be visiting your sites on their smartphones and tablets. The Web and the mobile browsers remain one of the top ways that users interact with websites and if they have trouble on their smartphone, there is a good chance they are not coming back.
That’s where responsive design can help.
Responsive design is a concept where you build your website once and then format it so it can adapt to any screen size that accesses it. Designers use HTML5 and CSS to build the sites and set parameters so the content will resize itself whether the user is in vertical or horizontal viewing mode, on a tablet, desktop or smartphone or even a screen as large as a television.
We employ responsive design here at ReadWrite. Go ahead, test it out. If you are on a PC browser, shrink or enlarge the window and watch the content respond. If you are on a tablet or smartphone, switch between portrait and landscape.
See what happened? ReadWrite looks great no matter what size it is, no matter what device you are using.
Responsive design has been in vogue since about 2011. One of the first sites to employ it was The Boston Globe when it launched its new digital publication, BostonGlobe.com.
“We are now looking at how we display and order content differently from screen size to screen size,” said Jeff Moriarty, Boston Globe VP of digital properties in an interview last year. “This ‘responsive content’ concept is emerging and we are starting to see in data that users want different types of content depending on their context and the device they are on. We have to now think about how content performs differently from the biggest screens to the smallest, how that content is organized and even how headlines are written from platform to platform.”
What’s The Best Way To Build A Responsive Website?
The first thing to think of when building a responsive site is simplicity. Web designers love to show off that they can design the hell out of a website. They fall in love with their code and all the cool things that it can do.
“I think the challenge for me is to use it cautiously - and not try to be overly artsy with it,” said Ryan Light, a website designer working at CoachUp, a startup in Boston.
Light says that some website builders may over-design for the desktop, making some websites fun to play with but absolutely impossible to navigate.
“I find that a lot of people overdo it on their actual websites that are rendered in the browser,” Light said. “I find responsive design helpful for mobile browsing - but clumsy for Web typically.”
So designers, keep it simple.
Best Practices
There are a variety of ways to go about building a responsive website. French e-marketing company Splio aggregated some of the best practices in a very long infographic, shown below.
The idea is to focus around content and avoid the pitfalls that certain aspects of websites can create. For instance, pictures and advertisements can be a problem.
Check out the infographic below. What is your approach to building a responsive site? Let us know in the comments.
