The 6 Step Process of Designing a WordPress Site From Top to Bottom Quickly (& In a Way That Your Client Will Love)

Some designers hate WordPress.

They say WordPress limits their creativity.

They say it’s not really as easy to use as some think it is, and that clients tend to be very confused when interacting with it.

They say it’s difficult to convert a modern design into a usable theme.

And, here’s the kicker, they are right.

At least partly.

WordPress is not perfect as a web development platform, especially when working with clients. That’s why we need to adapt a certain approach if we want to make them happy (read: so they will pay us). (more…)

Make Your WordPress Site into an Issues-Based Magazine

Many of us might remember when news and articles were dominantly available on paper sources such as newspapers or magazines. These bunches of paper were (and are) usually organized into issues and volumes. For example, the New York Times on November 23, 1963 was Issue No. 38,654 in Volume CXIII (113). The days of periodical publishing, when every certain period of time, a collection of articles would be released, seem to have passed.

Source: 3D Issue

Source: 3D Issue

Nowadays, online news sources use “firehose” publishing, which douses readers in jets of information. They publish article, after article, after article. For many readers, especially readers more used to the old-time periodical publishing system, this can be extremely overwhelming. It may be time for periodical publishing to take a place online, taking the massive jumble of news and information constantly being posted to the internet and organizing it into easier to read periodicals. (more…)

How to Create an Attractive Dropdown Blogroll with CSS

Dropdown menus are great ways to use navigation on your site without cluttering up the page. They can get annoying though, because they can be really hard to style. Most people would use JavaScript, but we’re going to use CSS for flexibility, speed, and compatibility. Unfortunately, this method will not work with IE6, but will still be more compatible than JavaScript. (If you’d like to see the final product of this tutorial check out this page.)

1-Create the Image

We won’t be using codes in our HTML, so it’s not going to look anything like a dropdown. The image you create can look however you want it. You’ll probably want to include an arrow to indicate that this is a dropdown menu. It can be whatever height you want, but it must be the width of your dropdown.

This is what is used in the example:




2-Set Up the HTML

We’re going to be using simple HTML that you can later style however you want. We need an unordered list to store all the links. We will then precede that with a paragraph (or ‘h’ tag if you want) to title it, and finally, we’ll wrap the whole thing in a div.

The final markup should look like this:

<div class="blogroll">
<li><a href="">Example Site</a></li>
<li><a href="">Example Site</a></li> 
<li><a href="">Example Site</a></li>

You may want to use WordPress’s wp_list_bookmarks(); function to use the built in linkroll instead. You can do it either way.

3-Style the Menu

Now we’re going to just design the dropdown as it will be when it’s dropped down and forget about the functionality.

First we need to replace the paragraph text with the image we created earlier.

