Category Archives: Responsive design

Framed content for readability and SEO

Framed content is what you’ll find on an easy to read web page. If you’ve looked at any of our web template or WordPress theme designs you’ll probably notice a lack of overly sterile / white options. It’s not that I don’t like or appreciate the clean white look of some websites or templates, I just find them harder to read, as a visitor.

Framed content has been around for years

So now we jump into the crux of the post, what is framed content and how does it play into SEO ( Search Engine Optimization ).

First framed content is not content that is loaded inside an HTML frame or iFrame. Framed content is a combination of headings,  easy to read text, images and video wrapped in a graphical presentation designed to grab your visitors attention, and allow for quick and easy digestion of information.

We see this all the time in print magazines and we’ve been using ‘Call to Actions’ in websites since the beginning. What we are seeing now is the emergence of content and graphic presentation and how it affects SEO.

Here’s an example of a web page that puts content framing to good use. Simple easy to read content on the left and an image on the right. A visitor doesn’t need to tweak their brain skimming through paragraph after paragraph. Here we have a nice easy to read section of page that is highlighted from the content around it making it easily stand out.

i3dthemes example of framed content
i3dthemes example of framed content

How does Framed content affect readability for SEO?

Search engines are at the point now where user experience is playing the most important role. If the user finds the content they are searching for then they have a better experience using that search engine.

If a user can quickly find the information they are looking for they will most likely spend more time on that web page. Time on page is key for search engine optimization. It’s not enough that people can find your website, they need to be interested in what your website says or does and spend some time on page. Search engines will keep this in mind when displaying results for your visitors search terms. Websites that can keep people on their pages longer may achieve better rankings than those pages that don’t.

Make it easy for your visitors to find your information

If your visitors find the content on your page easy to read, they will stay longer. If the content on your pages is framed, it makes it easier to find and read. This is why I suggest framing your most important content on your page. Most web templates include some sort of design style that allow for such things, and if you’re working with a CSS framework such as Bootstrap there are built in classes for Panels and Wells that help to frame your content.

Many designers my self included will add their own styling to the template and provide different means of presenting content that helps it stand out from the page. We include many options in our templates for framing your content, and in the standard and pro packages you’ll see we have many page examples included.

A key to designing content that is framed is to make it easy to read, and I can’t emphasis that enough “EASY” to read. Long sentences or run on paragraphs are not easy to read. Framed content allows the content to be broken up a bit, so the heading is clearly visible from the body of the text, and images and video’s play an important part of visually showing what that chunk of content is about.

I suggest you keep this for your most important content, so visitors can quickly find what they are looking for by simply scanning the page for headlines and headings.

Weekly Recap – November 18 – Ridiculous Awesomeness in the Design and Code Labs

As we approach the end of the year, both the design and code labs at i3dTHEMES are cranking out ridiculous amounts of effort to get some extremely exciting new products to you.

In this weeks episode, I talk about a brand new design “RASA” that Colin has been working on, along with an announcement about a webcast series he’s planning on doing.

In the code labs, I talk about the launch of Numo 2017, and then the upcoming release of Numo Accelerator, and what it will do for you.

Our First Iteration AMP Accelerated Mobile Pages

AMP or Accelerated Mobile Pages is a project that endeavors to create faster loading pages. Specifically for mobile devices. Pages that load so fast in fact that the pages seem to load instantaneously.

I’ve been keeping up to ‘speed’ on the AMP project since it’s inception as it comes very close to our own iteration of mobile speed. Something we started working with six or seven years ago with our Gen10 ( Generation 10 ) templates.

The Introduction of Mobile Responsive

When the term mobile responsive started to have an impact on the design community, mostly due to the article posted by ‘A List Apart‘ back in 2010, we realized that ‘mobile’ was a device that we would need to take into consideration when building web templates.

Up to that point in time we only really had desktop computers and resolutions of 1024×768 or 1280×1024 to deal with. Older computers with resolutions of 800×600 were going the way of the dinosaur. And IE8 was starting to take a back seat to Firefox and Chrome.

A few years earlier the first iPhone was released and by 2010 the flip phone was going out of style making way for our current slew of touch devices. More and more people were pulling up websites on their mobile phones and having to pinch and zoom for the most part to read the content.

We were still mostly limited to CSS2 at that point in time, but with the introduction of CSS3 in 2012 and the @media queries it brought to the table, mobile devices quickly took to supporting the latest CSS standards unlike many ( cough, IE ) web browsers of the time.

Mobile Limitations

As mobile became a popular method of accessing the web, service providers started to provide better plans, and more importantly better coverage. But the problem at the time was that most access to the internet was still through your service provider, sucking the ever precious life out of your monthly ‘bandwidth’ allowance every time you accessed the internet. By todays standards, I don’t think you can walk through any populated area without finding some kind of wifi connection you can use. Just 5 or 6 years ago, connecting to wifi wasn’t something that was readily available.

Overcoming the Limitations with our First Iteration of AMP

