3 Beginning Steps to Responsive Website Design

According to a study by BuzzCity, 45% of people on the internet have a smartphone and 85% of users prefer access to websites on a mobile phone.  Within the last week I’ve used my smartphone to look up the happy hour at a restaurant, read the news, compare prices for ink cartridges, accessed my appointment information for my dentist, and looked for store hours for three local businesses.

Of those sites, few were optimized for my phone, in fact my local newspaper is nearly impossible to use on a smartphone.  How about your website?  Do you know what it looks like on a tablet or smartphone?  How do you go about making your website flexible for use on multiple platforms?

1. What Does Your Site Look Like Now?

Don’t have a smartphone or tablet?  Using your computer browser,  iPad Peek will render your website on a virtual iPad and iPhone.

MobiReady will make various compliance checks as well as emulate very small phone screen sizes. Mobile Phone Emulator is probably my favorite and will show you site at actual size on Android devices:

2. Use Flexible Layouts

When working with a designer, make sure they understand flexible layout design.  This means that as you change the size of your browser, the website resizes, without needing scrollbars.  Take a look at CSS-Tricks.   Try making your screen smaller and wider  and notice how the page (including images) change to accommodate.  At the narrowest width notice that the sidebars move from the side to below the main content.  Additionally, some images disappear completely at narrower widths to give a cleaner look.  (Here are a few additional responsive websites to look at: Andersson-Wise Architects, The Work Cycle,  Smashing Magazine)

Many designers are just designers – creating the layout and look for a site, which is then passed on to the web designer or programmer to make into actual web pages.  Make sure both your designers understand that you want a responsive web design from the very beginning.  Like your current design, but want it responsive?  Your designer can tell you if it can be converted to a responsive web design. (Or contact me for a free consultation).


3. Be Flexible Yourself

Responsive website design depends upon percentages and proportions – this isn’t a place for pixel perfect layouts. (Actually web design never was, but that’s another article).  Realize that how you view your site and how your customer views it will be different and let go of finding to perfect pixel size for that font.  Instead, concentrate on content, overall feel and usability.




Websites Built on WordPress as a Content Management System

Diane Ensey Diane Ensey
61 items   3 followers   4 votes   1.22k views

Websites Running on Wordpress

More than just a blogging tool, Wordpress is used by many companies as a complete CMS.



Mar 02, 2015 - vogue.com - 165

The latest fashion news, beauty coverage, celebrity style, fashion week updates, culture reviews, and videos on Vogue.com.​

Sep 03, 2012 - politicalticker.blogs.cnn.com - 163
CNN Political Ticker- All politics, all the time - CNN.com Blogs

The CNN Political Ticker is the hottest destination for the latest political news with dispatches, behind-the-scenes reports, and expert commentary, 24-7. For the latest political news from CNN\'s Best Political Team, with campaign coverage, 24-7.



Mar 02, 2015 - wired.com - 171

Get in-depth coverage of current and future trends in technology, and how they are shaping business, entertainment, communications, science, politics, and culture at Wired.com.

Mar 02, 2015 - africa.si.edu - 163
National Museum of African Art - Smithsonian Institution

Listen here to the sounds of a continent rich with creativity, power, and enchantment. Radio Africa offers hours of tracks including field recordings from remote villages, voices of political protest, and songs from emerging Afro-pop artists and is a collaboration between Smithsonian Folkways and the National Museum of African Art.

Mar 02, 2015 - cio.gov - 147
CIO Council - Chief Information Officers Council

The IT Dashboard is a website enabling federal agencies, industry, the general public and other stakeholders to view details of federal information technology investments.

Sep 03, 2012 - ualr.edu - 176
University of Arkansas at Little Rock

University of Arkansas at Little Rock

Sep 03, 2012 - vancouverconventioncentre.com - 152
Vancouver Convention Centre

The award-winning Vancouver Convention Centre is a green-designed, state-of-the-art facility on the waterfront in beautiful downtown Vancouver with world-class production capabilities, spectacular views and five-star cuisine.

Sep 03, 2012 - today.ttu.edu - 161
Texas Tech Today :: University News Releases, Stories, and Clips

News & Observer – Gerry Beyer, a Texas Tech University law professor who writes about estate-planning issues, said even if a person gives a power of attorney to an agent to access their digital assets, that doesn’t mean that the bank, social media site or email service will accept that authority. It might take a court-appointed guardian to get access to the records, he said. One reason: The agent’s authority typically ends when the person whose records are being sought dies, he said.

Sep 03, 2012 - mashable.com - 178
Social Media News and Web Tips – Mashable – The Social Media Guide

Social Media news blog covering cool new websites and social networks: Facebook, Google, Twitter, MySpace and YouTube. The latest web technology news, via RSS daily.

Sep 03, 2012 - about.networksolutions.com - 131
Network Solutions Company OverviewAbout Network Solutions

