Sept.3 Chat “Speed Up Your WordPress Site”

  1. What is a potential problem with plugins? Keep WordPress plugins to a minimum. Keep the ones your really need. Get rid of the rest. A lot of plugins adds “weight” to the blog and slows website speed. Why do you think it is a problem? Plugins have to be loaded so too many, will slow down the site.
  2. What plugins are recommended and what do they do? W3 Total Cache. Use a “caching” plugin. Content is served from the cache without being generated over and over again.
  3. What does the author recommend when it comes to images? Optimize! 8-bit PNG, makes images smaller and faster load time. Are you doing that already? No
  4. What other recommendations were made? Deliver content through “content delivery network”. You can get it free from your hosting provider or you can set one up yourself using Amazon Cloud Front or W3 Total Cache
  5. How can you test your site’s speed? Use Pingdom
  6. 6.    Find a related resource that looks awesome for each of the following:

Aug 27 Chat Chris Coyler /Epic Awesome

  1. What resources did Chris use that you would like to try when trying to perfect your sites in the future? Explain what the resource does or how it’s beneficial. Speedloader. Knowing how long a site will take to load is really helpful because it can tell you if you need to pair down images or effects.
  2. Was there any advice that you struck you as particularly useful or helpful? Viewport detections What was it and why? Making each section one browser window large makes keeps everything on the screen and looks aesthetically better. TYPOGRAPHY. Too many fonts is overwhelming. Follow the rule of thumb, no more than 3.
  3. Was there any advice that you didn’t exactly agree with? What was it and why? Smoother transitions rather than abrupt between sections. Yes and know. A lot of times the smooth transition bothers my eyes.
  4. What is a Kickstarter? (Hint: Google it.) I love kickstarter. It’s a crowdsourcing site for any kind of project. You make your pitch and ask for how much you need for your project and interested people will fund it.
  5. Look up a couple of terms that you don’t know much about and list them and a little of what you found out about them. Autoprefixer: parses CSS files and adds vendor prefixes to CSS rules using the Can I Usedatabase to determine which prefixes are needed. http://css-tricks.com/autoprefixer/
  6. List any links related to the article that you could share at the chat and that you might want to refer to later. Make this blog post something useful for you and your readers: http://www.kickstarter.com/help/school

Create a Simple Photo Gallery in WordPress without a Plugin

This is a simple photo gallery
This is a simple photo gallery

The gallery feature in WordPress, allows you to add photos and multiple photo galleries to any WordPress page or post. Best of all, you don’t need a plugin to do it.

There are several ways to do this but the easiest option is to add the following syntax to a text area:

Screen Shot 2013-05-19 at 8.27.04 PM

add this line of code in a text window. Once added, click the icon to edit the gallery then add the images and save.

Additional options include:

Specifying columns:
Screen Shot 2013-05-19 at 8.17.52 PM

 

Specifying size: Values include “thumbnail”, “medium”, “large”, “full”
Screen Shot 2013-05-19 at 8.13.39 PM

 

Here’s an example of the full syntax:

gallery shortcode

 

 

Learn more about Gallery Shortcodes at WordPress.org

Be Responsive: The Importance of Responsive Web Design

Responsive websites look good good on a smart phones as well as a large 27-inch monitor.
Responsive websites look good good at any size.

Responsive design is “the practice of creating digital experiences that adapt to seamlessly deliver content suited to the device context of the user’s operating system, screen size, or orientation.” According to International Data Corporation (IDC) by 2015, there will be more users accessing the internet via mobile devices than through PCs. The implications of this trend are significant for web designers. As the use of mobile device continues to grow, designers must present their sites in a way that looks good on a smart phones as well as a large 27-inch monitor.

Responsive design has transitioned from “nice-to-have” to a “must-have”. As quickly as mobile devices are evolving, it would simply not be feasible to design custom sites exclusively for each individual device as they emerge as well as maintain older versions. A responsive website can adapt to new screen resolutions as well as new devices, “one site, one content base, and one code-base.” (Stakem, Roux, Holland). There is somewhat of a misconception that using a fluid grid will replicate the site at every resolution the exact same way. In an ideal world, this would be possible but in reality it doesn’t work this way. In the article, “What Responsive Design is Not,” Jeff Orloff says, “To fit everything you see on that nice big monitor onto the screen of a smartphone, something’s got to give – and that’s content. When a site is displayed on a smaller screen there are times when certain content is hidden so that things fit.” In other words, adjustments have to be made, which is where CSS comes in. As Orloff puts it, CSS is the ultimate time saver. “One quick change to a color code and thousands of pages could change in how they look.” To ensure quality and consistency, however, sites should be tested for different devices.

Pete Cashmore of Mashable, recently wrote about Mashable’s makeover into a responsive website. In the article entitled, “Why 2013 is The Year Of Responsive Web Design,” he says, “Media companies like ours are seeing a major shift in the consumption habits of their audiences. Those organizations that don’t act may find themselves behind the curve…Given the rapid adoption of tablets and smartphones — and the fact that users currently seem to prefer reading their news on the mobile web rather than in apps — I think it’s inevitable that 2013 will be the year that responsive design takes off. For publishers, it offers the simplest way to reach readers across multiple devices. For users, it ensures a great experience on every screen.”

 

5 Great Resources for Creating Responsive Design

If you’re new to responsive design here are some helpful resources to help you get started

 

Beginner’s Guide to Responsive Web Design

Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice.

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

 

This is Responsive

Patternsresources and news for creating responsive web experiences.

http://bradfrost.github.com/this-is-responsive/

 