So back to where we started, our first iteration of AMP. When we first started designing fully mobile responsive websites back in 2012 one of the first considerations we took was ‘bandwidth’. It wasn’t enough to just create a site that would resize or adapt to a mobile device, we didn’t want the end user put into a situation where there would need to download all the bells and whistles that a desktop user on a high speed connection would.

We decided on using a more ‘minimalist’ layout for mobile users, which we could do through the use of the CSS3 media queries. We could target certain parts of the site and display them with minimal styling for mobile users. This saved on the amount of ‘graphics’ and extra CSS used for different components such as sliders. We actually used the media queries to prevent certain elements from being displayed on mobile to really increase the download time. Reducing the amount of bandwidth the end user would need to load the web page.

In a sense, this is a similar approach to what the AMP project is doing. Targeting mobile devices and loading just what they need for a near instantaneous page load, less all the bells and whistles. We attempted to do this through CSS alone, but the AMP project takes it to the next step with some slick AJAX programming and a little help from Google.

Where we are now

Our newest templates use the Twitter Bootstrap CSS framework as it’s designed for mobile on up. Meaning that you start with the mobile layout then built it up to desktop. Bootstrap is the most popular CSS framework available right now. It’s not minimalist to the degree we first started with because bandwidth is becoming less and less of an issue. But it does the allow for mobile only styles to be applied first.

Where we going next

We have our own major projects in the works ( Accelerator ) which goes beyond what AMP is currently doing. This project, I’m excited about. Not only because we’re doing it, but because we need it. There is no solution on the market that will improve your page loads times AND improve your Google Page speed scores. This is something I think every web master should consider as this is one of the key ‘search engine optimization’ criteria that you can now have some control over.

Accelerator is set for launch December 1st, 2016.

Save

Save

Save

Save

Save

Save

Save

Updating Your Site for Mobile Round 2

You may have heard that Google is stepping up their ‘Mobile’ roll-out, basically completing phase two of their mobile algorithm updates. Meaning if your website isn’t optimized for mobile devices yet now might be a good time to consider it.

So What’s Changed?

A few weeks ago ( April 2016 ) Google announced the following:

“We’ll start rolling out an update to mobile search results that increases the effect of the ranking signal to help our users find even more pages that are relevant and mobile-friendly.

If you’ve already made your site mobile-friendly, you will not be impacted by this update. If you need support with your mobile-friendly site, we recommend checking out the Mobile-Friendly Test and the Webmaster Mobile Guide, both of which provide guidance on how to improve your mobile site.

And remember, the intent of the search query is still a very strong signal — so even if a page with high quality content is not mobile-friendly, it could still rank well if it has great, relevant content.”

According to Google’s John Mueller, these changes are now fully rolled out. The change is supposed to rank mobile friendly pages better on mobile devices.

How Will I Be Affected?

This latest update for the mobile friendly ranking algorithm is targeting page level ‘signals’. It doesn’t affect your entire site but could affect individual pages. If some of your pages haven’t been optimized for mobile they shouldn’t affect pages in your site that have been. In the past many of Google’s algorithm updates affected your entire site, in this case, the update only affects individual pages. Most websites will either be optimized for mobile or not. Not too many websites will have a mixture of both but I’ve seen it happen. Specifically where an old website has been updated but they have certain web pages using tables or catalogs that were too complicated to convert for mobile.

The Good News

For those of you who haven’t embraced the current trends or technologies is that this algorithm update will only affect searches from mobile devices. If you’re website visitors are using a desktop computer, you’re page ranking shouldn’t be affected in the search results.

The Bad News

Mobile is not a trend. It’s here to stay and taking over desktop searches. Google has officially announced that there are now more searches conducted on mobile, than on desktop according to SearchEngineNew ( source ).

Huh and How?

If your a technology Luddite and haven’t yet embraced the future of search, consider this: Searching on mobile devices is SO MUCH EASIER than searching on desktop, why you ask? Just pick up your phone and ask it to search the web for something, most people do now. It’s so much easier to ask Siri to look for something than it is to type it in to a search field, and you can ask a question instead of just using a few words ( if that’s how you’ve been searching ).

So mobile search has surpassed desktop because more and more people are getting on board with mobile and finding better ways to utilized their phones, and it’s much faster and more convenient. Everyone has their phone with them so it’s easier to perform a search. For a desktop search you need to be sitting at a computer, so you’re limited in where and when you can search. With mobile you just whip your phone out, press a button and let Siri do the search for you.

What’s Next?

You can check your web pages right now to see if they pass the Google Mobile-Friendly Test.  Follow this link.

You will need to test each page, but for most of us you’ll be safe testing your home page, and any pages you aren’t too sure about.

If your home page fails, then the rest of your site most likely isn’t mobile friendly.

With this in mind, passing will help your searches from users on mobile devices, and a fail will probably leave you in the dust and only accessible to users on desktop searches.

This doesn’t mean that your site can’t be found or loaded up on a mobile phone or tablet, it just means that when someone is searching for something that your site may have to offer or answer you most likely won’t show up to high in the results, or show up at all.

