how to check website/blog responsive or not?

in this post i will show you step by step how to check your website / blog responsive or not. 

WHY  RESPONSIVE WEB DESIGN ?

With the invention of more and more new technologies and new gadgets the customers want to use the best and newest
gadgets for them. In past, it was only desktop computer which everyone used. So it was not important for the designers
to work on the responsive web design. Then laptops came, mobile,then tablets and so on.




Essentially, a responsive site provides a dynamic layout and sometimes content or functionality to fit the screen and
context of visitors. This is more than just hiding content for the mobile experience. This is fundamentally different
than earlier liquid designs. Those designs were coded using flexible elements that could resize the content as the user
changed the size of their browser window. However, they could not query the device. Responsive sites use CSS, bootstrap media
queries to determine the screen size and then call different rules to change the layout in order to optimize for each
screen size. 

Our Best Popular Projects & Posts

Post Link
School Management System With Full Source Code In php click here
ecommerce project in php click here
simple login and registration form in php click here
Synopsis for online rooms booking project based on PHP click here
add multiple images in codeigniter click here
beginners project in php with source code click here
dynamic country state dropdown in codeigniter click here
how to generate pdf using dompdf in codeigniter click here
add 1 day to current date in php click here
how to check website/blog responsive or not? click here
employee attendance management system project in php with source code click here
Select one checkbox and disable others click here
printing div content with css applied click here
best restaurants management system in php click here
Preview an image before it is uploaded using jquery click here
text editor in jquery click here
data table with export button in html click here
add multiple images in codeigniter click here
codeigniter some steps to install on Your server click here
ajax in php/codeigniter click here
Create Simple API CRUD with PHP and MySQL click here
How to integrate bootstrap theme in codeigniter click here
how to prepare for interview click here
Convert a date format in PHP click here
how to export html table to excel in jquery click here
how to create duplicate google peg using ajax click here
how to make dropdown searchable in html using jquery click here
how to find retirement date in php click here
online food order system in php with source code click here
school management project admin panel in php click here

BENEFITS OFFERED BY RESPONSIVE WEB DESIGN IN E-COMMERCE
Broader Audience and More Customers :
Since responsive designing makes an ecommerce site compatible for multiple devices, it makes your site universally accessible, helping you to reach broader audience. In addition to this, the clear and simple content hierarchy driven by responsive web design helps your customers to navigate your site smoothly and view products properly even on smaller screens, thereby increasing satisfaction among visitors and motivating them to turn into loyal customers. 
Increasing website reach to all devices:
 This is one of the most beneficial aspects of Responsive Websites Designs that they provide lovely user-experience across many devices neglecting their screen sizes. Their flexibility to adapt the screen resolution of all devices makes it more appealing. You can imagine your site as effortlessly working for all devices that gives most firm positive user experience. The optimization of your site to all available screens size gives a remarkable universal look. Increasing use of the internet and proliferation of web applications on tablet and mobile devices has been the driving force behind this development. Traditionally users would be re-directed to a device specific site (e.g. mobile), but responsive design means one site can be implemented across devices. 
Increase sale :
A full-fledged responsive ecommerce site is still considered as an exception since many online retailers are still refraining from responsive designing. So Developing ecommerce site responsive will give you a competitive edge, enable your consumers to view products clearly and will allow them to purchase products easily, thus boosting your sales. In fact, several reputed brands have found that having a responsive site has helped them to increase their conversion rate around 20%. Consolidate your analytics and reporting :A single responsive site means that you no longer have to track user journeys, conversion paths, funnels and redirections between your sites. Site analytics tools like Google Analytics are now optimised to handle multiple devices and responsive reporting. All of your tracking and analytics will continue to function and be condensed into a single report, allowing for easier monitoring and analysis. 

