First, an intro to the problem

Ever since the beginning of the Internet, websites have been displayed in a variety of screens. Mostly different sizes, but eventually we'll have other display mechanisms, like a 3d system or a virtual display, we'll get into that later.

Almost everyone that visits a website now does so on a tablet, a phone, or a traditional monitor like your desktop monitor or even a tv. Back in the day, the sizes for screens were more or less uniform. You had a uniform ratio of maybe 4:3 (like old-school televisions). Then wide-aspect became popular and over time, we've added so many different sizes and ratios to our display systems that it has become nearly impossible to keep track.

As a designer, this can be a nightmare because something that you built and looks awesoem on your screen may not look so good on someone eles's screen. Put aside color variances, and pixel sizes and resolution, the size of the screen makes a huge difference. I've experienced this first hand. I have a big 27" monitor with a high-resolution. So when I make graphics, they look awesome, but if I then go to a smaller screen or one with less pixels then it may not look so good.

Previous attempts at solving this problem

Designers, programmers and web geeks have known about this problem for a while and several solutions have been put in place to address it. For example, you could have your webserver detect if someone is coming from a mobile device, and instead of showing them your normal website at http://www.example.com you could show them or . Functionally this is an acceptable solution and many current website do this; Facebook, Twitter, and others. But this approach requires a lot of technical ability and resources to maintain.

Another approach is to have your website serve an entirely different website but on the same domain. You can accomplish this easily with a plugin if you are using WordPress and the plugin pretty much takes care of all the technical details for you. You just need to configure the plugin, adjust the settings to your liking and you're done. It's also a good approach but the downside is that you require some expert level knowledge if you want to customize the experience for mobile as much as you have for your desktop.

There are also other less popular approaches to fixing the problem, like having javascript re-write the page on the fly when a mobile device is detected, or having a totally different application serve as the website in certain scenarios. But these aren't very popular and they're so laser focused on a specific issue that I won't talk about them much.

Both the first two  solutions I mentioned are still in use today and I don't think there's anything wrong with them. I use them from time to time depending on the application. But responsive design offers another layer of customization.

So finally, what is responsive design?

So the newest solution to the problem I mentioned earlier is to make your web applications or websites be responsive. This in short, as the title implies means that the design isn't static but instead it "responds" to its context. Primarily and today, the context is really just the size of the screen. One day when we have a different system for viewing or interacting with websites and applications, the experience may be totally different but the idea will be the same. The application and or website will adjust to the location where it is being accessed from.

[pullquote position="right"]One website, multiple versions. - Copyblogger[/pullquote]

To explain a little bit more in detail, when you find a website that is responsive, you'll notice that the overall look and feel of the site is similar across your big screen browser, your iPad or tablet, and your iphone. Notice I didn't say that it's the same. But your colors, your text, the layout and the content is easily accessible in a way that makes sense for that device. This website is responsive, although I've not adjusted it to be perfect, the theme I'm using is responsive out of the box. (side note, don't use this theme, I don't recommend it but I'm stuck with it until I have time to rebuild)

The main thing being done with responsive design is adjusting the elements of a website to fit the screen, or morph entirely so that the visitor can find the information they need. It's easy to test and see what I'm talking about. One of the cool things about responsive design is that it reacts in real time, there is no need to reload a page to see the differences.

For example. Right now, on this blogpost that you're reading, take the bottom right hand corner of  your browser and make the window smaller, make it narrower and do it slowly and you'll see how things get moved around for you as you reduce the window size. After you get to certain width, things start changing completely, for exmaple, you'll notice that the Menu at the top changes to just "navigation" and you can then click on it to have the menu items drop down. You'll also notice at this point that the sidebar is no longer visible and has been moved to the very bottom of the page instead (scroll down).

So how do you get responsive design on your website or blog?

Currently, this is still a new technology that has only been adopted by cutting edge designers and agencies so you'll pay a pretty penny to have this applied to your website. But you can also find some really great themes that are responsive out of the box and do a really good job at this. Newer Studiopress designs have responsive built in, and in the free side of themes, a theme called Responsive shot up to the top of the charts recently, it does a really good job of helping you implement a responsive design. So  you can pay someone to do it, see if your theme has an update that implements responsive, or you could move to a new theme that is responsive out of the box.

So What's the Big Deal?

When you have a responsive design, your website is more accessible. We live in the age of mobile and people are accessing websites on mobile devices more often than they are from their desktops. Many times people will leave the site or close their browser if the website doesn't load and fit their screen. If you don't use responsive design, your website will not load or it will load in a way that is so small on your screen and you have to pinch and zoom a lot and scroll all over the screen to see what you're looking for. The website experience without responsive design is pretty bad in most cases and bad experiences will make your visitors leave and probably not come back for a while, and by a while I mean ever.

