Almost every year, one of the most anticipated tech events is hosted by Apple; these launch events introduce new products and updates to existing products, like iPhones and iPads. The most recent iPhone launch was no exception: people lined the streets outside Apple stores for blocks, hoping to get their hands on the latest iPhones: the Xs and the Xs Max.
While Apple won’t provide any specifics on how many phones they have sold, estimates have been done that believe Apple sold a total of 52 million iPhones in the first three months of this year and that the iPhone X was their biggest individual seller. With all of these iPhones on the market, it is imperative that your website is specifically designed to take advantage of its new layout and features.
Here’s how you can design your website to do just that:
How The New Models Effect Websites
When someone first gets their new iPhone, they will notice that the border between the screen face and the phone’s frame (called the bevel) is virtually non-existent. This means that the entire phone will appear to be one big screen with no framing around it. Since most websites are not designed for this type of display, the phones will feature a “safe area” on the screen around the site so that it will not appear to be broken or distorted. This safe area will be filled in with a background color.
In addition, the new design features a cutout area at the top of the phone (usually referred to as the “notch”) and no home button (this has been replaced by a line at the bottom of the screen). Because of the new design style, websites may have issues with displaying fully and having all features visible and available.
How to Design For The New iPhone
For most websites, this new design plan is not going to be an issue. If you use mainly text and images, the layout will display flawlessly using the background color in the “safe area.” However, there are a few things you should look for:
- Whole screen—To utilize the whole screen of the iPhone for your site, you just need to tweak your website by changing the viewport meta tag called “viewport fit.” As a default, this is set to “auto.” To change it to full screen, you change the tag to “cover.” You can then refresh the page and see how it looks, but the notch may cover some of your features and the bottom line for navigation may be harder to use.
- Redesign—Once you’ve gone whole screen, you need to reset your features to get them out of the covered areas. WebKit includes a new function called env() which helps you with this. There are four default environments that you can add padding to so that you can shift your features out of this area. They include “safe-area-inset-left,” “safe-area-inset-right,” “safe-area-inset-top,” and “safe-area-inset-bottom.”
Once you play around with the insets for these and add some padding, you will be able to shift features around on the page so that they are visible and fully functional. There are further elements that have min() and max() variables that can be entered to help make this process easier to get through.
With a few simple tweaks to your existing webpage, you can maximize the ability of viewers to see your site on all formats including the new mobile technology employed with the iPhone X and its Xs variants. This is imperative as more people than ever are viewing online content through their smartphones.