Maintain Site Speed: 
An ecommerce site includes lots of types of content, including product images of large sizes. Loading images won’t be problem in desktop, but large images can certainly slow down a site’s speed in smartphones. Speed matters a lot to visitors as research has showed that if your site takes more than 5 seconds to load, then visitors are likely to leave it immediately. In responsive designing, designers use techniques that can reshape images to an appropriate size based on screen size, thus helping your ecommerce site to maintain its speed. Lazy loading ensures that only a small portion of the images are loaded in one go; more images load as the user scrolls. 
Gives Open Support For All Browsers: 
The Responsive Websites Designs are more compatible with all search engines. Which is the most important & beneficial feature of responsive websites. As we know Greater the compatibility of a website to search engines greater its visibility. Visibility features eventually provide the ease of accessibly acquired websites on all devices. These visibilities will attract more users to your site that raises your income graph. 
Provides control and flexibility : 
changes can be made at one centralized place. You do not need to contact multiple vendors to make changes when your mobile site/ mobile application is built by different development companies. Increase Website visibility in search engines:
 Responsive Design can manage one website with a single set of hypertext links; therefore reducing the time spent maintaining your site. This allows you to focus on link outreach with a consolidated Search Engine Optimisation (SEO) strategy. SEO campaigns can be time consuming and costly, but by creating a responsive site, all of your efforts can be focused on a single site, with unified strategy and tactics across devices. Content is vital in SEO, good quality content which is regularly released improves your search engine ranking page positioning, therefore a further advantage of responsive design is that fewer resources can be wasted in low-level duplication of content across sites, the content need only be applied to a single site, increasing your chances or a higher search engine ranking. Additionally Google suggest (which Byte9 analytics can confirm) that mobile optimised, responsive sites are featuring prominently in localised search results. This is obviously of huge significance to high street and online retailers, amongst other burgeoning mobile use cases. 
Save time and cost on site management :
A primary benefit of adopting a responsive design is that it takes less time than creating an additional stand-alone mobile site, which has been the traditional approach. Testing across a number of websites also increases your development, support and maintenance overhead. As styles are re-used and optimised by device standardised testing methodologies can also be used. Clients will also find it much easier and less time consuming to manage and maintain a single site, with much less content to manage. Additionally a single administrative interface can easily be optimised, using layout and workflow tools to manage the correct content, or site templates that are being used for different devices. Business logic can be applied such that the overall multi-device experience can be significantly enhanced within a single administration. 
Low Cost & Ease of Maintenance :
It is the most important feature of RWD Websites, Games Apps for budget conscious customers. Instead of developing different versions of a single site that will compatible against desktop, laptop, iPods and smart phones you just need to develop a single site with responsive characteristics. This will eventually minimize the cost factor and give ease of maintenance. In long term flawless flow of your website makes it resistant of unseen defects. It will lower the burden of maintenance in a cost effective manner. Enhance user's offline browsing experience : Responsive design allows site owners to deliver quality content to audiences across devices, the offline browsing capabilities of HTML5 mean that sites can be easily accessed ‘on the go’. As HTML5 enabled tablets and smart phones proliferate this will become increasingly important. Email newsletters, and content contained in hybrid HTML5 web applications will increasingly be consumed on the move and in the absence of an internet connection. 
Social sharing :
When someone on a desktop computer shares the links on social networking site, other person who browses the website cannot open that in a mobile device usually. But in the responsive web design, you never face this problem; you can easily open the link in your mobile and can share the same on social networking sites.

how to check website/blog responsive or not?

first steps:

second steps: 

coppy your website url and paste on responsinator and click on go button




what we do if website not responsive

CSS media queries are best ways to provide better user experience for different devices by different styles. As part of css3, media queries expand the role of media attribute that controls how styles are applied   When using media queries, the content will respond to different conditions on specific devices. In a nutshell, a media query will check for the resolution, width, and orientation of the device and display the appropriate set of CSS rules. An example of a media query looks like this:

@media screen and (min-width:500px) {
     
    your CSS rules here
 
}

Following demonstrates CSS media queries for all browsers in action. They all show the same web page as it’s viewed in a desktop browser, tablet or an iPod touch.

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
{/* STYLES GO HERE */ } 


/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px)
 { /* STYLES GO HERE */ }

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) 
{ /* STYLES GO HERE */ } 

/* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
{ /* STYLES GO HERE */ }

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{ /* STYLES GO HERE */ } 

/* iPads (portrait) ----------- */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{/* STYLES GO HERE */ }

/* Desktops and laptops ----------- */
 @media only screen and (min-width : 1224px) 
{ /* STYLES GO HERE */ } 

/* Large screens ----------- */
 @media only screen and (min-width : 1824px)
 { /* STYLES GO HERE */ }

/* iPhone 5 (portrait & landscape)----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px)
 { /* STYLES GO HERE */ } 

/* iPhone 5 (landscape)----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* STYLES GO HERE */ } 

/* iPhone 5 (portrait)----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* STYLES GO HERE */ }



                     Attribute                                                Result
                     min-width      -   Rules applied for any browser width over thevalue  defined in the query.                       max-width     -  Rules applied for any browser width below the value defined in the query                      min-height      -   Rules applied for any browser height over the  value defined in the query. 
                    max-height     -   Rules applied for any browser height below the value defined in the query
        orientation=portrait    - Rules applied for any browser where the height is greater than or equal                                                       to   the width.
     orientation=landscape   - Rules for any browser where the width is greater than the height.

                         -                                                                                                                                         

                                                                                                                                                       

0 Comments