Give Your Photographs The Stage They Deserve – Make Sure Your Website is Mobile Ready

0Comments

If you post amazing professional-quality photographs to your website and nobody can access them, are they really that amazing? Nobody will know. All that hard work, focus, determination, and artistic ability -POOF – all for nothing. This is exactly what is happening to many very talented photographers. They pour their heart and soul into their art form and then entrust it to outdated technology that doesn’t adequately display their work on mobile devices.

ResponsivePortfolioSite

How important is being mobile friendly?

With the proliferation of mobile devices, it’s no surprise that many people do most of their web browsing on the go. Consider the following eye-opening statistics found on visual.ly:

  • Mobile search queries have grown five times in the past two years.
  • Nine out of 10 mobile phone searches result in a purchase or visit.
  • Three out of every five searches are conducted on a mobile device.
  • 99% of Smartphone owners use their mobile browsers at least once a day.
  • 52% of all local searches are conducted on a mobile device.
Mobile Search Statistics

Those are startling numbers, especially if you’re not keeping up with the changing face of the web. Unfortunately, it seems that there has been a lag in photographers adopting the appropriate web technology to showcase their work in a way that accommodates mobile users. To ensure that your site and your photography work are presented in an impactful way, it must be optimized specifically for mobile viewing.

Desktops and mobile devices don’t always play nice

Just building a site for the desktop doesn’t guarantee that the results will transfer to phones and tablets, or even the new smart watches. You do not want interested viewers to open your site on a mobile device and find a helter-skelter layout with distorted or inaccessible images. If this happens, it puts you in a difficult spot – you’re left hoping that they remember and desire to seek out your site for a second time when they’re back at a desktop computer. That’s wishful thinking considering the deluge of distractions we all encounter every day and the somewhat shrinking attention spans of the high-definition, high-speed digital generation. Here today, gone tomorrow, or maybe sooner in the case of your hard work and aspirations.

One of the worst-case scenarios you could be in is with a portfolio site that is completely based on Adobe Flash, leaving you to lose a whole group of mobile users who will rapidly look elsewhere when your site doesn’t load on their device. No one likes seeing a blank screen or a message saying, “This content cannot be displayed on your device.”

FlashOnlySite

Mobile devices often will not play Flash websites

Making your work accessible

It’s vital to give your audience exactly what they want – fast, fluid access to your dazzling work anytime anywhere. If they can’t clearly navigate your web site, it raises questions in their minds about your professionalism and your commitment to viewers and to your art form. This is not a good place to be for a proud, ambitious photographer. The good news, however, is that there are readily available solutions that you could leverage whether you already have an existing site or are starting one from scratch.

The key to optimizing the mobile user’s experience is to have a site that uses responsive web design or adaptive web design. These are two types of site programming that ensure a seamless transition of your content from the desktop to all mobile devices, regardless of screen size. Anything less than that, and you’re severely limiting exposure for your work and jeopardizing your chance of making a significant first impression. Negative experiences can turn into negative reviews. These travel fast in the digital age, and it’s difficult to change those perceptions once they’re public.

Using an adaptive design, you get a site that is specifically designed for particular browser sizes found on most mobile devices. In a lot of cases, the mobile site almost looks like a native app. Problogger.net (also run by dPS owner Darren Rowse) is an example of such a site. With this type of design, the experience on a mobile device is a bit different than that of a desktop, but you could still access the content in a readable format. This results in a fast and easy to read site that is user-friendlier on small web browsers.

ProBlogger Adaptive

Example of an adaptive design

A Responsive site is even better in that it is flexible in displaying the same content across a large array of devices while keeping much of the same styles. It maintains a fluid layout by using elements that are automatically resizable and could be placed where they fit best on the screen. This even works great on desktops when you want to shrink the browser window.

A perfect example of a website with a responsive design is Digital Photography School’s own site. If you’re accessing the site from a desktop browser, notice how the site responds fluidly as you resize the window. If you’re reading this from a mobile device, you’re still able to read the content just fine without having to manipulate the browser by zooming in and out or doing a lot of horizontal scrolling.

ResponsivePhotoSite

dPS is a responsive site

Simple changes make a HUGE difference

Updating your site from a clunky old format is quite simple, and the tools are readily available. Most people who have a blog use a Content Management System (CMS) such as WordPress, Joomla, or Drupal. These systems allow you to change the overall look and feel of your site by offering different designs or themes. There are plenty of available themes that are already responsive or adaptive right out of the box. These range in cost from free up to $100. A simple web search will reveal many sites that specialize in offering a variety of this type of themes. I’ve had great success using Theme Forest.

In addition to themes that are optimized for mobile browsing, these CMSs also allow you to install plugins that display the same content in a mobile-only theme. In some cases, especially if you already have an existing site, this might be the easier route to take.

Rock the mobile web

