No products in the cart.
Google has officially recommended Responsive Web Design as their preferred method for building mobile websites. If you have a website or a blog, it is time that you seriously consider switching to a responsive design instead of maintaining a separate mobile-friendly (or tablet-friendly) website.
If you are new to the concept of Responsive Web Design (RWD), here’s a quick guide that should answer most of the common questions that you may have around this technique. Let’s get started.
Q1 - Why should I switch my website to Responsive Design?
A1 - Your website looks great on the desktop screen but the same may not be true when your site is viewed on a smartphone, a tablet or an e-reader (like the Kindle). Once you make the design responsive, the website will look good (and readable) on all screens and not just the desktop.
Q2 - What are the other advantages of switching to RWD?
A2: With Responsive Design, you can create one design and it will automatically adapt itself based on the screen size of the mobile device. This approach offers plenty of advantages:
Q3 - What should I know to get started with Responsive Design?
A3 - Responsive Design is pure HTML and CSS. You create simple rules in CSS that change style based on the screen-size of the user’s device.
For example, you can write a rule that says if a user’s screen-size is less than 320 pixels, don’t show the sidebar or if the screen size is greater than 1920 pixels (widescreen desktop), increase the font size of the body text to 15px. Here are the same rules translated to code:
Q4 - How do I check if particular website is makes use of Responsive Design?
A4 - That’s easy. Open that website in any desktop browser and resize the browser. If the site’s layout changes as you resize, the design is responsive. You can also use these online tools to compare the different layouts of a page in the same tab.
Q5 - Can you share examples of some good websites that are responsive?
A5 - That are quite a few but my favorites include The Boston Globe (news website), Simple Bits (personal blog), Happy Cog (web design agency), Barack Obama (yes, the President’s website), Shake Shack (restaurant chain), Nicole & Josh (wedding website), Food Sense (cooking & recipes), dConstruct 2012 (design conference) and Good to Know (Google’s site on online safety). You should also check out mediaqueri.es, a curated gallery of websites that use Responsive Design.
Q6 - If I go with the Responsive Design approach, will my website work with older browsers?
Q7 - Does Responsive Design play nicely with advertising networks like Google AdSense?
A7 - If you using ads on your website, you should carefully choose the formats because wide units (like the 728x60 pixel leaderboard) may not fit on a 320px mobile screen. I prefer using standard rectangular units (like 300x250) on my blog since they easily fit on smartphone screens and widescreen desktops.
The one issue with Responsive Design is that ad slots on your website that are above the fold (ATF) often gets pushed down on the mobile version and clients may not always like that (if they have paid you for a premium ATF slot).
Q8 - There are thousands of mobile devices. What screen resolutions should my responsive website support?
A8. Open your Google Analytics dashboard and choose Audience -> Technology -> Browser & OS. Now switch to the Screen Resolution tab in the report and see the resolution of mobile devices that people are using to browser your site.
I would recommend setting break points for at least the following viewports in your CSS3 Mediaqueries - 320px (iPhone landscape), 480 px (iPhone portrait), 600px (Android Tablets), 768px (iPad + ~Galaxy Tabs) and 1024px (iPad landscape and desktops).
Q9 - How do I get started with Responsive Web Design? Any good tutorials?
A9 - First, read this article by Ethan Marcotte and then buy his book. Ethan coined the term and popularized the technique ever since he wrote that article for A List Apart back in 2010.
Here are more online resources to help you get started:
Q10 - What are some of the disadvantages of using Responsive Design?
Finally, there is a learning curve involved and it will take effort to add a responsive layer to your existing website. Sometimes it may make more sense to start from scratch rather than making your existing fixed-width website fluid.
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory
Digital Inspiration has won several awards since it's launch in 2004.
Google Developer Expert
Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.
ProductHunt Golden Kitty
Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.
Microsoft MVP Alumni
Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.
Google Cloud Champion
Google awarded us the Champion Innovator title recognizing our technical skill and expertise.
Subscribe to our YouTube channel and get notified whenever we upload a new video tutorial.
We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.
Send personalized email to your contacts with Google Sheets & Gmail
Create pixel perfect documents from Google Sheets and Google Forms
Download emails and attachments from Gmail to your Google Drive
Send email to respondents when they submit your Google Forms
Email entire spreadsheets, selected cell ranges or send dynamic charts on schedule.
Turn your Google Slides presentations into animated GIF images and videos
Sign up for our email newsletter to stay up to date.
We will never send any spam emails. Promise.
© 2004 — 2023 Digital Inspiration® All rights reserved.