What if My Site Fails the Mobile-Friendly Test?

It’s time to update. I’ll run you through all the things we do for updating an older site to a mobile friendly version. If you want some help with this we do offer mobile updates ( Site setup and Content Transfer ) of older websites to new mobile friendly sites it’s all part of our Content Transfer Service. What I really wanted to do with this article is share all the things we consider when updating an older website, to something current. And we’ve seen some really out dated sites created over a dozen years ago in FrontPage 2000 using all tables and inline styles, both of which are now considered ‘no-no’s’ for mobility.

So What Do We Do for Updating for Mobile?

Pretty much all mobile updates require the content of your pages be copied into an updated ‘template’ or page or a new ‘template’ applied to your existing web pages if you’re working with a Dynamic Web Template such as Dreamweaver or Expression Web.

There are elements of your old website you’ll want to keep, and elements that will need to be updated. Let’s make a quick list:

Things to keep:

  • page names
  • folder names
  • meta title
  • meta keyword
  • meta description
  • google analytics
  • content
    • headings, paragraphs, lists, links, inline images
  • misc scripts being used for content
  • hyperlinks / menus

Basically these are the elements of your web page that make up the content of a web search. If you were to strip everything in your page out that is not important to search engines, this is what you would need to still have a legible web page, a human readable page.

Things to update:

  • convert tables to divs
  • convert table columns and rows to css columns
  • replace JavaScript / flash menu’s with text/css based menu’s
  • remove flash
  • remove inline widths and heights from images
  • resize images to fit page
  • optimize the images for the web
  • update images to be mobile responsive ( add img-responsive class so images will scale )
  • remove inline font styles
  • wrap content in correct HTML tags ( paragraph, heading )
  • add links to phone numbers for mobile users
  • move JavaScript to bottom of page
  • minify JavaScript and CSS files
  • consolidate CSS files

Either way your existing pages will need to be prepped and cleaned. This is the short list. Let’s take a look at the process start to finish to see how and in what order we work with.

Site Update First Steps

First thing we do is pick out a mobile friendly template which we can use / modify to work for the client. We choose a Bootstrap template as Bootstrap is designed for mobile period.

Site Clean Up

Now we take a look at the existing website. Typically what we’ll do is make a copy of the site, then proceed to clean up the code by running each page through an HTML cleaner. This helps to remove any outdated styles, tables or HTML that is no longer valid. My favorite tool is HTML Cleaner.  Simple but effective. You can select which tags to remove, clean or change. We do not want to alter the content, just what’s wrapped around it. Now we have basically stripped away any old HTML, and removed anything that could hinder or harm the mobile view.

We’ll take just the code that is withing the <body> tag. Content within the <head> will not be used unless it’s a meta tag or script that is required such as Google Analytics.

We also remove any flash and JavaScript menu’s ( such as the old FrontPage navigation ).

We’ll remove any heights and widths from images to allow them scale, and ADD the responsive image class of ( class=”img-responsive” ). Sometimes this also requires resizing the images in an image editor IF the image had not been resized for the page already.

And finally we’ll upload any images to TinyPNG. Here we can fully optimize each image for use on the web, and in most cases cut the file sizes of each image by as much as 70% or more.

So now we have a nice clean ‘shell’ that we can work with. Content that can now be used within a mobile website or mobile website template.

Now For the Updates

Now that we have the content ready to go we can create our framework to copy the content into. We’ll take the new template and re-created each page, using the exact same page names. We’ll create a blank template page for each page in the site.

Then we’ll copy in the meta tags, and scripts from the old site.

Once we’ve done that we’ll copy in the content and with each page try to align the content as best suits the new site, and the old site. If you had two columns in the old site, we’ll try to retain that where it makes sense, provided it will also make sense for mobile users to do so. Basically we will copy the clean content into each new template page and arrange the content so it displays the best for both desktop and mobile users. Some old web page layouts and alignments no longer make sense for newer devices so the content needs to be adjusted somewhat in it’s presentation so it makes sense to both audiences.

Proper HTML heading tags, and paragraph tags are applied if applicable, and images aligned to the content.

Once all the content has been copied into the new template we can proceed to update the existing ( template ) components such as logo, sliders, menu bars and footer. Most templates include some type of global components for these elements, with our template we use Library Assets ( or include pages ) to make updating the site a bit faster.

Once the entire process is complete we can take it one step further and optimize the CSS and JavaScript for Google PageSpeed by minifying and consolidating the CSS and scripts. This is not something we recommend doing on the working version of the site, just the finished and published version as once you’ve minified and consolidated your files and scripts, it’s darn near impossible to read the code and make further changes. You can ‘unminify’ then ‘re-minify’ but best to have everything in your site as complete as possible.

Quickly Add Shopify to Responsive Design in WordPress to Capture Growing Mobile Market

Today I’m going to show how you can quickly add your Shopify products to your Responsive  Design in WordPress to Capture Growing Mobile Market.  I’m also going to talk about why it is so important to marry Shopify e-commerce with Responsive Design, and WordPress.

Continue reading