Skip to main content

How to Test Responsive Web Design WebSites


Responsive Web design has become one of the hottest trends in 2013.  This is due in part to the  growth of smartphones and other mobile devices. More people are using smaller-screen devices to view Web pages.

 Why Web Responsive Design

 Day by day technology in development environments the number of devices, platforms,and browsers that need to work with your site increases. Responsive web design represents a fundamental shift in how we'll build websites for the decade to come . The site wants to fit all small devices such as Mobiles and medium devices such as iPad Large One like systems, one site for every screen.

 What is Web Responsive Design

 1)Responsive websites respond to their requested resolution environment.

 2)Adaptive (Multiple Fixed Width and Height Layouts) or Responsive (Multiple  Layouts).

 3)Instead of responding to today's needs for a Desktop Web version adapted to the most common screen resolution, along with a specific mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to nearly any screen.

 Web Responsive Design Core Concepts

 Three key technical features are at the heart of responsive Web design:

 1)Media queries and media query listeners
2)A flexible grid-based layout that uses relative sizing
3)Flexible images and media, through dynamic resizing or CSS

 If we have successfully developed a Web Responsive Design Site then how to the Test Responsive Web Design web site?

 You can test it simply by re sizing the browser window, but it's not convenient to resize to a specific dimension (width and height) each and every time.

 Here are the tools or utilities to test effectively.

 Screenfly

 Screenfly is a web based tool, very handy when you don't know device resolution. you need to enter an URL and select the device. I like its neat and clean UI. 

 Responsivepx

 This is another tool Responsivepx is a web based tool. You need to enter an URL and select the height and width to test.

 Matt Kersley

 Matt's tool is an iframe based online tool. Simply enter the URL of your website and test it in various browser resolutions at a time.

 Web Developer Extension

 Web Developer extension adds various web developer tools to a browser. The extension is available for Firefox and Chrome. It's my favorite way to test responsive design. It can be used on local sites without an internet connection. You can resize a window to a standard dimension on a single click and allows you to create your own dimensions by entering width and height. 

 Opera Mobile Emulator for Desktop

 Opera Mobile Emulator is a small, native application that's easy to install on your Desktop machine and runs exactly the same code as its mobile phone version. In that way, you can be assured that what you're seeing on your test environment is practically identical to the experience your end users will get.

 ProtoFluid4

 ProtoFluid simplifies the development of fluid layouts and adaptive CSS. It builds precise, dynamic viewports in which to test your website or app .

 I hope this helps many people, because I searched many options. Based on my experience I am sharing my views. Share your opinion about how you are testing responsive web design.
Labels:

Comments

Post a Comment

Popular posts from this blog

How to hide url parameters in asp.net

There are different ways to Hide the URL in asp.net , you can choose any one from bellow options . Previously I was Explained about the  Difference between Convert.tostring and .tostring() method Example  ,   Reasons to use Twitter Bootstrap , How to Register AJAX toolkit in web.config file in asp.net a) Using Post Method b) Using Of Session . c) URL Encoding & decoding process . d) Using Server.Transfer() instead of Response.Redirect() method (1)Use a form and POST the information. This might require additional code in source pages, but should not require logic changes in the target pages (merely change Request.QueryString to Request.Form). While POST is not impossible to muck with, it's certainly less appealing than playing with QueryString parameters. (2)Use session variables to carry information from page to page. This is likely a more substantial effort compared to (1), because you will need to take session variable checking into account...
Post a Comment
Read more

How to send mail asynchronously in asp.net with MailMessage

With Microsoft.NET Framework 2.0 everything is asynchronous and we can send mail also asynchronously. This features is very useful when you send lots of bulk mails like offers , Discounts , Greetings . You don’t have to wait for response from mail server and you can do other task . By using     SmtpClient . SendAsync Method (MailMessage, Object)    you need to do  System.Net.Mail has also added asynchronous support for sending email. To send asynchronously, you need need to Wire up a SendCompleted event Create the SendCompleted event Call SmtpClient.SendAsync smtpClient.send() will initiate the sending on the main/ui  thread and would block.  smtpClient.SendAsync() will pick a thread from the .NET Thread Pool and execute the method on that thread. So your main UI will not hang or block . Let's create a simple example to send mail. For sending mail asynchronously you need to create a event handler that will notify that mail success...
Post a Comment
Read more

12 Sentences that Change Your Attitude at Work

If you work with the right attitude and right way, you’ll have your productivity up another level, and eventually, success will be just a step away. These are the 12 encouraging sentences that could change your attitude at work. #1 Don’t work harder, work deeper. #2 When you are young, work to learn, not to earn. #3 If you work really hard and are kind, amazing things will happen. #4 Productivity is never an accident. It is always the result of commitment to excellence, intelligent planning, and focused effort. #5 Most people work just hard enough not to get fired and get paid just enough money not to quit. #6 Boost your productivity by taking action immediately after setting a target even without perfect plans. Adjust your course along the way. #7 To be successful, the first thing to do is to fall in love with your work. #8 Identify your peak hour of productivity. Schedule your most important task for this period. Work on unimportant tasks during non-peak hours. #9 Be a mo...
Post a Comment
Read more