Finally we are done with the
most comprehensive and
descriptive tutorial series on
Google powered blogger
blogs. We have discussed the
core basics to create and
develop a mobile responsive
layout using simple CSS3
@media queries and some
built-in scripts. This series
will help you understand the
step-by-step effort involved in
transforming an ordinary
static, inflexible and non-
responsive blogger template
into a fluid and responsive
one that may help you
improve your Mobile Search
traffic and better entertain
your users with a mobile
friendly user-interface (UI). A
Mobile UI is an important SEO
ranking metric and helps you
improve your mobile
pageviews and thereby the
site CTR revenue.
Why bother creating a
responsive design?
Google recently rolled out a
Mobile Friendly update on
April 21, 2015, which boosts
the ranking of mobile-friendly
sites on mobile search
results. Google no longer
favors fixed width layouts and
recommends that all sites
must provide better touch
experience, where text
should be readable without
tapping or zooming, tap
targets are spaced
appropriately and the page
avoids unplayable content or
horizontal scrolling.
Running out of time? Let's
read a brief summary to each
part.
Brief Summary
1. Design a Responsive
Blogger Template
Here we demonstrated what
exactly are responsive
designs and how they are
created using CSS3 @media
screen queries. Normally
mobile browsers emulates a
desktop view by squeezing
big resolutions into small
screens that is often difficult
to read and browse. You must
be familiar that how difficult
it is to click a web link in
iphone unless you zoom it.
Therefore we make sure all
elements on the site from
buttons, links and images/
media provide a better touch
experience. To make them
look big and clean with clear
resolution all that needs to be
done is to add Meta Viewport
tag in the page header and
some CSS3 Media queries
that does all the job.
2. Common Device
Breakpoints For a
Responsive Blogspot
Template
Breakpoints are points at
which your layout design
breaks or crashes.
Breakpoints are CSS3 Media
Queries that tells the browser
which Layout to load for your
website based on the screen
size (viewport). It controls the
display of your user interface
(UI) on mobile devices.
With so many Mobile
Products in market where
each smartphone or tablet
has a different Screen size, it
is important that we select
some Content Specific
Breakpoints so that your
blogspot page may adjust
and fit perfectly to the
different screen sizes and
may not looked squeezed or
poor in resolution
3. Hiding Widgets &
Scripts in Mobile
Templates [1], [2]
Surprisingly blogger
templates supports a rarely
used mobile conditional
expression i.e.
isMobileRequest which is a
Globally Available Data which
can be applied to any HTML
DOM inside the template.
isMobileRequest is a
Boolean Data Type that
accepts only two values
which is either True or False.
It can be used to show or
hide HTML content or widgets
containers in smartphone
devices. It currently does not
support Tablets or iPads etc.
but you can surely use it to
prevent rendering of
unnecessary widgets and
scripts on mobile devices to
speed up your page load time
on small screen devices.
This tag also helps you to
avoid using CSS
Display:none to hide content
on your site which is not a
SEO friendly approach to
responsive designs. Thus it is
really a time saving condition
that gives you more control
and power over the blog
content that loads in mobile
phones.
4. Design a Mobile
Responsive Drop Down
Menu for Blogger
The fundamental part of a
responsive design is the
structure of its Header which
includes your blog logo and
navigation menu. This
tutorial shares an easy to use
responsive drop down menu
with a search functionality.
This menu can be displayed
on both PC Desktop screens
and smartphones and tablets.
You can also choose to
maintain your current
desktop menu and instead
chose to use this responsive
menu for mobile screens
only. A simple fix to the most
important component of your
mobile layout.
5. Using Mobile
Friendly Images in
Blogger.
Ever wondered how to make
your blog images to auto
adjust their dimensions in
mobile phones and tablets
without effecting its
resolution and quality?
Images with large sizes often
don't fit in small screen
devices and as a result gives
a bad UI impression. Images
must be fluid in its behavior,
their width and height
dimensions should be stylized
such that they may instantly
change their overall size as
the browser screen goes
smaller or bigger.
Our approach is based on
CSS @media Queries unlike
adaptive image methods
which makes use of
JavaScript of php.
6. Create Mobile
Responsive AdSense
Ads and Safely Hide
AdSense units
Are you among people who
complain about AdSense
responsive Ad units showing
a blank space on your
webpage? If yes then read
this tutorial to fix this blank
rendering issue and better
style your responsive ads for
different screen sizes using
device breakpoints.
7. Make Blog Sections
Responsive: Header
Widgets, Posts +
Sidebar, Footer
Since we have learned the
core basics, now its time to
start customizing different
sections of your blog and
make them auto adapt to
mobile screens. This tutorial
in chunk discusses ways to
mobilize the 4 important
sections of your blog which
are:
1. Header
2. Content area
3. Sidebar
4. Footer
Need Help?
I hope this short summary of
different parts of this major
and longest tutorial will help
you take a helicopter view of
every tools and methods
required to customize your
beautiful blogs into a mobile
supported layout that may
better help your readers to
browse and read your
articles. Thus giving you the
advantage of both pageviews
and search ranking. Let us
know if you need any help
and I would love to answer all
your queries. Peace and
blessings buddies! =)
No comments:
Post a Comment