When you get a chance, invest some time in learning and hopefully applying a responsive web design to your website. I think you and your readers will appreciate the efforts. I have to make a few adjustments myself, but I'm 3/4 of the way there.

Here are other resources you may find useful:

From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display. Responsive Web Design (Thanks Steve!)

Wikipedia says this about Responsive Web Design: Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

Responsive Design on Twitter

Responsive Design Newsletter: A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links.

Mobile Responsive Design 101, an essay by Copyblogger.

Designing for a Responsive Web, by webdesign tuts+

On a side note, this is day #3 for the 31DBBB that some of us are running on my blogging group. Today's task is to promote a previous blogpost so I'm promoting my previous post, the list of 10 reasons nobody ever told you of why you need a website. 

The post What is Responsive Design? appeared first on Digital Marketing Through Content & Influence.

A WordPress website tends to slow down overtime when the author or admin continues to add plugin after plugin just to have a new shiny feature. Each plugin takes resources and when you multiply those new resources being used, by the number of visitors accessing your site, you can have real problems with your hosting provider keeping your website up. Especially when you have a spike in traffic, as my friend Megan found out when her name hit entertainment news outlets a few weeks ago.

Checking your load times and reducing them as much as possible is important if you want Google to increase its love for your website. It sounds simple enough, make your website load faster and Google will give it some brownie points. But how do you actually find the things that are slowing down your website and how do you make it go faster? It's a lot like tuning a car. And the same principles apply, if you like tinkering with cars and getting every ounce of performance by tweaking the air intake and the fuel ratio and all that stuff you'll be spending time in the garage working on that stuff. If you like the results that come from tweaking your car but you don't particularly like doing the work, you can always pay someone to do it. The same is true for websites and blogs. You can follow tips and advice and even tutorials you'll find online. Each time you adjust something you'll see results and over time you should be able to adjust your entire website and see how your traffic and visitors react. Or you can pay someone to help you optimize your sites.

[pq]Fine tuning loading times can take time and precise adjustments accompanied and directed by research and analytics.[/pq] But to get started, there are two places and things you can do. The first I'll mention applies to any website it's by Pingdom and their page tester tool is free. It's a time load testing website into which you'll enter your own blog URL and see how it performs. The screenshot above shows you the summary view of my consulting website's results. After the summary you'll find all kinds of goodies, like each script that loads and how much time each takes. This is particularly useful to help you trim the fat in all those extra plugins, widgets, badges and other stuff that ends up accumulating in your blog without having real purpose.

The other option and should be used in combination with the first one, only applies to WordPress websites. Using the P3 Profiler plugin, you can actually run a detailed load test from your WordPress dashboard.

The P3 Profiler plugin is free and it works great. It will tell you which plugins and what parts of your website are taking the most resources and longest time. With that information you can identify the plugins, scripts, widgets, badges or images that need to be optimized or removed altogether.

Google also has a performance testing tool but that is a topic for another day. If you're starting your blog out, you probably don't need to do this. But if you like keeping an eye on these numbers you could take a baseline of how fast your blog loads before you do anything with it, and repeat the test each month or so and see how your blog changes overtime.

The post Two easy ways to check your website’s loading time appeared first on Digital Marketing Through Content & Influence.

You know how to deploy jars and wars on tomcact, you can hack .htaccess for apache and even speed up performance with nginx or lighttpd, but guess who doesn't know or care about any of this? Your customer. They care about their bottom line and whether you can do the work or not.

Customers just want you to fix their stuff, they need you to get in and fix or update or change things around. To them these kind of changes are always "quick" and "should be really easy for you". But before you commit to any hard numbers on your quote or proposal, be sure you understand exactly what technologies you're working with.

This is where wappalyzer comes in. Wappalyzer identifies software running on websites. It runs as a Firefox addon, and it does one thing and it does it well. Wappalyzer tells you all the different technologies running on a website. This is crucial for webmasters, webdesigners and even systems administrators that run their own businesses because it allows them to identify the type of work and skills that will be required to complete the job.

A really skilled systems administrator or webservice company might be able to obscure some of these technologies (and you should for security), but most people don't, and even if they knew how, they won't. So you can run this addon on against a website and find out what's going on before you commit to the work or come up with your estimate.

In addition to the webserver, it also finds the type of traffic analytics software being used, supporting javascript technologies, additional sharing functionality and much more. It identifies: CMS, Widgets, Database managers, frameworks, caching tools, even the operating system!

