Designing for Phablets

It seems that every time web developers become proficient at creating sites that will render correctly on any device, the industry releases yet another type of device that requires changing design strategies. Such is the case with the phablet. (For the uninitiated, a phablet is a device that combines the features of a smartphone with a tablet, and is between the two devices in terms of overall size and screen size.)

Before you dismiss the importance of mobile marketing, consider a few statistics. According to a study in the UK, 63 percent of consumers used their smartphones during a shopping trip and 61 percent used their smartphones before a shopping trip. Those who used their smartphones while shopping spent an average of 61 percent more, while those who did not use their smartphones spent an average of 10 percent less. Furthermore, the number of smartphone users increased 68 percent between 2012 and 2013, and smartphones now account for approximately 74 percent of all mobile phones used or owned in the U.S. What all this means is that businesses must “go where their customers will be” and reach customers on their mobile devices.

Differences Between Phablet, Desktop and Smartphone Web Design

Even though a website designed specifically for viewing on a desktop monitor should be organized, easy to navigate and quick to load, developers have more leeway in the overall design. They can use more graphics, fit in more text and use advanced features, such as animation, to enhance the appeal.

However, merely taking a website such as this and shrinking the screen size to accommodate a smartphone or phablet is not an acceptable solution. Smartphones have much smaller viewing screens, and a website can quickly alienate a viewer if areas are cut off, images load too slowly or navigation is difficult. The same principles apply to designing websites for phablets. Although it is true that phablets have larger screens and that many phablets are more powerful than a smartphone, they are still not equal to the display capabilities of a desktop monitor.

Using Responsive Web Design

Designing a website for each specific type of device is not only costly, but it is also an exercise in futility — every year, a new device or technological breakthrough can easily render the design obsolete. Instead, applying the principles of responsive web design allows your site to render properly on all devices and across different platforms.

Making a site responsive is far more than just adjusting the size of the screen. Responsive web designs allow the use of information regarding the device to re-prioritize and realign content. The layout of the site, for example, may be different for a phablet from a full-blown website, or the content may be displayed in a different order. It may also be necessary to restrict the amount of data sent to users’ devices; some devices simply cannot handle every attribute or file size.

Responsive web design focuses less on the specific device and more on the size of the display associated with the device. For example, a desktop monitor may be able to accommodate a site at 2880 x 1800 pixels, but maximum for a smartphone or phablet is currently about 1920 x 1080. However, some phablets are only capable of 800 x 480, and most are in the 1280 x 720 to 1280 x 800 range. Thus, if you attempted to design a separate site for each set of phablets, you would currently need at least six different sites.

If you design a site for the most powerful phablet, you eliminate many potential users. If you design for the least powerful, your site will not be optimized for larger displays. Responsive web design eliminates these problems by automatically choosing the correct way to render your site on the device that is accessing it.

In Conclusion

As mobile devices, such as phablets, grow in popularity, they will gain more functionality and sport larger displays. The introduction of the phablet has impacted web design, but only in that it is one more mobile device that should be added to the list of devices included in a responsive web design. Other alternatives are more costly and will quickly become obsolete. Mobilizing your website and making it responsive offers the best combination of return on investment and an engaging customer experience.

If you have questions, feel free to contact EX Squared. We have extensive experience in website design, including responsive design and mobile web design.

Learn about how we’ve delivered:


TeamAsAService remote staffing to accelerate results

View Case Study