Category Archives: Web

Jan. 12 & 14 Chat: Turn Your Blog into a Client Magnet

These days blogs are often utilized as fully functional websites. WordPress is an excellent example of a CMS platform that was initially created to be used as a blog but has since become one of the most widely used open source CMS platforms for creating dynamic websites worldwide.

What are your top 3 takeaway ideas from this article?

Your blog is a window to you so it should look professional. Not only is it important to have quality content on your blog in order to attract prospective clients, it is also essential that the blog be well designed and professional.

Minimize ads. Keep ads to a minimum or avoid them all together.

Keep navigation simple and organized. Limit the number of sidebars to just one. Keep the navigation simple as to avoid clutter.

Ghost Horses is a great example of a WordPress portfolio site.

Screen Shot 2014-01-17 at 12.52.53 AMScreen Shot 2014-01-17 at 12.53.18 AM

 

Is there anything you learned that makes you want to change something on your own site when you get time? I didn’t learn anything that I didn’t already know. As far as my personal site, it is not a blog but rather coded myself. I might consider adding a “Hire Me” page or verbiage in the footer.

Like this:

Screen Shot 2014-01-20 at 6.42.31 PM

Freelancing

Based on what you read and what you already know, when do you think you will begin freelancing on the side? I’ve been freelancing for 10 years

What is a good time for you to transition to freelancing full time? If you are not planning to freelance full time, then feel free to discuss this question from a different angle, such as discussing how freelancing would or wouldn’t fit into your web career plans. Ten years ago when I started RearViewImage Design with my sister, we hoped to one day have enough clients to be both quit our jobs and dedicate ourselves to our business full-time. We offered graphic design, marketing and web design services. We did the majority of the things outlined

If you had to come up with an elevator pitch today, what could it be? Award-winning creative professional with 14 years in-house and agency experience. Have worked with well-known national retailers and brands to develop packaging, marketing collateral and POP for product launches. Proven expertise in brand development and sustainable marketing.

What’s the most promising time management/project management tool that the article lists that you might try using? Currently, I use quickbooks. I’d like to try tickspot.com, simplybill.com and slimtimer.com

How will you price your work? Pricing work is a beast. For me it depends. For web projects, I used to charge $400 a page. Charging by the page can be a bit like charging by the hour. My preference is to evaluate the job as whole. Find out what the client wants and depending how large the site is and whether it is static or dynamic, charge by the project.

Never Heard of It

