WordPress Twenty Twelve Tutorial – Covers Features and Tips for Using the Free, Mobile Friendly, Official WordPress Theme for 2012
Mobile First Is Goal of WordPress Theme Twenty Twelve
Smartphone and tablet sales are rapidly overtaking laptop and desktop sales. A mobile device friendly theme is more important than ever.
Theme Twenty Twelve Detects Mobile Devices – Rearranges Format of Website to Suit Screen Size and Shape
WordPress Twenty Twelve Tutorial – Tips and Goals related to the theme. To accommodate the mobile device trend WordPress created theme Twenty Twelve which detects the device and screen size of the visitor plus it resizes and rearranges the site format to fit the screen.
To see what your website looks like on different devices you can go to Screenfly. Type in your website address or any website address. Put a checkmark in the box that says “use proxy server to mimic devices” to choose to see how your site looks on a variety of mobile devices.
You will be able to see how it looks on smartphones, tablets, desktops, and televisions. Different brands with different sizes are part of the available displays. You will see how the site formats and elements are rearranged.
For instance often the horizontal menu bar across the top is replaced by a single word that says “Menu” on the small smartphone size screen. When a viewer clicks “Menu” then the list of items shows up in a vertical list because the horizontal navigation menu won’t fit the small size of a smartphone screen.
Gone are the days when you designed a site and it only displayed with one look. The elements now reformat to fit the size of the device screen whether it is a smartphone screen, tablet, laptop or pc.
Plugins for Theme Twenty Twelve – “Jetpack” Plugin from WordPress Offers 23+ Features All With Just One Plugin – From Infinite Scroll to Social Media, Contact, Statistics, and More.
No Need to Install Plugins Individually for All These Features
Shortly after Twenty Twelve became the active default theme after a version update there was another new plugin available that has made it much easier for beginners and first time web creators as well as advanced webmasters. Instead of installing and activating individual plugins you can just install one plugin, the “Jetpack.” Several dozen features are included and this alone will get you up and going with your new site. For many people it will be all they need. Please see the article posted on this site for a list of details and a video screencast about Jetpack.
Social Media Icons for Twenty Twelve – Add to the Homepage Widgets at the Bottom of Page or to the Sidebar Widgets for Regular Default Pages and Posts
The Share This or Sharebar social media icons are added by using plugins which add widgets for social media. On the static Homepage template there are two widget areas at the bottom of the page that you can use for social media, newsletter subscription forms or other uses.
After the plugins are installed for sharing the icons automatically show up below the content that has been posted or as a verticle bar next to the content depending on the plugin.
You can go to plugins, add new, and type in the search terms and then choose the particular plugin you want to use. You can also get share icons by using the Jetpack plugin that offers over 23 different useful features for your site.
The “Follow Us” icons for people to follow you on facebook, twitter, youtube and your own other social media can be added by using plugins also. On Theme Twenty Twelve with the Homepage Template for a static page there is no sidebar so the “Follow Us” type of icons can be added to the widgets at the bottom of the Homepage template or to the sidebar on the other pages.
Mobile Site Design Tip: Keep It Clean, Uncluttered, Easy to Read, Easy to Navigate
Designing a website for mobile device use also means keeping the site as clean and uncluttered as possible since it will be viewed on a small screen.
We have all gotten used to using laptops or desktops with much larger monitors. Now we have to see our sites on small smartphone screens and tablet screens. It’s a big change affecting the internet and how sites are designed.
But with website visitors using smartphones and tablets that have smaller screens the look of websites is changing now.
The website elements have to be easy to view on the mobile devices.
Features of WordPress Theme Twenty Twelve
1. Static Homepage: You can choose to have a Static Homepage which means a page that has content which stays the same or a blog style page that shows the most recent content at the top. Static means staying the same. The content, such as the articles or photos, will stay the same on a static page. However the layout will change according to the size of the screen on the device that is being used for viewing.
Since blogs show the most recent article posted at the top, if you choose a blog format for the front page the content will change each time you upload and publish a new article.
There are advantages to both styles so it depends on your goals.
The blog style page offers returning visitors a chance to see the newest article. It can also be easier to optimize for search engines since search engines like new material.
But the static homepage offers a chance to control the content in case you want to present special introduction content at all times for new visitors. You can always have a tab leading to the blog in your custom menu across the top.
2. Page Templates: Page Templates include the default template, which is a blog style with sidebars or two other choices without sidebars.
3. Homepage Template: Choose Homepage Template to have a page without sidebars and with two widgets at the bottom.
4. Removing Sidebars: Choose Homepage Template or Full Width Template No Sidebars to have a standard website design look instead of a blog design look.
5. Homepage Widgets: Use the Homepage Widgets which are two widgets at the bottom of the page that are just right for newsletter signups, linked call to action buttons, and other useful content.
6. Featured Images: Use the Featured Image on the Homepage to add an image.
7. Customizable Header: As shown in the video below the Twenty Twelve Homepage has a customizable header. The height of the header image can be narrow or wide. The size is listed as 960 pixels by 250 pixels but you can add a narrow header such as one that is only 100 pixels if you want more of your site’s content to show on the screen without scrolling.
8. Customization Tabs: Under Themes where the Twenty Twelve theme shows after installation you can click Customization Tabs and Labels to customize the site.
9. Installation: To install it or update to it just go to Appearance, Themes, Install and type Twenty Twelve into the search box. Then click Install and Activate.
10. Add or Remove Title and Tagline: Under Headers you can click to choose whether to have the title and tagline show. If you include these in your header image you won’t need to repeat the information in a title above the header.