.blogroll p {
background:url(pbd-css-blogroll-rollover-img.png) 0 0 no-repeat;

We apply the image as the background first. We then set the dimensions of the paragraph to be the same as those of the image and we use text-indent to hide blogroll1the “Blogroll” text from our HTML.

Next we have to style the list. Because our HTML is so simple, it should be easy styling this however you want. For example, you can add a background to the list or use other types of HTML.

All we’re doing is setting up a plain list of all the links and changing the background color of each link on rollover. The CSS is as follows:

.blogroll ul {
border:1px solid #48758d;
border-width:0 1px 1px 1px;

blogroll ul a:link, .blogroll ul a:visited {
padding:2px 10px 2px 10px;

.blogroll ul a:hover, .blogroll ul a:active {background:#366386;}

Right now, we have a space between our image and our dropdown. We can remove this by amending the CSS with:

.blogroll p, .blogroll ul {margin:0;}

4-Create the Dropdown

Now to create the dropdown. We’re going to use the div to hide everything other than the image until the user’s mouse is over it.

To start with, let’s hide everything other than the image.

.blogroll {

The we just use the :hover pseudo-class to allow the rest to be shown when the user scrolls over the image.

.blogroll:hover {overflow:visible;}

5-Fix the Pushing-Down-Content Issue

The rollover now works, but the menu pushes all the content beneath it down.

We’re going to fix that by using absolute positioning to put the dropdown menu above all the other content.

The first step is to amend the blogroll div to be positioned relatively, so that the dropdown’s absolute positioning can be anchored by the div:

.blogroll {position:relative;}

Now use CSS to position the menu right under the image:

.blogroll ul {

6-Issues with IE6

This menu won’t work with IE6 because it doesn’t support :hover on anything other than links.

There are some workarounds available using JavaScript. You could use conditional comments so that IE6 users use JavaScript to see the menu. Or you could try to teach IE6 to use :hover properly.

Since the whole idea of all this was to avoid extra scripts, it might just be best to simply hide the menu. Just use this code:

.blogroll {display:none;}
html>body .blogroll {display:block;}

(Info from: Pro Blog Design)

Add a “Reading Mode” to your Blog

You may have seen it around the web. It’s the function that takes all those cluttered pages of articles floating around the web, with their obtrusive ads and headers and footers, and simplifies it, so all you have to sort through is the attractively simple article in its most basic, text and picture form. This can be done with external services such as Readability, a Chrome extension, or, in certain cases, on news applications such as News360. That’s all well and good, but you’re a web developer/blogger. You want to do it yourself, make it part of your site, integrate it for ease of use. Let’s get started.
If you want to take the easy way out, you can download this function as a plugin from Github. (Direct download link) Just upload and activate.

How It’s Done

The method behind the function is actually pretty simple. We’re going to use Jack Moore’s Colorbox plugin to make the post pop out while the rest of the page fades out. All we need to do is set some options and insert our JavaScript-created (so the link doesn’t show up as part of the post’s content) link.

1. Download the Plugin

Download the files from here. The zip folder will look like this:

Each example folder contains a different style for you to use. Loading the index.html file in each folder will show you what they look like.

Now, copy the jquery.colorbox-min.js file from the ‘colorbox‘ folder into the /js/ in your theme. Then, choose an example and copy the colorbox.css into your theme’s directory. Also copy all of the /images/ files from the example folder into your theme’s images directory. You may prefer to just make a ‘colorbox’ folder in your theme’s folder and put all the files there.

2. Queue the Files

Now you need to load all the files into your page. Open up your theme’s functions.php file and paste the following before the closing ?> tag:

 * Queue Reading Mode scripts and styles.
function pbd_rm_scripts() {
	if(is_single() ) :
			get_bloginfo('template_directory') . '/js/jquery.colorbox-min.js',

			get_bloginfo('template_directory') . '/js/pbd-reading-mode.js',
			array('jquery', 'colorbox'),

			get_bloginfo('template_directory') . '/colorbox.css',
add_action('wp_enqueue_scripts', 'pbd_rm_scripts');

This just tells your site about all of your files; the Colorbox files and the Javascript file we’re going to create next.

3. Wrap Your Post Content in a Div

You need to have your post contained in one element for Colorbox to reference. Some themes might already have this, but the class names vary from theme to theme. For simplicity, we’re just going to use a WordPress filter to add a div around the content.

Paste the following into functions.php:

 * On single posts, it wraps the content in div.
function pbd_rm_content_filter($content) {
	if(is_single() ) {
		$content = '<div>'. $content .'</div>';

	return $content;
add_filter('the_content', 'pbd_rm_content_filter');

This filter runs every time your theme displays a post’s content. If the user is on a single post page, then our code will wrap a div with the class .rm-content around it.

4. Creating the Link

Now we can set up the “Reading Mode” link. In your theme’s /js/ directory, create a new file named ‘pbd-reading-mode.js’ and paste the following into it:

jQuery(document).ready(function($) {
	// Set this to the CSS selector of the element that wraps your post content.
	// e.g. .entry or .entry-content
	var selector = '.rm-content';

	// The HTML for your "View This in Reading Mode" link.
	var html = '

View this post in Reading Mode.


			innerHeight: "80%",
			innerWidth: 700,
			inline: true,
			href: selector

You can set the selector for the element that wraps the post on line 4. (If you used the filter above, you don’t need to do anything with that.)

Line 10 adds the wrapped HTML to our content wrapping element.

Line 12 initiates Colorbox with options for its size, and specifies its content as the wrapping element.

5. Styling It

Now it should work. The “View in Reading Mode” links should show up at the top of your posts. Now we just need to add some CSS to make the popup as legible as possible. You can use the CSS below or play around with the styling:

 * Reading Mode
#cboxLoadedContent > div {
	text-align: left;
	padding: 20px;
	font: 16px/24px Georgia, serif;
	width: 90%;

#cboxLoadedContent > div .rm-button {
	display: none;

#cboxLoadedContent > div p {
	margin-bottom: 24px;

#cboxLoadedContent > div h2 {
	font-size: 22px;
	margin-bottom: 24px;

#cboxLoadedContent > div h3 {
	font-size: 18px;
	margin-bottom: 24px;

#cboxLoadedContent > div h4 {
	font-size: 16px;
	margin-bottom: 24px;

The #cboxLoadedContent > div is used to match content wrapping element. This should make it a little more flexible than specifying a CSS classname.

Line 11 stops the “Reading Mode” link from appearing in the popup.

If you want to use your theme’s post styles, you can skip the filter and instead specify an element like .entry-content in the JavaScript. The element itself is moved into the popup, so all of its styles will then apply to the popup as well.

(Info from: Pro Blog Design)

Four Tips for Keeping Your WordPress Site Safe from Hackers

You spend time and money developing the perfect site: hiring a graphic designer, hiring a coder, considering colors and specifics that will make your company glow to potential customers. The site goes live and, within weeks, gets hacked.

It’s an all too familiar story. Some estimates show about 30,000 WordPress sites get hacked each day!

Why Do Hackers Hack Websites?

The reasons behind this are plenty. Sites that store a customer’s credit card information offer an easy target for criminals interested in committing fraud. Those with extensive email lists stored offer hackers with a massive amount of people to contact for their own interests. They may install malicious hardware on your computer so they can take over your computer and use it as is if were their own, thereby attacking MORE computers from YOURS.

And some hackers do it just for fun.

Before you put yourself out there on the Internet, make sure you’ve taken the following steps to protect your website – and your potential readers – from harm.

Create secure log-in names and passwords

WordPress itself  states your highest risk of being hacked comes in choosing a poor user name and password. When you create the blog, your default user name will be admin. Change this to something else. Also, create a password that won’t be easily detected. Do this by:

  • Using a variety of letters and numbers
  • Using upper and lower case letters
  • Using symbols, such as # and $
  • Changing the password on a regular basis
  • Choosing a user name that has nothing to do with your blog (ie: your blog is for North Carolina Real Estate – don’t choose NCreal for the user name)


Keep your WordPress site updated

On a regular basis WordPress will make updates and post that these updates are available on the Dashboard of your site. Update your site whenever it is suggested. Keeping WordPress updated will ensure you have the latest security features and that you are overriding any bugs that may have been in the earlier versions. This article shows what can happen when you DON’T update your site.




Check Out Two-Step Authentication

This great plug in allows Google to send you a unique number on your phone when you log into your account. Upon log in each time you will need to enter the secret number, sent to you on the Google Authenticator App on your smartphone. Because this program generates a new number ever thirty seconds, the chance of a hacker guessing that number correctly is next to impossible. Read more about this program on WordPress’s site.

Download and run WP Security Scan

This plug in, developed by WordPress, will scan your WordPress website or blog, check for vulnerabilities in security, and suggest actions to fix those. This includes information about your passwords, file permissions, database security and more. You can find WP Security Scan here: To use, download the file. Go to your dashboard. Click on Plug Ins, and then choose Install New. Upload the entire folder and you will find it under your installed plug ins page.




Three Styling Changes You Can Make to Change Your Blog’s Appearance


If you want to make major changes to your website, you’ll likely need to hire a designer.

But what if you want to make minor changes?

Changing the background, the color or font of text for your headers and content, and styling the hyperlinks can be done in just a few small steps.

First, A Few Words About CSS

Cascading Style Sheets, or CSS, allows a person to change one element on the style sheet that will affect the remainder of the website. Each website has at least one style sheet; some have more. The main style sheet in WordPress is named style.css. In this style sheet is the code for the web site’s design elements. Making changes to this file will change the look of your site.

To Get Started

Locate the style.css sheet by:

  1. Logging into the dashboard
  2. Clicking on Appearance
  3. Clicking on Editor
  4. Locating the stylesheet.css file at the bottom of the right hand side.
  5. Clicking on stylesheet.css (though most of the time this is the one that appears in your editor when you land on this page)


You will need to do this each time you want to make a change to your style sheet.

Before You Begin: A Word of Caution About CSS Changes

Those changes you make will become permanent once you make them and hit the Save button. One forgotten semi-colon can mess up your entire site. ALWAYS copy the existing code, paste it into a Word document or an editor (I like Programmer’s Notepad) and save it. If you make a mistake you can return to that version by copying it and pasting it back onto the site.



Today you want a blue background for your website, but tomorrow you want it red. Or maybe you find a great background image to tile. To make a change to the body of your website, locate the body code in the style sheet.


To use a solid background color, the code will be the number sign and the numerical code for the color you want. For a list of codes, visit the W3schools site.

Locate the code you want and place that after the number sign (#) on the style sheet.

For example, a white background would be #fffff while black would be #00000. The code would read background: #fffff;

To use an image, upload the image file to your control panel under the theme’s images folder. (themes/NAMEOFTHEME/IMAGE).

Then change the file name in the style sheet so it matches the name of your image.

Example: background: url(images/NAMEOFYOURIMAGE.PNGORJPG) repeat (or no-repeat). 

The repeat will tell the image to tile; the no-repeat will tell the image to show up only once on the site.


To change the size, color or text of your headings locate the headings in your style sheet.


To change the font, place the name of the font you want to use before the rest of the fonts listed. This way, if someone’s browser doesn’t support the text you like, it will choose the next font on the list; and then the next, if the browser doesn’t support the second font.

To change the color, locate the # tag and then add the numerical code you want.

To change the size, locate the font-size and change the number. The size will be listed as px or %; the larger the number, the larger the font.



If you want to call attention to other areas of your site or to outside sites, you might do this by linking text to the pages you want to send the readers. If so, you want the hyperlinks to stand out. To change the hyperlinks, locate this in the style.css file.


In this example you will see a,a:visited, which changes the appearance of the links, and a:hover, which changes the appearance of links the user is hovering over.

Make color changes using the # symbol.

You can also underline links by stating text-decoration:underline (as seen in this example).



Using Color Theory in Web Design

In an earlier post, 5 Dos of Great Blog Design, we discussed the concept behind color theory in the way it pertains to white, or negative, space.

Color theory tells us that different colors work together – or don’t – for specific reasons. (For a more in-depth definition of color theory, check out this article from NYU.)

While you may not think about how color will affect those visiting your blog, during the web design process the designer considers this as a very critical component of creating the perfect web site.

How Color Makes Us Feel

Take a look at this color block:


How does it make you feel?

And how about this block:


Did you feel differently when looking at example A than you did when you viewed example B?

If so, it’s no surprise.

Yellow is electric, energizing.

Light blue is calming.

Color matters. Even the shade used will make a difference. A softer shade of blue evokes calming feelings while stronger shades denote strength.

Three Categories of Color

color wheel photo: color-wheel color-wheel.jpg

The Color Wheel

Chances are you learned about color theory during elementary art class; chances are you have forgotten much of it by now unless you work in graphic design!

The color wheel contains three types of colors:

  1. Primary
  2. Secondary
  3. Tertiary

Primary colors cannot be created by mixing other colors together.

Secondary colors are formed by mixing two primary colors: blue and yellow make green, red and yellow make orange.

Tertiary colors are derived by combining primary and secondary colors: blue-green or red-orange.

Web designers use these types of colors to evoke feelings when designing a blog.

Create Your Blog’s Mood Through Color

Want to know what colors are associated with which types of feelings? Here’s a handy guide:

Red – Warm, electric, energizing. Great as an accent for creating movement.
Blue – Calming, strength, professional. Sites for travel or relaxation work well with this shade.
Yellow – Exciting and electric. Too much can cause distraction on a site, so use it for accents.
Orange – Electric; however, browsers display this shade differently so stick with it as an accent. Green – Cool, calming, professional; great for sites referring to nature, finances, business.
Black – Strength and power. While black has been used as a main color in web design, it can also be straining to a reader’s eyes.
Gray – Can be used for strength, calmness, power, authority. Great shade to incorporate with most other colors; gray is used a lot in web design today.
White – Though it may seem an unnecessary color in web design, don’t forget what we said about white, or negative, space. Your readers need some white areas so the rest of the site comes into focus. Without this white space, your likely to overwhelm your readers, and they will likely turn away.

A Few Examples of Color Theory in Use

To show you how color theory is used in web development, what better than to offer a few visuals?

Suntrust implements blue, which is considered a corporate color, with an electric yellow center box to evoke a call to action. What is it they want us to do? Sign up with them!


YogaWorks, a very popular yoga company, uses shades of green and gray to evoke a calm feeling in viewers on their website.




This website, for an artist, depicts a variety of electrifying images that catch the reader’s attention.



5 Dos of Great Blog Design

If you’re venturing into the world of blogging, chances are you hope to:

  1. Gain readers
  2. Promote a product, and
  3. Make money

Of course, some blog for personal reasons- to tell a story, to keep family up to date with going ons – but those with a business who start a blog often want to monetize their words, thoughts and articles.

Good blog design is critical for catching – and keeping – readers.

Check Out These 5 ‘Dos’ for Creating a Blog That Works.

  1. White Space is good. Entire textbooks have been written about color theory for this simple reason: Colors can make us feel a certain way. (Imagine entering a bright orange room; now, a pale blue room. Chances are your heart beat a little more quickly on the first example!) At the same time, white space, or negative space, can do the same. (Check out these 21 examples of white space use on the web.) Too much color can overwhelm the reader, so make sure the elements you place on your site are important and let the rest go, allowing for some refreshing negative space.
  2. Go easy with the ads. Ads generate income, but if they are blinking all over your page your readers will go elsewhere. Most ads are best placed above the fold, or on the part of the page accessible without scrolling. This handy graphic shows a heat map designed by Google to show clients the best placement for advertising on their website.) Here’s a visual:



Follow this three-rule equation for ads:

  • Rule number one: Don’t place ads in the middle of your content.
  • Rule number two: Avoid too much flashing and blinking.
  • Rule number three: Target each ad so you don’t have to put so many on the page
  1. Create a theme for the content – and stick to it. Many bloggers start with a great idea and then stray from the topic. Short attention spans and not a lot of time mean most readers lose interest in mere seconds (This report by Nielsen Norman Group shows you have just ten to twenty seconds to grab a reader’s attention!) Therefore, it’s imperative you keep your blog topics on point, so you don’t lose the reader who is most interested in what you have to say (but aren’t saying).
  2. Encourage interaction. It’s a social media frenzy we live in these days. Everyone wants to be heard. If you offer content that asks questions of the readers, and you offer follow up to those questions, chances are your readers will keep coming back for more. Turn on comments. Ask questions. Then return to answer them.
  3. 5 second test. If you aren’t sure whether or not your web site conveys the message you want, follow Scranton University’s Writing for the Web 5 second test: Ask someone to glance at your website for five seconds and then turn away. Then ask them this: What is my site about? If they aren’t sure, or if their answer doesn’t match up with your goals for the site, it’s time to restructure. (If this IS the case, consider your text: Is it to the point? Do key words stand out? Does advertising match the purpose?)

Dramatically improving your responsive website – how and why


Since the boom of mobile devices on world market, internet became an even more accessed source of information, as Wi-Fi networks and mobile data plans became faster and more accessible for the regular user. Nowadays every Smartphone is capable of accessing internet websites, allowing the user to browse them. Still, as mobile phones have different resolutions and smaller screens than computers do, it is a great challenge to deliver content in such a matter that it will both look good and load fast on any mobile device as Smartphone or tablets.

The need of making websites load and look well on any device lead to development of responsive websites.  Responsive web design offers the possibility for web programmers and designers as well to create optimized design layouts for smart phones and tablets. A great reason to work with responsive design is the fast changes that mobile devices’ displays are suffering in terms of resolution and size; using a framework as bootstrap makes responsive development easier, in the same time creating a great learning environment.

Users are closing the window before it loads

Even so, working with responsive websites isn’t a job without any impediments or challenges; in fact, the first element that comes into the way of obtaining performances in responsive design is the quantity of information delivered through mobile networks. On other words, each time a page is loaded into the browser, the full HTML content is served to the device, no matter if it’s mobile or not. This way, because every time there are non-required elements that load up, the overall loading time is quite high. On a world average, the regular internet user closes the browser if a web page takes longer than 3 seconds to load.

Although responsive websites are serving smaller amounts of content by default, there is still a lot to improve in order to turbo charge the loading time. Listed below are the best methods any responsive developer could use in order to obtain maximum efficiency while dealing with the smallest loading time for every web page. This is how 2013 looks in terms of page size per resolution, according to Guy Podjarny, a web performance analyst:


Reducing the number of http requests is the first step towards a lower loading time for any type of website, including responsive websites. Using a better stylesheet texture or a new syntax may lower the loading time; still, the best improvement can be seen when using the proper tools to concatenate and compress CSS and JavaScript. Tools like Saas or Compas are great when it comes to doing just that; squeezing the same amount of information in smaller bits of data, so the final product is smaller and faster on the line towards the viewer.

How to deal with images

Next up, a large part of the content served to a web browser consists of images. Dealing with images in terms of size and resolution will bring the highest positive impact over responsive website loading time. Firstly, it is important to deliver the right images to the right devices. There is no point in delivering a bigger image than the resolution of the smart phone accessing the website, as well as it is important to deliver a high quality image for a computer display resolution which is capable of displaying high definition content. In the end, it is important that the user sees what he should see; an image of a horse is not an image of a horse if there are only some pixels brown present over a green pixelated background.

We must admit that there aren’t any HTML-only websites that are getting success in terms of visitors and conversion. Most modern websites, and this includes responsive websites, are usually full with css scripts and other legacy content that can’t be edited manually; for example nobody is going to edit each <img> attribute of all the pictures from their website just to make it serve the right dimensions for the right display size and resolution.

One way to deal with the large number of legacy content which can’t be edited manually is using Adaptive Images. This tool uses a PHP file to route images through it, and then serves the images according to the resolution of the device accessing the content. If required, the same PHP file will create (meaning crop) the image in order to perfectly fit the size of the screen. The only problem that responsive web developers may encounter when using Adaptive Images might consists in its requirements; although it works mostly through the .htaccess file, which can’t exist without an Apache Server. Also, because the tool uses PHP to route the images, it will be incompatible with websites built on python or Ruby on Rails.

Being responsive is not enough

Going further, it must be mentioned that choosing what images to deliver to mobile browsers should not be done exclusively according to the receiver’s screen resolution; that should be only half of the process. On the other hand, because we are talking about responsive content, bandwidth plays a very important role behind the scenes. Serving a high resolution image to a computer that supports it, but which features a low level bandwidth will only result in a failure of improving the loading time.

Instead, using a tool as Foresight.js or HiSRC, the website is able to do a bandwidth test in order to determine if the bandwidth is large enough in order to receive the image fitted for the screen resolution. The test itself requires a file to be transferred in order to measure the bandwidth, and while this is a time loss on the first hand, it saves a lot when it comes to the whole lot of images that are going to be served next. Another thing to remember is that the test is done once per session, so it won’t “slow down” the process each time an image is served.

In the end, as you can see, optimizing a responsive website should be done no matter how fast the website loads; optimizing JavaScript and css content along with serving the proper images for the device accessing the website, based on its screen resolution and available bandwidth will in the end prove to be performance benefits.

Responsive themes – great user experience

You probably wonder what a responsive theme is. You see this word used for many template releases, and many developers are trying to keep up with the latest approaches in web development.  A website is described as “responsive” if it can smoothly function with many display sizes, platforms and screen resolutions, no matter whether the device is a tablet, a computer or a smartphone. In a responsive theme, load time, readability and navigation are highly optimized for each platform  you may use.  Since WordPress is one of the most used platforms, it has many great responsive themes.

Why going responsive?

While you navigate through a responsive design, you will notice that the page layout shifts easily, depending on the screen size, and different layouts are provided for each type of content. Many templates allow users to view the same look regardless of the device they are using to view the website. The best solution to achieve responsive design is to use CSS media queries, which will access various CSS files depending on the available resolution.

responsive schema

Right now, if you stumble onto a WordPress.Org website while looking for responsive themes, you will find only 74 results. If you came across the ThemeForest website, though, you would find almost 300 responsive WordPress themes. Be careful when deciding which template to use because there are some factors you will need to consider before going “responsive“:

  • Does the website really needs a responsive layout?

In 99% of the cases, the answer will be “yes.”  Still, even if smartphones are widely increasing in the number of users, not all websites should follow the trend. If you use complex tables, calendars, high quality images or if the navigation is complicated, the benefit of the responsive design could be canceled.

  • What you should not display on a mobile page

First of all, multiple columns bring with them a lot of information, but using a mobile design will make this feature difficult to manage. If the secondary columns have unnecessary content, where should you hide it? If it is important, how should it be resized? Think about this before choosing your theme.

  • How are the formatting and the layout affected?

Choosing which elements the users should see first will affect how the layout matches the screen size. For example, heading fonts on a widescreen template can be at least 3 times larger than the body text. Imagine, though, how these large headings would be displayed on a tiny screen. They would not be really effective.

You must go beyond the theme because going “responsive” does not mean that the mobile user’s experience will be improved. When you develop websites for mobile devices, you are not only cutting content for the best fit. You also need to plan each detail with maximum attention. A responsive theme means more than making a site look nice on various screens; it also needs to make the website faster, easier to use, and focused on the most important information.

So what is your choice? Will you go “responsive“?