10 basic tips about responsive design

www.splio.com/responsive/

 

Ui Design Guidelines For Responsive Design

Some UI guidelines and tips to consider when designing a website to make it cross-device friendly and responsive.

http://tympanus.net/codrops/2013/01/21/ui-design-guidelines-for-responsive-design/

 

50 fantastic tools for responsive web design

To get started with building a responsive site, having a strong toolkit can make a world of difference. Here Denise Jacobs and Peter Gasston round up 50 great tools to aid the process of making your sites responsive

http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design

 

Work Cited:

Cashmore, Pete. “Mashable.” Mashable. Mashable, Inc., 11 Dec. 2012. Web. 12 Mar. 2013.< http://mashable.com/2012/12/11/responsive-web-design/>

International Data Corporation. IDC: More Mobile Internet Users Than Wireline Users in the U.S. by 2015. IDC: More Mobile Internet Users Than Wireline Users in the U.S. by 2015IDC- Article Not Found. IDC Corporate USA, 12 Sept. 2011. Web. 12 Mar. 2013. http://www.idc.com/getdoc.jsp?containerId=prUS23028711#.UT1bFFpATYg

Orloff, Jeff. “What Responsive Design Is Not.” Webdesigner Depot RSS. Webdesigner Depot, 4 Jan. 2013. Web. 12 Mar. 2013. <http://www.webdesignerdepot.com/2013/01/what-responsive-design-is-not/>

Stakem, Kevin, Lindy Roux, and Matt Holland. “A Primer on Responsive Design : From Content to Development.” A Primer on Responsive Design. UX Magazine, 12 June 2012. Web. 10 Mar. 2013.< http://uxmag.com/articles/a-primer-on-responsive-design>

förnya spa [renew] yourself.

Screen Shot 2013-02-05 at 11.53.28 PM
screen shot of home page

 

Förnya is the swedish word for renew. I chose it because reflects what a person wants to do when they go to the spa and how they feel afterwards. Using a foreign word in the name gives the salon a European upscale feel.

Situation Analysis:

For my research, I looked for day spas in New York, Chicago, Oklahoma City and Dallas. I looked at the sites for spas that received high reviews and recommendation. I was extremely surprised to find that the majority of the websites for these existing upscale day spas were poorly designed and do not accurately reflect the image or reputation of said spas.

The primary goal is too create a site that reflects the kind of experience a client would have at the spa. This will be achieved through supporting images and marketing copy.

Target Audience:

Förnya is an upscale day spa, which caters primarily to mid to upper income health conscious women who want to rejuvenate and maintain their skin through facials and full-body skin treatments.

FOCUS STATEMENT

The purpose of the website is to promote förnya as a premier day spa that specializes in all-natural facials and full-body skin treatments. The site will increase traffic to the spa through online booking and special promotions such as “New Client Tuesdays.”

MOOD BOARD

Images: I looked at images of existing upscale spas and salons. They all have a similar look and feel; an earth tone neutral color palette, clean lines, spacious and serene.

Color swatches: I collected images of the beach, tropical forests, and bamboo for a richer color palette that includes greens and blues.

Typefaces:. Clean and modern. San serif or slab serif. Century Gothic, Museo Slab, Caviar Dreams

http://pinterest.com/designqueen928/pamper-yourself/

 

LOOK AND FEEL CONCEPT

Clean, blissful, calm, relaxing, refreshing, serenity now.

I went with a blue, green and sand color palette inspired by an image of a beach. Blues and greens are calming colors, which, reflect the atmosphere a client would experience at the spa. The home page is clean and not copy heavy to reflect the idea of serenity and relaxation.

The wide screen format of the image on the home page would actually be a slide show of several images that would change with a fade in/out transition.  The images would be of clients receiving different treatments and enjoying their experience at the spa.

WIRE FRAME

förnya_spa_wireframe

 

Going Back for More

designqueen

 

When I told people I was going back to school 2 years ago, the responses where almost unanimous, “wasn’t the last time enough?” You see I had just completed my MFA in Graphic Design. I knew then, in my heart of hearts, I wasn’t done with school just yet. My hiatus lasted a mere year and a half. During that break, I strongly considered going for a Doctorate degree but never quite found anything related to graphic design I wanted to pursue. Meanwhile, a series of events, which included advancement a with my then employer and a website that had given me more headaches than I care to document, occured that led me to this program. I started this program 2 years ago but had to take a break due to lack of time. Now another series of events has given me the opportunity to start up again and I couldn’t be more thrilled.

A little history…

I have been dabbling with web design on and off for about 12 years.  I’ve spent most of that time trying to learn Dreamweaver. I have owned every version of it! While this isn’t the best approach to web design, I have actually learned a lot by studying the code.

I have taken a few “quicky” courses here and there through out the years. Through these courses and by studying the codes of sites I come across that I like, I have learned enough HTML and CSS to make me dangerous. My limited knowledge, however, sometimes gets me in trouble when a site I am working on goes beyond my capabilities. For the most part, I can always find an example of what I am trying to achieve to get me out of trouble.

To answer the question, “What about this course most excites you?”, I would have to say everything! I am a sponge ready to absorb all of this new information. I know it will not be easy particularly because I have gotten used to code being written for me and me just going back to tweak it. That being said, I am looking forward to learning how to develop full sites without the help of a WYSWIG program. Since, I’m mostly right-brained, writing in code is going to be the biggest challenge but I am willing and ready to take that challenge and see where it lands me!

Related posts:

WYSIWYG vs Hand-Coding Debate 

WYSIWYG vs. HTML Coding