It's easy to install, just find Wappalyzer on the Firefox addon directory and install it, reboot and then Wappalyzer just works.

Take a look at these examples of websites and what technologies they're using. The red dots indicate the system being used.

The one thing that it doesn't do is find the hosting company. But there's another tool for that, that will be another topic soon.

The post Wappalyzer Helps Webmasters Identify Software appeared first on Digital Marketing Through Content & Influence.

Screenshot Pimp has a few more features than the previous two Firefox addons I reviewed. Just like other addons, this is installed through the Firefox addon facility and after a quick restart it will be available to use. While previous utilities I've reviewed have an icon to activate them, this one actually uses a full bar. The bar sits below your address bar and it provides with quick access to the utility's functions.

Screenshot Pimp Preferences Screenshot Pimp Saves video Screenshot Pimp Toolbar

To the addon's fault, there are lots of options. Most of the options are unnecessary I think and some of the features provided by the addon are really not supposed to be there if you ask me, for example, the addon brought with it a search box and I really wasn't looking for another search box in my browser bar. With that said, there is one cool feature that might attract you to this addon. One of the options the addon provides is the ability to capture a video from a video website like Youtube, or Viddler, now that's Pimp!

Besides the feature to capture a video, this addon provides the necessary tools to capture part of a website, the whole viewable area or the entire page, even if you can't fit it all on your screen. Very handy, very useful with a few extra added features that help Screenshot Pimp might be the right app for you.

The post Screenshot Pimp by Konverts, screenshot addon for Firefox appeared first on Digital Marketing Through Content & Influence.

I've been working with several people, helping them with their websites. I have also been doing this as my part of my day job for years. I also provide regular technology services to select clients. Recently I noticed that there aren't many services available out there that do what I do for individuals or small businesses. In fact there are some companies that do this but they charge an arm an a leg and don't really provide the world class service I put into my work. So I thought I'd change that a little bit.

I am now offering this service for free.  You'll still have to buy your own hosting. You must buy a hosting plan from one of the service providers I recommend, AND you must purchase it by using the link or code on that page.  You also must buy your own domain; I recommend Godaddy. These two items are the only things that will cost you any money. To be sure, Buy Hosting  from one of my recommended vendors, and a domain from Godaddy.

If you're ready to have your own WordPress website, here is your chance to get it all done. I am ready to help you. Check out all that you get, and its free:

• WordPress installed and configured with standard settings, based on best practices.
• 6 Essential plugins installed & configured.
• Your choice of Up to 10 additional plugins, installed and configured with standard settings. Choose from a list (being finalized).
• 1 Month of maintenance support & administration. For 1 month, I will keep your plugins and wordpress up to date, as well as moderate your comments (optional) and make sure all administrative points of your website are taken care off. After 1 month, you can take over or hire my services or negotiate a deal.
• 3 - 5 Static pages (About, Contact, Mission, and two additional of your choice) All configured for SEO.
• FREE Standard SEO for 3 - 6 pages. (You must complete the SEO form I have over here: http://j.mp/fuSYUY (google form).
• Free Statistics Report in email every day. Using Google Analytics
• Twitter and Facebook Buttons.
• Caching configuration to improve the speed of your website.
• Standard Social Media configuration.
• Nightly WordPress Backups.
• Standard Security Configuration.
• Pick from about 30 different themes, or virtually any with good ratings and good feedback.
• Help you with a Premium Theme you already purchased.

Who Needs this?

• Anyone that wants to have full control over their website but isn't ready to commit to a very expensive solution or big investment.
• Someone that wants to have a website that they can build out themselves. This is ideal for do-it-yourselfers that just need a little help
• Bloggers that want to move to their own hosted WordPress site and want someone to run their website. usually moving from Blogspot, or WordPress.com or Tumblr, or other blogging platforms
• Bloggers that want to have their blog all setup, optimized and configured in a few months and then take control over it.
• Small Businesses that need an easy to use and publish CMS system, not to mention FREE.
• If you want to have your own website, where you control the hosting and every aspect of it, this is for you.
• This is especially attractive for web designers that don't want to bother with installation and maintenance issues.
• Anyone that is a do-it-yourself kind of person but just needs to get started.

Why Should you get this over one of your paid plans or someone else's services?

1. You should not get this instead of one of my paid plans. If you have considered my paid plans for the features included and you want those features on your website, you should not get this plan. I do not do custom code or custom design or custom development for free.
2. You should get this if you're interested in setting up a professional blog without any investment at first.
3. You should get this if you're in a low budget situation.
4. You should get this if you like tinkering with your theme, plugins, and settings and like the do-it-yourself approach.
5. You've got nothing to loose. When you decide to move to self hosted  --some people call it wordpress.org, you will need to buy your own hosting. The offer I'm giving you costs you nothing more than your hosting fee and your domain; if you look hard enough, you can even find free domains out there --Just make sure they let you change DNS records and be sure to ask before you buy.
6. Generally, your website will be ready for you to customize in 48 - 96 hours depending on my workload. I treat each one of these in a first come, first served basis. If you're interested in priority services, please check out my services info.
7. And because people like my work. See Testimonials for Oscarstech and Oscar Gonzalez.

Really, what's the catch? This usually costs HUNDREDS and sometimes Thousands of dollars.

Of course there's a catch, but I think it is reasonable. If you think you have a better offer or details, please present them to me.

Question:You yourself sell websites at thousands of dollars. WTF?
Answer: Some websites require a high level of customization, or integration, beyond normal, or the delivery of the website  includes personal training, or some of the services I offer. Please read the Free WordPress Installation FAQ for more info, and  the disclaimer page. And please don't be afraid to Ask me via Email or @notagrouch on Twitter.

All of the services I offer above are free, please note that some of the services are only for a limited amount of time. Other services are limited and customization is limited with the free options. When some of the free services expires I will ask you about it and you can provide feedback. Based on your feedback then you can choose to renew an agreement by buying a maintenance and hosting plan. If you want to negotiate an exchange of services or links or collaborative effort, please, I'm all ears. If you have a great idea and need help getting started, we can also talk about a free arrangement in exchange for interests in your project --often called Revenue Share. Just let me know what's on your mind.

In fact if you want to get that, simply fill out the free SEO interest form form listed above and here: Free SEO Evaluation (Only serious inquiries please).

The post Free WordPress Installation and configuration appeared first on Digital Marketing Through Content & Influence.

Similar to the last screenshot utility we talked about, Screengrab, this one displays its activation button also on the bottom right corner of your browser. The activation of the screen capture function is a little bit different and you should probably take a look at the preferences options to set it just the way you want it to work. If you click on it, you'll activate it as the default settings are configured, but if you right click on it, you can choose alternate settings just for the next shot.

Screen Capture Elite by default is set to take a screen shot of a selection, but like I mentioned, you can change the settings by going into the Firefox Addon preferences. As you can see from the screenshot above, this addon has more options than the previous one I reviewed. Some of them are just preferences that let you configure things like setting the location of the button to take a screen capture. Other settings are a little more functional, like setting a default save location for your screen shots. This is great if you want to team this utility up with Dropbox.

You can download Screen Capture Elite for Firefox at the Firefox Addons library.

The post Screen Capture Elite by Grizzly Ape, addon for Firefox appeared first on Digital Marketing Through Content & Influence.

Install as usual, then after installation you'll have a new icon on the bottom right hand corner of your Firefox browser. From there, you can choose to do a screen cap of just a section, or the entire site, or just certain viewable space on the web page.

In the settings of the addon you can pick other preferences like taking screenshots in jpg instead of png and whether you want the timestamp as part of the file name.

Simple, useful and very straight forward. I often use this instead of Skitch because it allows me to save a full website into an image with JPG or PNG option. This is very handy when I have to show the full view of a webpage to a client. I often use this also for initial consultations with a client in order to annotate changes that need to be made to their website. In the case that we're doing a critique or consultation, I take a full screenshot with screengrab, then I open the image with Skitch to annotate.

Go and get Screengrab for Firefox right here.

The post Screengrab by Andy M, an addon for Firefox appeared first on Digital Marketing Through Content & Influence.

So... Last year I I conducted a contest for a client, the contest was a design contest. The purpose was to come up with a logo. After sometime, we came up with the guidelines and requirements for the company logo. Shortly thereafter we started up the contest using a website called LogoMyWay. The service is pretty straight forward. You pick an amount as the prize, the website takes a percentage and you select the parameters of the contest. As the contest runs, designers all over the world are able to read your requirements, see any collateral you chose to share with them, and even ask questions. A designer can participate on any contest he or she wants and there are usually anywhere from 90 to 150 design contests going on at one time. To me it sounded like a great idea, and it turned out that I was right. My client received over 1000 logo submissions. From those I would say about 500 were really original, while the rest split somewhat unevenly between bad, copycats, or revisions based on feedback.

We ran that contest for 14 days and that was an excellent amount of time. It allowed us to give the designers constant feedback and it provided us with 1117 total submissions and a good 15 - 20 great logos, . After the contest was over, we received the vector files from the designer. We thanked all the participants and ranked all the remaining logos into the top 10 spots. We were able to get a lot of different options, all of them based on our requirements. The requirements can really be anything you want to portray on your logo. You could include keywords, objects, symbolism, special fonts, desired style. Express your business values, your target audience, your ideology or anything you would like to convey in your logo. Make the contest private if you would prefer.

Based on the success of that contest, I decided to run my own contest when it came time to get a new logo. As you might know, I have had a job for the past 10 years, and I've been an IT Consultant, and Systems Administrator for hire for about half that time. Recently, after quitting everything I had that was great I decided to pursue The dream, my own business, so I decided to officially launch my consulting services business. The name is pretty straight forward, Oscarstech. The logo had to contain that in the design and also have a symbol or bug as some call it that is unique and can symbolize the different aspects of my business. Or it an just be unique and eye catching.

After you're finished reading this post, feel free to rank the existing logos for my contest

Turns out that the contest has been a success so far, I ran a 5 day contest this time. In fact it ended today (Wednesday). One small problem is that a bunch of people submitted last minute designs, making it difficult to pick a winner. I asked the guys at LogoMyWay if they could extend the contest. They have obliged and I have until Monday to receive submissions and to give some feedback to the existing designers so they can make adjustments if they like. Something that is actually new this time around with the second contest I run is that they have a feature where you can share the contest out to friends and family or whoever you want so they can rate the submissions.

So far I like a lot of the logos I've seen but I'm glad I have some more time to make a decision.

My contest is going now until Monday. Then I have 14 days to pick a winner, but I think I'll pick the winner within a few days. If you want to see it, go visit and rate the contest here.

The post Logo my Logo appeared first on Digital Marketing Through Content & Influence.

I wanted to take a quick minute to update you on what I've been up to. Last December I quit everything that was great with my career in order to pursue my dreams of running my own business. As some of you know, I've been running my own sidebusiness since early 2004. I focus on small businesses and individuals and help them surpass different technical challenges they face in their everyday operations. That's really a fancy way of saying that I'm an IT and Technology consultant.

It's been a bumpy ride, to say the least but I am determined to persevere. After December, I accepted a long term contract with oen of my clients but that fell apart shortly thereafter, for reasons I can't go into. I then found myself out of a job and without the biggest client at the time. Fear set in and instead of panicking and freaking out I decided to embrace this challenge and take time to enhance my support offerings and properly start running my business. That in itself is a monumental undertaking and one that presents many challenges. I thought I was prepared for these challenges but Boy... was I wrong.

The road is difficult and from time to time, I think about giving it all up and going back to the 8-5 thing... but then I'm reminded of my goals and dreams. And so I keep at it. Slowly I've started working with new clients and we're getting things done. Here is the very latest website that I worked on and I thought I'd show you:

The website is for an artist named Sam Carter. He's a talented painter and he focuses on Pop Surrealism. This was a fun project to work on because it is so unique in its content. Here is the website now. It's got a few shortcomings but we are working on them. For example, we have a bit of a repetitive content going on from the store and the gallery. The highlights on the site are these:

• Custom Design & graphics.
• A ready to buy gallery where visitors can buy Sam's art.
• Custom human readable sitemap
• Contact forms & social media integration.
• Automatic updates for visitors via RSS and/or email

The theme we used was the absolutely kick-ass AND free, AND GPL'd Suffusion by Sayontan. Shhh, don't tell anyone, but most of the features I told you about above are actually standard features of the really cool theme Suffusion. I can't say it enough. This theme kicks ass and you should check it out. We also have a number of plugins running but we tried to keep them to a minimum. We are using:
Contact Form 7, wp-e-commerce and Display widgets, along with other plugins that I consider standard plugins I use like PHP-exec, Akismet, Google analytics & WordPress.com stats.

Check out the site and let me know what you think. I'd love to get feedback on it.

http://samcarterart.com

I'm also working on a couple of cool projects in collaboration with some Twitter friends and local businesses. I'll be able to show you more later next week. In the meantime, if there's anything I can help you with, please contact me.

The post My latest endeavors appeared first on Digital Marketing Through Content & Influence.

Tumblr - http://webgineer.tumblr.com (Subscribe)
Twitter - http://twitter.com/webgineer (Follow)

Please Follow me and subscribe. It's all going to be really geeky stuff. Mainly information for technology professionals and information workers. The main topics you can expect over there are Linux Related Tips and Tricks, Apps and Webapps, stuff related to running your own website, and stuff like that.

The post Another Alter Ego appeared first on Digital Marketing Through Content & Influence.