10 steps to a better website!

35

Upload: apedemak

Post on 30-Sep-2015

11 views

Category:

Documents


0 download

DESCRIPTION

10 Steps to a better Website! a Quick guide with simple often overlooked techniques that will improve your website. Find out more at http://apedemak.com or http://getonlineusa.com

TRANSCRIPT

  • Copyright & Disclaimer

    Copyright 2015 by Derrick W. JohnsonAll rights reserved. This book or any portion thereof

    may not be reproduced or used in any manner whatsoeverwithout the express written permission of the publisherexcept for the use of brief quotations in a book review.

    You are authorized to share this content on social media and by email by crediting the original source @ApedemakStudios.

    First Printing, 2015

    www.apedemak.com | www.getonlineusa.com

    1

  • Table of Contents

    10 Steps to a BETTER Website!

    I. About The AuthorII. Table of ContentsIII. Step - #1 - Add Social SharingIV. Step - #2 - Have a Clear MessageV. Step - #3 - Visible Contact InfoVI. Step - #4 - Fix Spelling ErrorsVII. Step - #5 - Fix Broken LinksVIII. Step - #6 - Expose Your ContentIX. Step - #7 - Reduce Load TimesX. Step - #8 - Get With The TimesXI. Step - #9 - Remove FlashXII. Step - #10 - Go Mobile!

    2

  • About The Author

    About The AuthorDerrick Johnson is a self taught web designer/web developer. He has 7+ years of on-the-field hands-on experience, designing and building websites from scratch. During the course of his freelance web development career he has built custom websites, web applications, designed Logos and even HTML5 video games. Over this time he's noticed the change of trends in web design and web development, and has also learned to leverage multiple platforms to get the job done. He is a firm believer in The right tool for the job, using both WordPress and Drupal for many sites. He also has extensive experience with Joomla And the Magento e-commerce platform.

    What sets Derrick apart from many other web designers, is his ability to both design a site from scratch as well as code that site, building in complex functionality. During the course of his career, hes had to tackle very complex web development projects. From custom CSV product up-loaders, dynamic web galleries, to customizing e-commerce systems, and even building custom themes for WordPress, Drupal and Joomla. Being comfortable in both Photoshop and a text/code editor has given him an appreciation for both design and development. Enjoying coding as much as pushing pixels, gives him a Hybrid approach to tackling web projects. Though based in San Diego, California, he has worked with multiple clients throughout the nation. Mostly smaller mom-and-pop shops as well as medium-sized businesses that need that extra push to get their visions realized.

    Besides his passion for web design and development, he also has created custom logos for many clients to fit their branding needs. One of his largest interests is in indie game development using HTML5 and Unity3D. Being a freelancer he is always looking to network with new clients and open to new opportunities. Throughout the course of this book if you find yourself stuck or in the need of assistance, please feel free to reach out to him via email or phone and he would be happy to assist you with your project.

    3

  • #1 - Add Social Sharing

    4

  • CHAPTER ONE#1 - Add Social Sharing

    It should be apparent to every web surfer that Social Media has taken over the World Wide Web. Its now more important than ever, to have your website connected to the billions of logged in users worldwide, as well as your content easily sharable. Millions of users globally share information day-to-day, many of whom are be looking for products, services or help from individuals like yourself. New customers are gained everyday due to social media alerting the customer of the opportunity.

    Benefits of social sharing1. Connect with millions/billions worldwide.2. Drive more traffic to your site.3. Acquire new leads.4. Quickly bring new awareness of your website, product, service or brand.5. Become more knowledgable of what information customers find important on your website.6. There is power in numbers, the more people who Like your product, service or brand, the

    more likely people will buy from you or use your service.

    How to add social sharing:1. Visit sharethis.com2. Select the option that meets your websites criteria. Is your website built onWordpress? Is it a

    Drupal-based site or a standard static HTML site? How about Joomla? Choose the best option.3. Follow the directions on sharethis.com to add the code to your website. If you have a CMS

    based site using WordPress, Drupal or Joomla there are plug-ins, modules and extensions that can assist with easily adding the share code to your website.

    4. Decide what type of content you would like shared and where you would like the share code to be added(Blog Posts? News Articles? Products? Etc).

    5. If adding the share code is beyond the scope of your understanding, then hiring a freelance web developer or web design agency or even a web savvy friend may be your best option. Their help should easily asset you with getting the code set up on your website, so you can start sharing your content and increase your web traffic.

    5

  • Resources:Sharethis.com

    6

  • #2 - Have a Clear Message

    7

  • CHAPTER TWO#2 - Have a Clear Message

    Nothing scares away a potential user quicker than being confused about what your site offers. How often have you visited a website only to realize that you couldnt figure out the purpose of the site? Having a clear defined message helps sort out the confusion right away, and increases the opportunity to quickly connect with users. The attention span of the average user has dramatically shortened, with seemingly infinite information and options available within a few keystrokes; most people arent willing to wait around to Figure Out what it is you are offering.

    Benefits of having a clear message1. Eliminate the guesswork for your users, your users will know right away what your site offers

    and how they can benefit.2. Get your main message across to your customers right away.3. With less confusion customers will find your website experience overall better4. The Quality of your content will increase overall, which could eventually lead to more

    opportunities for your site, product, service or brand.

    How to have a clear message.1. Decide what is the most important message you would like to get across to your potential

    clients or users for your website.2. Find out the most effective way to present that content or message with easy digestible words,

    leaving out fluff and filler words. This helps drive your point across.3. Remove content including images and text that arent relevant to the premise or message of

    your website. Though it may be nice to have that robot image, Cat or Horse image on your website, it should be removed if it doesn't apply to your contents meaning. If it is out of context or doesn't add to the overall message of your site, it should be removed.

    4. The message of your site and premise of your site should be clear right away. A user visiting your site shouldn't have to guess what your site is about, what the site offers, or how the site will benefit them. Often times website owners forget about the user and only think about what they want on their website. This fails because your website should be designed for your users. The more your website keeps your users in mind, the greater chance your users will continue to visit your website, and possibly make that purchase, email or phone call that your business needs.

    5. After you've decided on what your clear message should be and how you like that message presented, the next step is to have the content implemented on your site. If you are using a CMS or content management system like WordPress, Drupal or Joomla this process should be pretty straightforward using the content editors built in. If you have a static HTML website then your content will have to be changed on a file-level using an editor like TextMate or Dreamweaver or in some older cases Microsoft FrontPage (if you still use that). The files then have to be sent to the web via an FTP (file transfer protocol)program. If this is beyond your scope of understanding or knowledge feel free to reach out to a freelancer, web development agency, or web savvy friend to assist you with the necessary changes.

    8

  • #3 - Visible Contact Info

    9

  • CHAPTER THREE#3 - Visible Contact Info

    There are very few things that can frustrate a potential client/customer more than having to jump through hoops to find a way to send emails or make a call for your product or service. Typically most users will abandon a website and search of another one with a similar offer. If the contact info of that site is easily available then, there goes another potential customer that your lost and your competitor gained. Having your contact info easily scannable and available makes it easier for customers to reach out and connect with you. My suggestion is to have it (Your contact info, phone or email, or even a link to your contact page), in both your header and footer region, on every page. This insures that when your users want to take action on your product or service, it is a simple process.

    There are still many older sites that have the contact information buried 3-4 pages deep within the website. This of course is bad news, and a good example of something to always avoid.

    Benefits of visible contact information1. With visible contact information your customers will have a simple, efficient and quick way to

    contact you via phone or email2. Making your contact information immediately available, eliminates the hide and seek that

    many other websites have, which may drive away a potential customer or client3. Contacting you for your Product, Service, or Help is now only a click away, will increase leads

    for your business.4. If you prefer phone calls you can get your phone number out immediately, if you prefer email

    or Skype those are options as well as Facebook or Twitter etc

    How to add visible contact info1. A commonplace to add instant contact information is within the header or top region of your

    website, as well as the footer or bottom of your website. If your direct contact information is currently hidden pages deep within your site; it's a better idea to place your contact information accessible on every page, preferably in the top header region and footer.

    2. If you are using a CMS(content management system) like WordPress and Drupal or Joomla!, then there are relatively easy ways to add contact information to your header & footer regions. With Wordpress look for your widget areas, in Drupal look in your block region editor. For Joomla! this area is called your header region. Using the built-in tools of your CMS you can add your contact information to these regions this should be relatively straightforward especially of the theme you're using for your website contains the necessary regions to add the changes desired.

    3. Once the best technique is identified to add contact information to your header & footer regions, proceed to make the necessary changes. For your contact information; having your phone number, link to your email address or even a button to your contact page is a great idea.

    Do whatever you feel suits your business best.

    10

  • 4. If you have a standard static HTML-based site, the process is slightly different. It requires knowledge of HTML coding and an FTP program like FileZilla to modify your content and upload it to your hosting account. With all accounts, if this process is beyond your spectrum of knowledge, or too time-consuming for you; please reach out to a local freelancer or web developer to help you get this going.

    11

  • #4 - Fix Spelling Errors

    12

  • CHAPTER FOUR#4 - Fix Spelling Errors

    Having the most professional presentation on your website helps to establish instant credibility. Poor grammar and misspelled words often gives off the impression that a website is being ran by a novice and not someone serious about their business. Fixing spelling errors is a quick way to give your site a simple, but effective upgrade. Nothing says amateur like having misspelled words, and incoherent sentences. A good website works as a good Hype Man for your business. The more polished the website, the bigger impact your image will have with potential customers.

    Benefits of fixing spelling errors1. Spelling errors makes your websites content look like it was produced by amateurs, having

    proper spelling and punctuation instantly adds additional credibility to your website.2. There are many websites across the Internet that have poor spelling and grammar, correcting

    your spelling and grammar/punctuation will instantly set you apart from your competitors and the other amateurs that seeks to compete with you.

    3. By going over the spelling of your content, you may find new and engaging ways of rewording your sales message.

    How to fix spelling errors1. Many modern browsers like Firefox, Chrome, and Safari have built-in spellcheck. To use the

    browser-based spell check features, select the text that you wish to spell check and right-click. Choose the Check Spelling option from the right-click menu or whatever the appropriate option for your browser. If it's not available on your right click menu, it may be under the Edit top drop-down menu of your browser. This is the simplest way to check the spelling of your websites content.

    2. Second and probably the most effective option is to, select all of the text that you wish to spell check off of your website. Copy and paste the text into a word processing document like Microsoft Word or Apple pages or even Open Office.org. Use the built-in spellcheck options to go through and fix the spelling of the document. During this process read over your text and make sure that the flow of the content works well. Remove any filler words and unnecessary information to assist with driving your point across quicker. The sooner your point is recognized by your client or customer the better the response will be.

    3. As discussed above; if using a content management system (or CMS for short) like WordPress, Drupal and Joomla etc., use the built-in content editing tools to replace the spelling errors with your newly corrected content. This should be a pretty straightforward process. If you are not familiar with editing content in the CMS your site is built in, there are plenty of tutorials online(YouTube) that will guide you through it.

    4. As in all cases, if editing your content and replacing it on your website is beyond your knowledge or youre too busy; please reach out to a local developer, or freelance web designer for assistance. Also if you require the help of someone to spell check your document, there are plenty of professional freelance writers and copy editors online, that would be happy to assist

    with your content.

    13

  • Resources: Online Spell Checker: https://www.jspell.com/public-spell-checker.html Online Grammar Checker: https://www.grammarly.com/ Online Spelling and Grammar Checker: http://www.reverso.net/spell-checker/english-spelling-

    grammar/

    14

  • #5 - Fix Broken Links

    15

  • CHAPTER FIVE#5 - Fix Broken Links

    Picture this, you visit somesite .com and read all about their new-fangled offer, get your credit card ready, click on the link to buy the New Shiny Doodad , only to have your plan stopped dead in its tracks by another broken link! Broken links are bad news to your site, and bring down its value to your customers. Fixing broken links lets your users know that you site is up-to-date and functioning correctly. Having broken links gives the impression that your website is Vacant or abandoned, or at the very worst not credible. There are way too many scam sites on the internet, why allow your website to be associated with any of them? After all you actually have a valid offer!

    Benefits of Fixing Broken Links1. Reduce Bounce Rates of visitors to your website, who may think your website is old or

    abandoned.2. Increase confidence that users of your site can find the content you have provided for them.3. During the process of fixing broken links, you get to have a User Experience. This may

    provide the opportunity for you to see how your content can be better structured to suite your users. You may also find many hidden opportunities to add links and additional content that was previously missed!

    4. Improve Search Rankings. Search engines user crawlers to follow links on a website. If the Crawler finds a broken link, it will skip that page. If the skipped page has valuable information on it, then the info will be lost to potential customers.

    How to fix broken links1. The easiest way to fix broken links is the first identify which links are broken. A simple way to

    do this is to, check your primary navigation links. Whether it's your top navigation bar, or whether you have navigation links in your sidebar. Go to each page to see whether not they are connected to where they are supposed to link. The second step would be, to go through each linked page and check to see if the links within the content/body of your website are working. Make sure those links are working and not giving error pages.

    2. A more advanced method of checking your links is using an online link-checking service. The online link checking website will navigate through your website instantly for you, checking to see which links are broken and which ones are okay. If the online link checker returns no errors, good news that means your websites links are error-free. If it returns errors then you know which pages will require the links to be fixed.

    3. Once your broken links are identified, it's simply the process of going through and fixing each broken link. If you know standard HTML and how to replace links using HTML code; use your editor on your CMS to fix the broken links. if you're using an HTML editor on your desktop computer to change the code of your links use the editor to insure that your links are working. If this is beyond your understanding there are tutorials online, that can show you the basics of understanding how to create a link on your page. If you are using a CMS like WordPress, Drupal or Joomla each one of these systems have what's known as a WYSIWYG

    editor built in. A WYSIWYG editor allows you to select text and even links fix

    16

  • them. Use the built-in tools to fix the links on your site to ensure that each one of your links are good and working.

    4. As in all the above cases, if editing the HTML yourself this beyond your knowledge or the thought scares you, please reach out to a local web development company or local freelancer to assist with fixing the links on your site.

    Resources: Online Link Checker: http://validator.w3.org/checklink Wordpress Broken Checker: https://wordpress.org/plugins/broken-link-checker/ Dead Link Checker: http://www.deadlinkchecker.com/ W3 Schools Anchor-Tag/Link Html Reference: http://www.w3schools.com/tags/tag_a.asp

    17

  • #6 - Expose Your Content

    18

  • CHAPTER SIX#6 - Expose Your Content

    Just like your Contact info, having easy access to your content gives a better experience to your users. Having the most important information front and center on your homepage will provide your users with a nice overview of what to expect from your site. Exposing your content isnt just about dumping everything on your homepage, but more about providing content teasers and links or buttons to quickly access those areas. Once your content is exposed on your site, youll find that many users will actually explore more of your website. This naturally is a great thing, and will help users get more familiar with what your site is all about, and what you offer.

    Dont assume that your navigation links will be reliable enough to guide users to others sections of your site. There are many reasons why a user many not use your main navigation, or even be too busy to use your drop down menu. Avoid these pitfalls buy providing alternate methods for users to get to your content.

    Benefits of exposing your content1. Many websites have content hidden deep within the structure of the site, by exposing your

    content especially on your homepage you open the door to potential clients/customers find more information on your website and possibly staying longer.

    2. With your content immediately available on your homepage, you can instantly notify your users of the many sections of your site and the content they offer . This can include information like products, testimonials, reviews, or even blog posts.

    3. With your content exposed on your homepage this opens up the opportunity to redesign your content in a way that is engaging to your potential customers/clients. Many of the better sites that convert well, have designs that are centered around the content of the site.

    How to expose your content1. Make an inventory of the content on your website make a list and prioritize the most important

    content on your website. if you have products or more specifically featured products, highlight those products on your list. If you have blog posts that are important or news articles, highlight those posts or news articles on your list. If there are important pages like services or contact information, list them that and prioritize them. Put yourself in your user shoes: youre are a user visiting your website for the first time, what would be helpful to you to get understanding of what your website offers? More importantly what would be helpful to help guide you to make that purchase, email or phone call?

    2. Once you have identified your most important content, figure out what content you would like listed on the home page of your website.

    3. Use the best method to list your content on your homepage. If you have a CMS use the built in editor, if you have a static site use your editor of choice.

    19

  • Resources: Freemind (MindMapping) http://freemind.sourceforge.net/wiki/index.php/Main_Page

    20

  • #7 - Reduce Load Times

    21

  • CHAPTER SEVEN#7 - Reduce Load Times

    Reducing loading times for your site, will increase the speed that users are able to access your content. A user will more than likely leave a slow website to find a faster site. They will look for a more Responsive website with similar content or offer. The faster site may not even have better content, or a better offer, just being faster may give them an advantage. If your website is Too Slow To Use, a user may not bother with what it is you offer.

    Speeding up your website is one of the best upgrades you can add to your website. With the short attention span of the average user, anything to help keep them engaged with ultimately work in your favor.

    Benefits of Reducing Load Times1. With a slow loading website the experience of the site is greatly reduced to your users, this

    means that they will more than likely leave your website and go to a similar website that loads faster. You then lose a potential customer or user for your site. A Faster site will help keep the user on website.

    2. Reducing loading times also reduces bandwidth this comes in handy especially of your web hosting company has bandwidth restrictions. In some cases this may decrease the cost of your websites monthly fee.

    3. A fast loading website will increase the potential for users to remain on your website, this is really beneficial especially if you have an e-commerce website when you're selling products. A few second may make the difference between a sale or no sale.

    4. Many search engines measure the quality of a site's content based upon the loading speed. If the search engine notices that most of the users leave the site quickly they assume the content is not of good quality thus reducing your potential search results. A Faster site with good content greatly increases your potential search results and increases the value of your website.

    How to reduce loading times1. Remove unnecessary video, audio files, and large images2. Optimize your images, converting PNG images to JPEG images or GIF images were possible.3. Compress your JavaScript and CSS files, and possibly consolidate JavaScript and CSS files

    into combined files.4. The less resources necessary to download at one time the faster your site will be. By compiling

    your JavaScript files and CSS files into combined master files you eliminates additional server requests, which will speed up your site.

    5. Convert reusable image elements into CSS sprites. CSS sprites are a technique that allows the use of one image file to be used for multiple elements on your website. This means instead of five or six different images for buttons or navigation elements or social media icons, you will now require only one file for your UI elements.

    6. Enable Caching to your site, caching can significantly increase your sites speed, especially on database driven websites (Wordpress, Drupal, Joomla etc..)

    22

  • 7. As in all the above cases, if adjusting the CSS or images is beyond the spectrum of your knowledge, please seek out professional help via a freelance web designer or web development agency.

    Resources: Learn more about Css Sprites: http://www.w3schools.com/css/css_image_sprites.asp Compress Javascript: (Combine Multiple JS Files) http://jscompress.com/ CSS Compressor http://csscompressor.com/ Wordpress WP Super Cache: https://wordpress.org/plugins/wp-super-cache/

    23

  • #8 - Get With The Times

    24

  • CHAPTER EIGHT#8 - Get With The Times

    Spruce up your design to insure it doesnt look dated. The general aesthetic on the web changes based upon the current technical and social trends. Due to this fact there are many websites that were designed when a certain trend was Hot, now that those trends are no longer Trendy these sites now look dated. Also over the years the web has matured and now there are certain design factors that should be considered.

    Many well designed websites stick to design guidelines that adhere to the brand of the product, service, or entity. In many older designs people often added anything they thought was Cool to their website, regardless if it made the site better or not. This included blinking and scrolling marquees, animated gifs for backgrounds, bad midi music, Website Splash Screens etc These are all considered retro/dated design aesthetics and should be avoiding if a modern site is what you are after.

    Benefits of Getting With The Times1. A new fresher web design has the benefit of appealing to a wider potential audience, as website

    trends and technology changes so does the opinion of a well-designed website.2. A website with an older design often leaves the impression that the website was designed a

    long time ago or maybe even worse abandoned and not up-to-date with content. A user visiting a site that looks like it was designed 5 to 10 years ago probably will leave that website never to visit it again. Refreshing your websites design will help combat these issues.

    3. With a refreshed design you have the ability to put your client's needs first, having a client-centered website will increase the value of your website to your potential users. This will increase the potential for you to get new sales leads or even new clients.

    4. A fresher design will put you back in the game with your competitors. Face it, many of your competitors may have sleeker designs that may appeal to a modern audience. The website that looks dated instantly removes you out of the race to gain potential clients.

    How to get with the times1. Applying a brand-new design to your website can be relatively easy if you are using a CMS

    like WordPress, Drupal, or Joomla`. The benefit of using a CMS is the ability to change the website theme when required. There are many free and paid themes available that may fit your website. Using the administration area of your website, you can change the theme that is applied.

    2. If using an off-the-shelf theme doesn't suit your needs, and you require something more customized, you can always hire a freelance designer or web development agency to create a custom theme for your website.

    3. In the case that you are savvy enough yourself, you can upgrade your design using HTML and CSS with Dreamweaver, FrontPage(if you still use this) or a standard text editor like TextMate and Notepad++. Once done FTP over the changes and your done.

    4.In certain cases a brand-new design is a necessity, there are many cases where

    25

  • your base design is still pretty good. In these cases having someone make adjustments to your base CSS file may do the trick.

    26

  • #9 - Remove Flash

    27

  • CHAPTER NINE#9 - Remove Flash

    Once upon a time every website that was considered Cool and Hip had Adobe Flash animations embedded in them. There were even websites that were built entirely in Flash. Flash from Adobe is a web animation/application platform that enables richer web experiences. The downside of this technology is that to use it, the user must have a browser plugin installed to view the content. This wasnt much of a deal-breaker in times of old web, because many web browsers shipped with a version of flash installed automatically. This meant that more people had access to a richer web experience, with less hassle.

    Then came along HTML5 and the newer technologies that promised to do everything Flash could, plus potentially more. But without the disadvantage of requiring any additional software to be installed(browser plugin: Flash Player). This was good news to developers, because they could now use there existing skill-sets and provided richer web experiences, with little to no learning curve. Lastly Apple made a very strong decision to not support the flash platform on their mobile devices/IOS platform. The settled in favor of HTML5 support. This was the final Nail in the Coffin for Adobes Flash platform. With the Mobile web takeover, and IOS/iPhones & iPads not supporting Flash. Removing Flash means your content will be available to a wider audience.

    Benefits of removing flash1. Adobe's flash product is now considered a technology of yesteryear. With the rise of mobile

    devices and specifically the iPad and iPhone devices, the necessity for flash has been significantly reduced. Flash as a product no longer works in the mobile arena. Apple made the decision to support HTML 5 and abandon flash due to performance issues. Having a flash-based site or flash elements on your website eliminates the potential for that content to be viewed on mobile devices.

    2. Replacing flash with HTML 5 will increase the shelf life of your existing website and also ensure your websites content will be viewable on the plethora of mobile devices worldwide. The majority of today's web browsing actually happens on smartphones including iPhones and android devices, as well as tablets. If a user visits a website that still has flash enabled, via their mobile device; the content or website will show an error or blank space. This makes it look like your website or content is broken which gives off a less than professional image which may lose you a customer/client.

    3. HTML 5 also performs better in many cases thus increasing the battery life of your mobile device so it is preferable method for today's modern web.

    4. Due to the reduction of Adobes Flash platform on the mobile web, there are now fewer flash designers/developers. With HTML being the standard for all web sites there are drastically more designers and developers that can help with your website. This means if you need help with your website it is easier to find someone who knows how to assist you to get your problem fixed sooner at lower cost. This also means that if you have to switch designers and developers in the future, it would be relatively easy for someone else to pick up the pieces.

    28

  • How to remove flash1. To remove flash the first step is to identify which parts on your website are Flash. Find out

    whether your website is built entirely in Flash, or only certain elements of your site are built in Flash. Are these elements simply animations or are they more complicated applications that serve specific purposes?

    2. Once the nature of the Flash implemented on your site is identified, make an inventory of what needs to be replaced. If certain user interface elements are built using Flash, these elements can easily be replaced by standard HTML5. If the entire website is built in Flash then there will be a need to replace the entire site.

    3. In the case that you are using a CMS like WordPress, Drupal, Joomla!, the process to remove flash is to relatively simple change to a theme that doesn't include flash. Or in the case that flash is coming from a specific plug-in or module, disable that plug-in or module and install an alternative built with HTML 5.

    4. If these techniques are beyond your understanding or simply don't have time to implement them, reaching out to freelance designer or web agency would be a good idea.

    Resources: Why IOS doesnt support Flash: http://apple.com/hotnews/thoughts-on-flash/ Html5 & Flash Comparison: http://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash

    29

  • #10 - Go Mobile!

    30

  • CHAPTER TEN#10 - Go Mobile!

    The Majority of web traffic is now done on mobile devices. Many websites are formatted for a better viewing experience on Smart Phones and tablets. This technique is called Responsive Web Design, meaning that the website will respond differently based upon the device it is viewed on. Having the same website change to fit a users phone, eliminates the need to scroll around the phones viewport. This provides a native experience for the user that they are accustomed to. Not having a mobile ready design means that you may lose potential customers/users, as many website owners have already gotten hip to the need for a mobile version of there website and are providing alternatives for your potential customer.

    Benefits of going mobile1. Currently the majority of all worldwide web traffic is done via mobile devices. This includes

    iPhone, iPads, Android phones and Tablets. Having a website that targets these devices greatly increases the chance that your message will be seen.

    2. Because most web browsing is done via mobile devices, when a customer/client visits a website that's not designed to fit within their mobile experience the potential for them to leave the website and not return increases. Having your website designed for a mobile experience greatly increases the potential that the user will stay on your website, possibly buying your product, or giving you a call or email.

    3. With a mobile specific design, there is the potential to add new elements and technology to enable your customers to contact you easier. Many mobile specific websites include call-buttons that allow the user to easily call directly from their phone. The likelihood that someone will call you when the process is simplified greatly increases.

    4. A mobile specific design also brings the potential for mobile specific content. Mobile specific content can be catered towards users on a mobile device. Since the screen of a mobile device is smaller than a desktop browser, the necessity to decrease wordy content and rewrite it to be easily digested may open up the doors for better constructed content. More concise content may deliver your message more efficiently.

    5. All of your competitors more than likely have a mobile designed website, or they may be in the process of getting one. Since the majority of web traffic takes place on mobile devices, most users of the web expect a mobile first experience. Not providing this experience for your users possibly creates a situation where the user may not return to your website or miss your message all together.

    How to go mobile1. If using one of the above-mentioned CMS systems like WordPress, Drupal, or Joomla!, going

    mobile is relatively simple. It really is a matter of finding a theme that is mobile ready. The keywords to look for is that the theme lists as features. If one of the features listed is Responsive Design? Then the themes should be good to go! Responsive design means a websites design will adjust its self according to the screen size it is viewed on.

    2. If going the CMS and theme route, simply select a theme that is mobile compatible to replace your current theme. This will instantly make your website mobile compatible.

    31

  • There may be a need to adjust the themes branding I.E. colors fonts and images to reflect the brand you have in mind.

    3. In the case that you still have a static HTML website and you wish to keep the existing design, the HTML and CSS will need to be adjusted with responsive CSS properties and HTML5 elements. There are also mobile ready HTML5 based static themes that you can use to replace your existing design. This may or may not work out depending upon the current customization of your website. Is your current site heavily branded with your colors and brand themes? Is there a specific layout that currently serves a specific purpose? If so and you are knowledgeable enough, within a few days work you should be able convert your current site to work with the mobile web.

    4. As in all cases; if the whole idea of adjusting your own code or selecting & changing your own theme to one that is mobile ready is beyond your grasp. Please feel free to reach out to a freelance web designer, a web development agency, or even a very savvy friend to assist you.

    32