Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
Trends in Web design have a tendency to come and go. Responsive Web design, however, is looking more and more like one of those trends that will one day become an industry standard.
Responsive design is the concept of developing a website design in a way that helps the layout to change according to the user’s computer screen resolution. It affects layout (including menus), image/video size, and now even the amount of text you can view on a page as the browser size is reduced. The results are sites that aim to keep the most important elements on screen and prioritized, no matter the browser size and orientation. Its three most essential elements are:
- Fluid Layouts
- Flexible Images
-
Media Queries
Designing a website is a complicated process. Adding a responsive
element makes that an even more complicated process – a desktop site is
now the same site that will be viewed also on tablets and mobile
devices, except it will look much different. This means that when a site
is designed to be responsive, it requires two additional designs: one
for tablet size resolution (smaller than 980px wide) and another for
mobile devices.
Starting on the home page:
You may feel like there is another page that has a higher importance
than the home page, but this was where we started. Here is our finished
original wire frame. You can see the mobile page length is quite a bit
larger due to the content wrapping over one column.
Main navigation:
We created a simple horizontal top navigation that would have a fluid width to change with the screen size. As the screen reduced the menu items would get closer together, then wrap on to the next line when necessary. This works for desktop, laptop and tablet widths, but going further down we wanted to create a menu that would suit the devices better. This gave us the menu split over two columns for the mobile device.
Other header components are aligned right and would just shift along as
the page width reduced.
Remember when you are styling the navigation to think how it will work
as the screen sizes changes. Certain styles, such as using tabs, may be
difficult to get to work and look good as the screen width reduces.
Footer:
Our footer is pretty simple, just think about what content you want and how it will change as the width changes and the columns reduce—this could be as simple as components wrapping underneath each other.
Footer:
Our footer is pretty simple, just think about what content you want and how it will change as the width changes and the columns reduce—this could be as simple as components wrapping underneath each other.
Other components:
Our simple grid structure made it easier to plan out our components. On the home page we used a horizontal scroller that had four components that would scroll across on a click. Our tablet layout let us keep this component but just amend it to only show three items, then on our phone width we removed the scrolling functionality completely and instead displayed each item vertically. Each component you design may require different behaviors, so think about how the visitor will want to use the component on different screen sizes. Phone users are more comfortable scrolling down a page than using small buttons to interact with the page
Our simple grid structure made it easier to plan out our components. On the home page we used a horizontal scroller that had four components that would scroll across on a click. Our tablet layout let us keep this component but just amend it to only show three items, then on our phone width we removed the scrolling functionality completely and instead displayed each item vertically. Each component you design may require different behaviors, so think about how the visitor will want to use the component on different screen sizes. Phone users are more comfortable scrolling down a page than using small buttons to interact with the page
No comments:
Post a Comment