Take a closer look at Network Solutions with a complete company overview at networksolutions.com. Learn about Network Solutions' commitment to its customers and find fast facts, company history and executive team bios.

Sep 03, 2012 - digital-photography-school.com - 158
Digital Photography Tips: Digital Photography School

Each day we send out a quick email to thousands of DPS readers to notify them of updates. This email is just short excerpt of the first few lines of our latest post with a link if you want to read it all. You can unsubscribe from this this service at any time.

Sep 03, 2012 - music.cornell.edu - 167
Cornell University Department of Music
Sep 03, 2012 - phone.com - 167
VOIP Business Phone Service and Systems - Phone.com

Affordable business phone solutions, toll free 800 numbers and home phone service starting under $10/month. See our solutions online or call 1-800-998-7087.

Sep 03, 2012 - wethesavers.ingdirect.com - 154
We The Savers

The Official Blog of Savers Everywhere from We the Savers and ING Direct.

Sep 03, 2012 - problogger.net - 154
Blog Tips to Help You Make Money Blogging - ProBlogger

Blog Tips to Help You Make Money Blogging

Sep 03, 2012 - thinkblue.vw.com - 136
Volkswagen Think Blue | Fun-to-Drive Fuel Efficient Cars

VW’s blog for the latest updates on fuel economy, gas saving tips and eco-conscious high-performance vehicles powered by TDI Clean Diesel engines.

Sep 03, 2012 - nyjewishjobboard.com - 176
New York Jewish Jobs | Jewish Jobs in New York | NY Jewish Jobs | NY Jewish Employers

The NY Jewish Job Board is the best source on the web for Jewish Jobs in New York. Employment and NY Jewish Job Opportunities can be found at the New York Jewish Job Board.

Sep 03, 2012 - techcrunch.com - 158

TechCrunch is a leading technology media property, dedicated to obsessively profiling startups, reviewing new Internet products, and breaking tech news.

Sep 03, 2012 - triqui.com - 141
Triqui - Play, rate and review handpicked Flash Games
Mar 02, 2015 - open.nasa.gov - 143
open.NASA - a collaborative approach to open, direct, and transparent communication about your space agency

a collaborative approach to open, direct, and transparent communication about your space agency

Mar 02, 2015 - geneva.usmission.gov - 161
US Mission Geneva

Interview With Martha Raddatz of ABC This Week Interview John Kerry Secretary of State Washington, DC March 1, 2015 QUESTION: [...] Murder of Boris Nemtsov Press Statement John Kerry Secretary of State Washington, DC February 27, 2015 I am [...] Assistant Secretary of State for International Organization Affairs Sheba Crocker will accompany Secretary of State John Kerry to Geneva, [...]

Mar 02, 2015 - loc.gov - 180
Library of Congress Blog

Founded by the National Society of Professional Engineers, Engineers Week (Feb. 22-28, 2015) aims to raise public awareness of the contributions to society of the profession. The celebration is typically held in conjunction with George Washington's actual birthday (February 22). Washington could be considering one of the nation's earliest engineers, particularly for his work in surveying.

Sep 03, 2012 - verio.com - 178
Web Hosting Plans & Domain Name Registration - Create Web Sites with Hosted Solutions from Verio

Verio, Voted Best Website Hosting Provider, Offers Easy Domain Name Registration, Website Hosting Services, & Hosted Microsoft Exchange Business Email Plans. Get Started Today!

Sep 03, 2012 - ecoki.com - 158
Ecoki | The Eco-Lifestlye Community

Ecoki.com offers a wide range of articles on everything eco and green. Eco Product reviews and much much more!

Sep 03, 2012 - realestate.drawingonthepromises.com - 143
Real Estate Site

Description | A charming, vintage-style home in Circle C. The home is located at 9525 Prescott, Austin, Texas 78749 and is listed for $359,990. It has 4 bedrooms and 3.5 baths and elegant wood floors. For …

Simplify Your Website and Save Money

Just as in any kind of business, duplicating your work in your website wastes time, money, and leaves you open to errors.  Take a look at your site and you’ll probably notice at least two areas that are the same on all pages: your header and your footer.

Most static websites are made up of pages, with each page completely different from another.  If you change a menu item in the navigation in your header, you will have to change it on all of your pages.  When you update your copyright notice in your footer to reflect the current date you have to change in all pages.

Content management systems take care of this using templates, but even if you don’t want to use a CMS you (or your designer) should be eliminating duplication by creating separate files to hold parts of your site that are duplicated from page to page.  Look at the header of this website:

If I have the code that represents this part of my website in a separate file, I can reference that file whenever I need it.  It will automatically appear on each page.  Most important, however, if I make a change, I only need to change one file, not every one of dozens of pages!

Why You Should Care

If you don’t manage your own website, but have a designer or webmaster do it for you you should care because it costs money when you ask them to make updates.  Which is cheaper – making changes to one page or changing dozens of pages manually?  Which is less prone to error, or forgetting to make a change on a page?

