It seems like every day the number of different types of handheld, mobile devices continues to grow. What was once a simple cellular telephone that connected people through texts and photos, has exploded into an entire marketplace of these mini-computers. So prevalent and ubiquitous are these devices that 75% of Americans admit to using them in the bathroom from a survey called “it in the toilet” performed by a marketing company called 11Mark.
Our smartphones, tablets, laptops and other handy mobile gadgets are not only redefining our everyday lives, they are also redesigning the internet. The word responsive is loosely defined as “reacting,” but when it comes to connecting with websites, RWD (Responsive Web Design) and the word responsive itself, means something a bit different.
RWD is an approached used by web designers aimed at crafting sites to provide an optimal viewing experience, which includes easy reading with a minimum amount of resizing, panning, and scrolling necessary to navigate these pages. This type of responsive design must be viewable across a wide range of devices, everything from larger desktop computer monitors to smaller mobile phones.
There are many challenges that our savvy web designers face when building websites in today’s mobile world, but here are the top three components that need immediate attention:
#1 – IMAGES & VIDEO
Web designers and online marketers alike understand the importance of pictures, photos, videos and other images, which are not only visually appealing, they also get much more attention than mere text alone. There are a myriad of challenges when utilizing images that are more mobile-friendly on these smaller screens where it isn’t necessarily about size alone. Many other considerations come to mind beyond placement, such as:
- Compression and pixel amounts
- Size and cropping
- The use of various visual formats, .jpeg, png and newer WebP, which is over 25% smaller than it’s previously mentioned counterparts.
#2 – TEXT & CONTENT
Size and placement continue to play an important role in effective RWD and text within content can be vital to the overall user experience. Obviously when it is too small to be viewed legibly, being over sized is a waste of valuable web page space or “real estate” as many designers label this precious online commodity. This can present a tremendous challenge on modern websites.
Most designers have embraced a new vertical or approach towards layout when it comes to handheld devices rather than the traditional horizontal method that is more effective for the larger desktop screens. Think of it this way, for the best RWD, these modern sites will become more commonly laid out in a portrait setting rather than the more traditional landscape approach.
#3 – NAVIGATION
Today, the word navigation also garners a new definition on the world wide web as it was once associated more with paths, trails, roadways, highways and byways. Navigating on websites now means better options when utilizing links, connecting with social media through buttons and badges. Once again, while placement is often key, proximity of these items is also important.
For example, in an effort to save space, placing any of these too close together may cause accidental taps from the user thereby frustrating them during the navigation process. This can increase bounce rates and send the fickle, mobile web browser to go elsewhere.
Although these “big three” are just a piece of the web page pie when it comes to RWD, there are very important slices when it comes to the overall functionality and responsiveness of a modern website. These aspects will help ensure better visibility in an online world full of countless content where everyone is trying to be seen and stand out from the rest of the internet crowd.
_____________________________________________________________________________
Nick Rojas is a business consultant and writer who lives in Los Angeles and Chicago. He has consulted small and medium-sized enterprises for over twenty years. He has contributed articles to Visual.ly, Entrepreneur, and TechCrunch. You can follow him on Twitter @NickARojas, or you can reach him at NickAndrewRojas@gmail.com.