Desktop, Smartphone, Tablet, today we’re designing for more devices, input types and resolutions than ever before. Determining which device a user will be using to read your content is impossible, and once published online is at the mercy of those who view it.
With one billion people using a mobile device as their primary source of internet usage, tablets becoming widely popular as of late, and game consoles providing users with a widescreen, television-centric web, developers must start considering the best method to reach their users.
What is responsive web design?
Responsive web design is a technique which allow developers to create flexible web pages by leveraging media queries from the Cascading Style Sheets 3 (CSS3) specification. This flexibility allows the layout of a web page to scale to the viewing environment while maintaining a single URL for both your desktop and mobile content, making it easier for users to interact with that content.
How do you generate a responsive web design?
In order for a design to be responsive, the following three attributes are needed:
· A flexible, grid-based layout - Based off of percentages instead of pixels, a fluid grid allows developers to define scalable columns, gutters, divs, and text.
· Flexible images and media – Images, videos, sliders, etc. must all be scalable to fit devices, and will often have a max-width defined. This enables media to scale down to fit the altered screen of the web page.
· Media queries – As mentioned above, these not only account for the media type, but the size of the viewpoint (resolution).
Why do you need to use responsive web design?
This technique could make or break the user-friendly experience you are looking to provide. Without a mobile strategy in place, even a slight drop in a browser below the expected minimum width of your web page could alter the reader’s experience resulting in a bounce, when a possible opportunity could have been presented. Responsive web design also has an advantage over other types of mobile strategies in the sense that it isn’t used to optimize the user experience for only mobile devices, but all devices. A properly implemented responsive site should not only gracefully scale down to an iPhone, but up to a large widescreen monitor and beyond.
Though responsive design is already supported by 70-80% of web traffic and by more than 90% of mobile devices, it may not always be the answer. Sometimes a mobile optimized site, a mobile app, or responsive design in conjuncture with one of those will make more sense than a fully responsive solution.
There’s a lot to consider when determining the best mobile strategy for a project; and with the mobile web estimated to overtake desktop web usage by 2014, you can understand why responsive web design is becoming so popular.
0 comments:
Post a Comment