Scribd
Upload
273 views3 pages

Responsive Web Design Tipsheet: Start Small

The document provides 9 tips for creating responsive web designs: 1) start with mobile-first wireframing; 2) use flexible ratios and percentages for layouts; 3) optimize images for different screen sizes; 4) make text and buttons larger for mobile; 5) use CSS over JavaScript for resizing; 6) use flexible font units like em; 7) consider both vertical and horizontal screen orientations; 8) collapse content into fewer columns at smaller screen sizes; and 9) keep sections short to prevent long scrolling on mobile. It encourages downloading worksheets to apply these best practices.

Uploaded by

santosh kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
273 views3 pages

Responsive Web Design Tipsheet: Start Small

The document provides 9 tips for creating responsive web designs: 1) start with mobile-first wireframing; 2) use flexible ratios and percentages for layouts; 3) optimize images for different screen sizes; 4) make text and buttons larger for mobile; 5) use CSS over JavaScript for resizing; 6) use flexible font units like em; 7) consider both vertical and horizontal screen orientations; 8) collapse content into fewer columns at smaller screen sizes; and 9) keep sections short to prevent long scrolling on mobile. It encourages downloading worksheets to apply these best practices.

Uploaded by

santosh kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Responsive Web Design TipSheet

Whether you’re re-designing or creating a completely new website, it can be difficult to keep track of all
the necessary implementations. So here are some helpful tips to keep in mind when creating responsive
websites to maximize your customer retention.

Start small

1 When creating responsive websites, begin with wireframing for the smallest screen
size and work your way up. By designing for mobile first, not only will you have an
easier time adapting to larger and more spacious sizes, you will avoid unnecessary
complications.

Create highly adaptable layouts

2 There are millions of browser sizes out there. From desktop computers, tablets,
smartphones and even watches now, it’s impossible to design specific pages for
them all. But you don’t have to. Use ratios and percentages to create layouts that
adapt to any browser size and save yourself the hassle of having broken pages when
the next gadget comes out.

Optimize images

3 We all want crisp and high resolution images on our websites, but when customers
view them on their mobile phones those images have slow loading times. Create
multiple optimized versions for each image and let your website swap in the lower
resolution versions on mobile browsers. Not only will your website load faster, but
your customers will appreciate the lighter load on their mobile data plan.

Make things bigger for mobile

4 Designing for the small mobile screening doesn’t mean scaling everything down.
Actually it’s quite the opposite! Think back on how frustrating it was to pinch your
fingertips against your mobile screen to click on a tiny button or read some tiny text.
Make buttons and font sizes reasonably large on mobile layouts.

Responsive Web Design TipSheet 1


CSS over Javascript

5 Since you’re designing for the millions of screen sizes that are in the hands of your
customers, you should be doing most of the work in CSS and not Javascript. Using
CSS for the resizing of elements on your website will increase its delivery speed.

Use flexible font units

6 Flexibility is the name of the responsive game and fonts should be scaling with the
rest of the content on your web page. Like how ratios and percentages are used for
defining grid sizes, font sizes should be defined using em instead of px.

Don’t forget about view orientation

7 With so much to do it’s easy to forget that your customers can view your websites
with different orientations on their mobile device. So while your design may look
great vertically on mobile, some elements may not be optimized for the horizontal
view. So keep orientation in mind when you’re wireframing.

Collapse into fewer columns

8 Content should be organized into fewer columns for each smaller browser size.
Desktop may have a 4 column grid for the news section, but then collapse into a 3
column grid for tablet, before finally collapsing into a single column for mobile.
This helps direct the customer to the content you want them to see.

Keep sections short

9 Page layouts grow longer as window sizes shrink in width. Keep each section short
to prevent overly long vertical scrolls in mobile. Doing so helps to make sure all your
content is quick and easy to access for your customers.

Responsive Web Design TipSheet 2


Now that you know the best practices when it comes to Responsive Web
Design, go ahead and download our Responsive Web Design Worksheet
and put these best practices into action.

You’re on the right path for maximizing customer retention!

Get the WorkSheet Get the ScoreCard

Want more tips?


Get a free assessment

Responsive Web Design TipSheet 3

You might also like