It is far more efficient and cheaper in the long run to put headers, foots and some kinds of sidebars or side navigation in separate files, changing them only once and having them appear via code on each page they are needed.

Will This Work On My Site?

I can take a look at your site for free and let you know if it will work for your layout and web host.  Just contact me at diane@beyond-paper.com to set up a review!


The Call to Action: Why Should Your Customer Click Through?

Do you have a call to action on your website?  Do you know what a call to action is?

Words that urge the reader, listener, or viewer of a sales promotionmessage to take an immediate action, such as “Write Now,” “Call Now,” or (on Internet) “Click Here.” A retail advertisement or commercial without a call-to-action is considered incomplete and ineffective.


A call to action asks your visitor to “Buy Now”, “Call Now” or “Sign Up” and there are a few things you need to do on your site to make a call to action work.

Why Should I?

As Paul Boag says in his great article, “lay some groundwork”.  Identify a need that you or your product satisfies.  Twitter’s home page makes it clear why you’d want to sign up:

Notice their message is extremely clear and concise.  Let me rephrase that – it is short.  If you can’t explain why someone should use/buy your product or service in a sentence, you need to rethink that you do!  Pinterest has one of the best “why should I” messages I’ve ever seen:

How Do I Make a Purchase/Sign Up?

Make it very easy for your visitor to turn into a customer by presenting a clear option path and limiting those options.  Take a look at both the Twitter and Pinterest examples, above.  If you are already a user, it is clear where you sign in.  If you aren’t, it is clear what you need to do to become a user.

Let’s take a look at HostGator:

While the layout is just as busy, notice the why in each area.  Unlimited Web Hosting: Web Hosting made Easy and Affordable Starting at $3.96 per month.  One button leads the visitor to three hosting options:

Notice the clear difference between the plans, the ability to see pricing and the easy “Order Now” button.

The Call to Action

You’ve told the visitor why they need your service and present a clear pathway to order your service, now tie it all together with the action:  “Order Now”, “Join Pinterest”, “Sign Up For Twitter”, heck if you’re a marketing company maybe “Make Me Famous” would work.  The call to action should be obvious (which is why brightly colored buttons are often used), but it should also be trackable.  You want to be able to compare the number of clicks on each different call to action link (button, image, etc) and compare those numbers to how many people actually signed up or followed through by contacting you.

Tomorrow I’ll follow up with different types of call to action widgets for your website, complete with tracking information.

Managing Your Website Without a Webmaster

If you are thinking about a new website or redesigning your current one it is important to plan ahead.  How will your site be managed?  Who will update phone numbers or page information?  How often do you want to change content?  Do you need to post information for your customers on your site that may change regularly, like business closed dates or hour changes?

The majority of small businesses have the person that designed their website manage changes, but there are a few problems you should be aware of.  First, you may have a good relationship with your designer now, but what happens if that relationship turns sour or your designer seems to drop off the face of the earth?  Gaining access to your site may be extremely difficult or even impossible, leading you to start all over.  This is a real problem that I deal with on a monthly basis and shouldn’t be taken lightly.  All of your website hosting and domain registration should be in your name and you should have all of the passwords and FTP access information – even if you don’t know how to use it.  While this information can be changed by an unscrupulous designer, but at least you are protected if they disappear or you just don’t want to use them anymore.

Second, having your designer make changes to your website can be expensive, especially if your changes come in dribs and drabs.  Most designers have a minimum charge of 1/4 hour, even if a change takes only a minute.  You can save money by making sure you get all the changes (in their final, proofread form!) to the designer at once, but you still have to pay to have those changes made.

Finally, time can be an issue.  Most designers have a full schedule and your changes make take days or even a week to get done.

There are a couple of alternatives that can save you money and allow you to make changes when and where you want.

The simplest option is for those who have just a single area on their site they want to change.  Say you want to post a tip of the day, an upcoming event or put a special “We will be closed for Christmas” notice on your site.  With a simple password-protected form you can edit the text that appears in that specific area and have it appear automatically.  This option can be integrated with a current site with ease and usually costs around $50 to install.

If you want to manage the text and images on any of your pages, then a content management system (CMS) is the way to go.  With a CMS  you can’t change the overall formatting or layout of a page – you just change the content.  You don’t need to worry about learning HTML; the editor generally looks like a word processor and you can apply some formatting (bold, underline, bullets, links, etc) as well as apply built in formatting for headers and titles.

While an existing website can be converted over to a CMS, it is much better (cheaper, easier, faster) to start with a new layout, so this option is for those contemplating a new website or an overall website change.  Depending on the CMS used there can be a learning curve.  I’ve found Joomla difficult to learn to use, while WordPress is very simple and intuitive.  Setting up a CMS will add $350 – $500 to the cost of your website design, but you can make that back fairly quickly if you have a website which you need to change often.


Get More Business Tech Tips