Over the past few days, you’ve been brainstorming about your brand
and thinking about the elements of a well-designed site, from colors and
fonts to background.
None of that matters if readers can’t view your site properly across various devices. We’re a culture on the go — no longer just reading on desktop computers, but consuming information on the phones in our pockets, and sharing thoughts from iPads at 35,000 feet.
In the Theme Showcase, you can choose from many themes that support responsive design: they’re built to look great across all devices, and “respond” to different screen sizes to ensure a seamless reading experience. (While some older themes aren’t responsive, these days all new themes are.) If you’re not sure if your theme is mobile-ready, check its description page; you can also search for responsive themes by filter.
*Like you’ve never done this.
To launch the Customizer, hover over your site’s name in the top-left corner of the screen, and click on Customize. In the panel that opens, you’ll see these three symbols near the bottom:
From left to right, these represent desktop view, tablet view, and smartphone view. Clicking between them emulates the look of your content on different screens, and you can see what your blog looks like in various sizes. Go ahead, click on one of them. What do you see? Then click on another view. What changes?
Make tweaks in the Customizer, and preview them on different screen sizes to make sure you’re satisfied with your blog’s look across all kinds of devices.
To see the difference, take a look at your site both with and without Minileven. If you know you have a lot of readers accessing your site on the go, consider trying a responsive theme — refer to yesterday’s assignment for info on how to preview different themes.
Questions? Ask away! For more convo, head to The Commons, where your co-bloggers can check out your blog on their own phones and tablets, and give you a heads-up if your mobile experience could use an adjustment.
None of that matters if readers can’t view your site properly across various devices. We’re a culture on the go — no longer just reading on desktop computers, but consuming information on the phones in our pockets, and sharing thoughts from iPads at 35,000 feet.
Today’s assignment: make sure your site is mobile-friendly, and familiarize yourself with the features of responsive design.Why?
- Because a responsive theme allows your site to look great on all screen sizes, from computer to tablet to phone.
- Because there are tools built in to WordPress.com to make this easy — there’s no need to know web development to have a mobile-friendly site.
In the Theme Showcase, you can choose from many themes that support responsive design: they’re built to look great across all devices, and “respond” to different screen sizes to ensure a seamless reading experience. (While some older themes aren’t responsive, these days all new themes are.) If you’re not sure if your theme is mobile-ready, check its description page; you can also search for responsive themes by filter.
*Like you’ve never done this.
Test different sizes right from your computer
You can use the Customizer to “test” your site on different devices — this not only allows you to see how responsive design works, you can also play with options to find the perfect mix that makes you happy on the big screen and the small.To launch the Customizer, hover over your site’s name in the top-left corner of the screen, and click on Customize. In the panel that opens, you’ll see these three symbols near the bottom:
From left to right, these represent desktop view, tablet view, and smartphone view. Clicking between them emulates the look of your content on different screens, and you can see what your blog looks like in various sizes. Go ahead, click on one of them. What do you see? Then click on another view. What changes?
If you have a responsive theme…
… you may find that want to make some changes — that font you loved might be too cramped on an iPhone, or you might not love the way your header changes on your Nexus. Sometimes, responsive themes move and condense different elements of your blog to create a better mobile experience, so you’ll want to make sure your widgets and menus work well in all cases.Make tweaks in the Customizer, and preview them on different screen sizes to make sure you’re satisfied with your blog’s look across all kinds of devices.
If you don’t have a responsive theme…
…ensure your site looks good on phones and tablets by enabling Minileven, a mobile-specific theme based on the Twenty Eleven theme. Any WordPress.com bloggers can use Minileven for their mobile site without affecting their standard theme; your blog will detect when a reader is viewing it on a phone or tablet and automatically show the mobile site.Note: you don’t have to activate Minileven if your current theme is already responsive — you’ll see a note in your Dashboard if it is.Minileven has a clean design and pulls in your custom header (along with other tweaks, like your custom colors of CSS), to give your mobile blog a personalized feel that’s simple and readable. To make sure it’s enabled, go to the Appearance → Mobile tab in your Dashboard and select “Yes” next to the “Enable mobile theme” button, then head to the Customizer to preview it.
To see the difference, take a look at your site both with and without Minileven. If you know you have a lot of readers accessing your site on the go, consider trying a responsive theme — refer to yesterday’s assignment for info on how to preview different themes.
Questions? Ask away! For more convo, head to The Commons, where your co-bloggers can check out your blog on their own phones and tablets, and give you a heads-up if your mobile experience could use an adjustment.
No comments:
Post a Comment