WordPress Tip: Display Viewport Resolution with the Frontend Developer Plugin

The Frontend Developer plugin is a handy little tool for WordPress theme developers who are working with media queries. The plugin hooks into the admin bar to display the current viewport resolution so that developers know what they’re working with.

The indicator automatically updates as you resize your browser window. In addition to displaying common media queries for mobile, tablet and desktop, the plugin performs some helpful checks:

Highlights defined widget areas
Highlights links that do not have a destination set
Highlights images without alt tags set

You can see an example of an image without an alt tag below, highlighted by the plugin:

The Frontend Developer plugin is a useful addition to your toolbox for theme development, as it makes it easy to define styles for various viewport resolutions. Download it for free from WordPress.org.

Category: Plugins

Tags: frontend development

4 responses to “WordPress Tip: Display Viewport Resolution with the Frontend Developer Plugin”

Tomas M. says:

May 17, 2014 at 7:07 PM

I guess that also helps a bit with the accessibility testing (image ALT tags).

Create forum topic from comment

Loading…
- Peter Knight (@peterrknight) says:
  
  May 18, 2014 at 12:00 AM
  
  Hey nice, it’s a weekend posting!
  
  From an accessibility standpoint most images in blog posts don’t really need an alt tag though. If an image is there just to spruce up a post/make it more visually engaging, it probably doesn’t need an alt tag. (http://green-beast.com/blog/?p=81)
  
  Create forum topic from comment
  
  Loading…
  - Justin Kopepasah says:
    
    May 18, 2014 at 1:30 AM
    
    Peter,
    
    As per the W3 take on Accessibility:
    
    If alt text isn’t provided for images, the image information is inaccessible, for example, to people who cannot see and use a screen reader that reads aloud the information on a page, including the alt text for the visual image.
    
    As such, images should always use and alt tag (although at times I forget as well).
    
    Create forum topic from comment
    
    Loading…
    - Peter Knight (@peterrknight) says:
      
      May 18, 2014 at 7:21 AM
      
      All that the W3 is stating there that without an alt text there is no way for people who cannot see or have images disabled to know what the image is about. That does not mean all images are required to have an alt text. Because not all images are that vital to the content, which the article I linked to does a great job describing.
      
      It can be put in another way, if an alt text is going to provide such a visitor with relevant information, then an alt text makes things more accessible. I would contend that for blog post images this is usually not the case. Bloggers often use decorative pictures to make people more likely to click and read and to create nicer looking design. And themes encourage featured images, so images get chosen often to make the content visually more appealing.
      
      People who are not seeing these images in the first place do not really benefit from having a textual description of those pictures.
      
      In fact the alt text could make things less accessible by disrupting the flow of reading. Take this very blog post, a screen reader would have to parse a hyphenated word “frontend hyphen dev hyphen plugin”. Best case it adds a little meta information that the reader may or may not find interesting, but if you omit it the page didn’t all of a sudden become less accessible.
      
      Create forum topic from comment
      
      Loading…