Responsive web design allows a website to adapt to different screen sizes, platforms, and orientations. It addresses the growing trend of device fragmentation where users access websites from desktops, tablets, and smartphones. Statistics show mobile internet usage is rising and will soon surpass desktop usage. Responsive design benefits users by creating a flexible grid layout, scaling media content, and using media queries to trigger breakpoint changes for different device widths.
10. WHAT ARE THE STATS?
• By 2015 more U.S. Internet users will access the
Internet through mobile devices than through
PCs or other wireline devices.
• 34% of U.S. smartphone owners, about 48
million Americans, say that they mostly go online
using their phone, rather than with a computer.
• By next year, tablet sales in the United States
will outpace those of netbooks, which were once
considered a salvation for the PC industry.
Note Pew Research: Mobile Fact Sheet
13. Let your layout and fonts
scale based on percentages
target / context = result
FLEXIBLE GRID
14. Scale up to container
Use largest size you'll need
FLUID MEDIA
15. Processed when certain
conditions are met
Produce "breakpoints"
Screen size, resolution,
orientation, and more
No added specificity
These let your design
"snap."
MEDIA QUERIES
Device Width
Small Screens
Landscape
480px
7” tablets
Portrait
600px
10” tablets
Portrait
768px
10” tablets
Landspace
1024px
Desktop Widescreen 1200px
17. Research Continuously
Surveys – What do your
customers want?
Analytics – What is
actually happening on
the site?
Stakeholders – How is
sports different than
local?
Brand – How do you want
to be perceived?
SUGGESTED WORKFLOW