At some point, we’ve all experienced the disconnect between the artistic or creative world and the technology world. But in the modern age, you really can’t draw a distinction without suffering the consequences. It’s much wiser to embrace the role of technology in displaying art – in this case photography – and use it to your advantage.

With just a bit of effort, you can make sure that you nail that vital first impression with your fans and give your work the digital stage that it deserves!

Read more from our Tips & Tutorials category

Jorge Hassan

is a software engineer by profession, but with a serious passion for portrait photography. He particularly loves capturing the genuine emotions and personalities of people. He lives in Boston, Massachusetts with his wife and two beautiful children.

  • Joe Shelby

    One thing to think about regarding responsiveness and mobile isn’t just having the page layout correctly and adapt to smaller screens. It also means having an image automatically use a smaller version when on a mobile screen. E.g., if your image hosting service can provide scaled images automatically (flickr and picasa can, for example), then you would like the blog post to automatically pick the appropriate size for the screen size and network speed. E.g., on a phone at 3G, you don’t want to be sending your users the 3200px image when the phone would never reveal that detail at first glance. Better to send an 800px image first (that’s 1/16th the size of the original file, and therefore very fast on mobile environments), and provide a click-to-download (if you’re offering free downloads) of the higher resolution.

    There is a new html5 element, “picture”, that can help you pre-configure this with the right URLs and then use CSS to pick the right one. Some blog themes provide help on this, but it is still somewhat technical (and new, but IOS 6+ and Android 4.2+ browsers all support it, as does Chrome and Firefox on mobile).

    That said, I’m guilty of not having done this on my own blog. Go fig. Its on my todo list.

    A newer blog platform on the market (the blog software is free, though as with WordPress a good theme might cost money) is Ghost.

  • That’s a great point, Joe! I’m hoping that as more and more responsive themes are becoming available, they automatically do this type of thing to make it easier for the average user. Just recently I ran into a WordPress theme lets you upload a retina version of an image along with a lower resolution one.

  • JVodicka Photography

    A great article, this is crucial to a photographer’s portfolio website! To check out my site head to http://jvodickaphotography.weebly.com/

  • Mark

    Can’t agree with this statement…

    “A perfect example of a website with a responsive design is Digital
    Photography School’s own site. If you’re accessing the site from a
    desktop browser, notice how the site responds fluidly as you resize the
    window.”

    Like most sites this still uses the outdated concept of a central column of around 1000px width in which to display the content – in Firefox use the Developer Tools -> Inspector and choose the main white column. In the Computed CSS info you will see max-width: 1000px and width: 1000px. Modern computers have much larger screens – the one I’m currently using has a width of over 2500px – so if I increase the width of the browser it brings zero benefit.
    That is not a very responsive design.

    With regards the site design, whilst the article gives some useful information, I feel that the typical readership of the site would be better served by some additional examples of hosting services that cater to photographers and provide such functionality or WordPress setups that provide the necessary layout. More-so given this very site appears to use WordPress.

  • Thanks for giving your perspective, Mark. What you’re noticing is something that is often seen even among sites that have a responsive design. The width of the main content area is actually set to not extend past a given value, in this case 1000px. If you reduce the window size below that value, you’ll see the responsive behavior. In a lot of cases it makes sense to do this considering that only about 1% of users use a resolution above 2500px according to statistics.

  • walwit

    That was the first thing I noticed when the new DPS mail messages came to my computer screen: It was a narrow column all to the left, like when I started making my first web designs many years ago.
    This web page I’m writing now is Ok but uses only a fraction of my computer screen.

  • WillyPs

    1000px is a good choice… if you spread text too wide, readability goes down, not up.

    There are sites that allow you to view your site on various simulated devices, for example: MobileTest.me – Test your mobile sites and responsive web designs

  • Dragos

    Hi Guys,

    Just released a FREE responsive WordPress Theme for Photographers

    http://zenphotothemes.net/demo/elandel

    Features:
    – Clean, strong design, with light and dark versions
    – Built on Bootstrap 3.2 responsive engine
    – Sticky menu with dropdown and mobile support
    – Smooth AJAX page transition
    – FullScreen custom gallery with touch / swipe and mobile ready
    – Smooth scrolling and slick, elegant CSS3 animations
    – Optimized for speed +85 with Google Page Speed test, and 99 for Mobile User Experience
    – Theme structured with Portfolio Post Type plugin, allowing you to change themes without losing content
    – FREE forever (or as long as possible )
    – Check it out and let me know what you guys think.

    http://zenphotothemes.net/demo/elandel

    Happy Holidays!!

    P.S. Feedback is greatly appreciated and will help improve quality and create better value themes

Join Our Email Newsletter

Thanks for subscribing!


DPS offers a free weekly newsletter with: 
1. new photography tutorials and tips
2. latest photography assignments
3. photo competitions and prizes

Enter your email below to subscribe.
Email:
 
 
Get DAILY free tips, news and reviews via our RSS feed