The article “Never Heard of It” by Lyza Danger Gardner,  mentions some terms which I’ve heard of but couldn’t actually explain and others that I’m more familiar with.

  • SASS- is a preprocessor, which allows you to use features that don’t exist in CSS yet. It offers more functionality to CSS such as variables, nesting, partials, import, mixins, extend/inheritance, operators (http://sass-lang.com/). Before you can use SASS, you have to set it up on your project.
  • Webkit- is an open source web browser engine, which allows web browsers to render web pages.” It powers Safari & Google Chrome to name a few. (http://www.webkit.org/)
  • RSS feeds- are parts of a website, blog, content that are made available through automatic syndication which then appears as an item in an RSS reader (news aggregator). It stands for “Really Simple Syndication”. It enables publishers to syndicate data automatically. Users subscribe to a feed. The reader checks the users feed on a regularly and updates itself.  (http://searchenginewatch.com/article/2065614/Making-An-RSS-Feed)
  • Feedly- is a news aggregator app for web browsers and mobile devices. It works similar to an RSS feed. It compiles news from online new sources all across the web. Users can customize and share with each other.

Of all these I will mostly likely try SASS because it does make CSS much more functional. I have used WebKit or at least the syntax in CSS but I don’t think that I would use it to build my own search engine. I signed up for Feedly. I think that it will be helpful with at least keeping me up-to-date with the latest trends. (At least that is my hope).

Web/Design Development is somewhat of a moving target. Just when you think you know something or have mastered something, five new “must know try” things are launched. The best way to stay on top of the latest and greatest is either to be involved with it or to stay connected with the industry. My approach will be to remain active with industry forums and groups, signup for a Feedly account and specify areas of the industry that interest me, keep up with Mashable and maintain both an account on Lynda.com and Treehouse. It’s a lot to do and keep up with but this industry is evolving exponentially and if you don’t make an effort to keep up with the “pace group” or at least have them in your line of sight, you will be left behind very quickly.

To get the ball rolling and add one more thing to my information overload, I set up RSS Feed Reader on Google Chrome since that is my browser of choice. The good thing about it, is that it collects the links, articles topics based on things I’m interested in. I don’t have to search or save anything because it does it for me.

Keeping up with the John & Jane Q. Techie

Making the case for keeping up with the industry in not difficult. You can find a plethora of articles on the subject. Here are some links to a few:

Here is a good video presentation I found called “How To Stay Up To Date With Web Technology

 

Here’s a recent article called “Why Web Designers Must Keep up With Technology

“The web has evolved long past where the languages on offer were Perl or PHP. Granted, it’s not easy to start learning, but the reward makes it worth it. We’re in a booming industry where more tools are coming out than most people can keep up with, but those who do keep up get the best jobs and clients.” (Inglis)

Intro to Creating a WordPress Plugin

What do the plugins allow users to do?

Plugins are scripts written in PHP that alter a website and allow additional functionality on the backend. Plugins extend further than functions that are built into a theme (functions.php). Functions stop working when you change a theme whereas you can use the same plugin with any theme.

 

Why might you want to use this tutorial?

I copy the code in this tutorial to test the plugin created but I can also use it as a “starter” and see what happens when different aspects of the code are changed. Since I’m very much still a novice at PHP and WordPress, I learn most when I dissect something that I know works in order to understand how it functions.

 

Here are a couple of  tutorials I found to create an easy WP Plugin:

http://wpninjas.com/how-to-create-a-simple-wordpress-plugin/

http://wpmu.org/how-to-create-your-very-first-wordpress-plugin/

 

Backgrounds

Chat Oct. 29 — Backgrounds

What are 5 rules-of-thumb or a-ha moments that you found in the first article? No real surprises in the article. The 5 things mentioned are known design do’s and don’ts

  1. The content should have purpose. As with any element of design, looking “cool” or “pretty” is not enough
  2. The background should fall in line with your brand. This is a given. This goes hand-in-hand with having a purpose. If it doesn’t align or make sense for the brand, don’t include it
  3. It should allow for placement of text that is easy to read. (This applies to color, contrast and size.) This is a given. Readability is key. If the background interferes with the text content, change it.
  4. The background theme should be fairly consistent throughout the site. (You don’t want visitors to think they have stumbled on to another page when clicking through.) This makes a lot of sense. It doesn’t have to be exactly the same but should have consistency.
  5. Backgrounds should download quickly and not cause the site to slow down or lag. I do know you should optimize files so that they load quickly but I never thought about downloading

 Why is the second article important?

The second article, “Creating Responsive Websites with Photo Backgrounds,” talks about the current trend in web design of using photographs as full backgrounds and goes into some techniques to make those image backgrounds responsive including a video background which is pretty nifty.

Why not just throw a large background image in the code and be done with it? Throwing a large background image in the code without adding the appropriate code/media queries will not make the image responsive. The success or failure, I believe websites today depend a lot of how that site adapts to different media. With so much of the population on smartphones, a site that is hard to navigate at the smallest screen stands to lose users. The fact is, people are navigating the web more from their phones more than they are in front of a computer screen.

 

Here’s a helpful link:

Backgrounds In Web Design: Examples And Best Practices

http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

This article shows some best practices and goes into detail about backgrounds, in particular textures.

 

Best thing I learned during the chat was regarding some tools available to create textured backgrounds using CSS.

It shows you how powerful CSS can be if you know how to use. I found this article that I thought would be helpful. These are 10 resources for creating background patterns and textures.

http://speckyboy.com/2008/01/19/top-10-free-resources-for-background-patterns-and-textures-for-web-designers/

 

CSS Demos from CSS Tricks

  • What are four demos that you would like to use on an upcoming project?
    • Responsive Data Tables
    • Rounded Corners
    • Infinite Slide Show
    • Breadcrumbs with CSS Triangles
  • How would you use each?
    • Responsive Data Tables-perfect for spread sheet information like statistics or financial info
    • Rounded Corners-is a nice design element and make page look interesting
    • Infinite Slide Show- beats a static slide show and gives the page some animation. I’m a fan of slideshows so it would be interesting although I would want a feature to make it stop
    • Breadcrumbs with CSS Triangles-can make a nav bar look more interesting than the normal rectangle.
  • What benefits would your site gain from each? The use of any or all of these demos, would make my site appear more interesting by adding some animation and as non-typical design elements without being over-the-top

Here’s a helpful link for an “Infinite All-CSS Scrolling Slideshow”. It explains how to create it step-by-step
http://css-tricks.com/infinite-all-css-scrolling-slideshow/

 

CSS Demos from CSS Tricks

  • What are four demos that you would like to use on an upcoming project?
    • Responsive Data Tables
    • Rounded Corners
    • Infinite Slide Show
    • Breadcrumbs with CSS Triangles 
  • How would you use each?
    • Responsive Data Tables-perfect for spread sheet information like statistics or financial info
    • Rounded Corners-is a nice design element and make page look interesting
    • Infinite Slide Show- beats a static slide show and gives the page some animation. I’m a fan of slideshows so it would be interesting although I would want a feature to make it stop
    • Breadcrumbs with CSS Triangles-can make a nav bar look more interesting than the normal rectangle.
  • What benefits would your site gain from each? The use of any or all of these demos, would make my site appear more interesting by adding some animation and as non-typical design elements without being over-the-top

Some additional information on building a Infinite Scrolling slide show:

Infinite All-CSS Scrolling Slideshow http://css-tricks.com/infinite-all-css-scrolling-slideshow/

Wireframing

  1. What benefits can you gain by completing a wireframe? I don’t working on a project anymore before starting a site. It’s a roadmap
  2. What are the cool things about Wirefy? It allows you to see the structure of the page
  3. Do you think working coded wireframes are better for your workflow? Or sketches? Why? I do all three.
  4. What are some cool things from the assigned articles that you’d like to try using for your next project?

Here are a few articles and resources on wire framing that I found very interesting:

How to read a wireframe 
http://blog.fuzzymath.com/2011/07/12/how-to-read-a-wireframe/

The Important of Wiredframes in Web Design & 9 Tools to Create Wirerframes

http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/

WordPress Security

What kinds of attacks are there? (malware)

Injections & Maldors// majority are automated

What mistakes are people making that make their sites vulnerable?

  • Cheap sites, bad passwords, 3rd party plugins

What are 3 things you WILL do now?

Backup, strengthen my password, make sure webhosting is secure.

What are 3 things you won’t do now, but maybe later?

Explain why.

I couldn’t find 3 things not to try.

 

When I read the chat article and read that you need to be careful with plugins, I wondered if there is anyway of running plugins through a filter to make sure they are ok to use. If I find any, I will be sure to update this post.

In the past, I’ve gotten a lot of spam comments but I ended up adding a WP plugin for added security and the spam emails stopped. There are some good security plugins available. It’s a matter of looking at the reviews, trying them out and seeing which one(s) work best for you.

 

Here are a few resources I found that were interesting and helpful.

Website security: 10 tips to protect your site from hackers

http://www.creativebloq.com/web-design/website-security-tips-protect-your-site-7122853

 

How to Make Your Website Hacker-Proof

http://www.entrepreneur.com/article/223967