With so many people looking for information on their smartphones, it's critical that your website employs a responsive design. A website that has a "responsive design" responds to the screen size of the device the reader has and narrows or widens pages so information fits the width of the device. The smaller the device, the narrower the space that is available for showing your website pages.
In the early days of smartphones, website designers had to create alternate, much narrower versions of their website pages to show them in a reader-friendly way. Fortunately, these days, the do-it-yourself website design platforms like Squarespace and Weebly create multiple versions of your website pages automatically. These versions accommodate many different screen sizes – from small cell phones to tablets, laptops, and large desktop monitors. And the good news is you don't need to do any extra design work to make this happen. It just works!
Previewing your page as a cell phone user will see it
Before you consider a website page ready to publish, check the page with the Mobile preview feature so you can see the page as a cell phone user will see it. Chances are that everything will look just fine, but it's a good idea to preview your website in the smaller size to make sure it looks good.
In Weebly, the Mobile preview is activated by choosing the cell phone icon at the top of the Editor window.
In Squarespace, the Mobile preview is activated by by dragging open the Device Preview tool at the top of the Site Preview window and choosing the cell phone icon.
Mobile preview checklist
Here are some things to check to be sure your website works well for cell phone users:
- Is there a manageable amount of text, so that it is comfortable for a cell phone user to scroll through and read?
- Are the text font, size, and color you chose clear and readable?
- Is it clear how to navigate to other pages on your site?
- Are pictures an appropriate size?
- Are text blocks in the correct order?
- Are buttons visible and near the text that explains them?
If you see something that doesn't look right, adjust the overall page design so it looks good in the regular large size and in the narrower cellphone size.
With a clean responsive design, your website is ready to go for your on-the-go customers.
Update 9/18: Automatic responsive design is available with Squarespace and Weebly, but not with Wix. That's why I decided not to specialize in Wix, as I describe in this blog post: "Why not Wix?"