Responsive Design
What is Today Web Design Trends:
Almost every new client these days wants a mobile version of their website. It is practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle and all screen resolutions must be compatible, too. In the next five years, we will likely need to design for a number of additional inventions. When will the madness stop? It would not, of course.
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.
Responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design. Let us talk about all of these features, plus additional ideas in the making.
Test for Responsive Design:
- Your site is easily accessible on any type of device.
- You only have one set of content to manage.
- Responsive design is better for SEO than a separate, forked mobile site.
- Columns and images are automatically adjusted, resized and moved automatically according to the screen resolution. This technique allows optimum ergonomics in preserving the layout and the display of the information from the website.
- The Responsive Design is a strategic long-term solution and you don’t have to worry bout redirecting users to the appropriate version of your website. Once deployed, there is very little maintenance to perform and the cost of development is more interesting creating a dedicated mobile site.
- Responsive Design also implies having a unique URL: perfect for promotional campaigns
Tools for Responsive Web Design……………….click here
How to test responsive designs for free
Stop resizing that browser, you are gonna wear it out! How many times have you heard that one? Well okay, maybe not so many times, but if you develop responsive design web sites, you know what I am talking about: with every DOM or CSS edit you are dragging that browser edge back and forth, testing your changes and looking for anything broken.”
Tools for Testing:
Deviceponsive
Site: http://deviceponsive.com
Devices and screen sizes emulated in this site are
- Macbook 1280 x 800
- iPad portrait 768 x 1024
- iPad landscape 1024 x 768
- Kindle portrait 600 x 1024
- Kindle landscape 1024 x 600
- iPhone portrait 320 x 480
- iPhone landscape 480 x 320
- Galaxy portrait 240 x 320
- Galaxy landscape 320 x 240
As with most of these tools, scrollbars are displayed on the smaller devices. On the actual device they would not display, but to allow scrolling the test view on a non-touch scroll device, some concessions must be made.
Responsive test
Site: http://responsivetest.net/
Responsive.is
Site: http://responsive.is/typecast.com
Screenqueries
Site: http://screenqueri.es/index.php
Screenqueries
Site: http://screenqueri.es/index.php
Screenfly (PIXEL PERFECT TESTING)
Screenfly really steps up the usability quotient. It offers nine bigger-than-tablet devices, from 10″ notebook to 24″ desktop, five tablets, nine smartphones, three television sizes, and a custom screen size option. Any option you choose can be rotated to portrait or landscape with a separate menu control. You can choose to allow scrolling or not, and you can generate a shareable link with the click of a button.
The site is pro actively useful with how it presents pixel dimension information. Each device in the menus is shown with name and pixel dimensions, the dimensions of your own actual browser window are shown near the top right of the window, and the selected optional dimensions are shown in a footer under the display, along with the URL of the site being tested. That little feature adds a nice touch for documenting screen shots and sharing the information with clients.
LEAVE A COMMENT