Megan Erin Miller's Blog Posts

Choosing great images for your website can be tricky business. In this new series, I'll explain some things to consider when you're selecting and editing images for use on your website. Today, I'm going share some tips for choosing a great image.

Choosing a great image

Consider context

Where will the image be shown?

Ask yourself what page(s) this image will be used on, and for specifically what purpose. The more you can do to understand the role the image will play to your audience, the better. For example, if your goal on a page is to get students excited about an opportunity, you might consider a photo of students who are excited about the opportunity (OK, is that too obvious?).

Does your CMS automatically crop the image a certain way?

If you are using a Content Management System (CMS) like Wordpress or Drupal, it is very likely that the page you are going to put your image on will automatically crop and scale the image for you. Check with your webmaster or website documentation to better understand if this is happening (or just test it out by making a test page and uploading an image to it). You can also look at an existing page and use Firebug or Web Developer Tools to inspect the image and see what size it is on the page. In knowing the final dimensions or whether your CMS crops the image a certain way, you can better prepare your image (by making it the correct ratio or dimensions ahead of time in Photoshop). This most often impacts image choice if you know that you need a portrait vs. a landscape ratio photo.

Is the image going to be used on one page, or used across multiple pages?

Often in content management systems, your content will get reused across your website in multiple ways. For example, a news story might show up on the homepage with a thumbnail of the image, and also show up as a featured news item in the news section with a larger version of the image. Consider all these contexts as you are choosing your image, and make sure that the image you choose can work well in all contexts.

Provide interest

Is it focused on the right thing?

An image with fuzzy focus, or focus set on the wrong subject can make your website look unprofessional. Make sure to look carefully at your images and choose one where the focus is clear and on the correct subject. When choosing images of people (profile photos), the most important thing to have focus is the eyes. We as humans are very attentive to eyes, as they are a big part of non-verbal communication. Having clarity of focus on the eyes in a profile photo will make sure your photo looks professional.

Is it too zoomed in or out?

Level of zoom, and careful consideration of what the subject of the photo actually is, is important. For example, you could have a zoomed out photo of a crowd at an event, which you may think gives off a fun energetic vibe, but in reality, crowd photos tend to fall flat on the web without a specific point of interest. You might do better cropping in to capture real emotions on people's faces in the crowd, or choose a photo with a clear subject (a single or a couple of people is a good bet). Zooming in on the details and cropping out unecessary detail is a great way to turn a mediocre image into a great one. Below is an example of OK and better cropping of the same image:

Is there enough contrast?

When selecting a good image, make sure that the subject of the image has enough contrast with the surroundings. You want your subject to be set apart from the background via contrast (either through levels or color). In the example below we see not-so-good contrast between the student, the hammock, and the surroundings on the left, and a better example where the student stands out from the background because of color and luminosity contrast.

Next time...

In this post we've explored some things to consider when selecting a good quality image for your site. In the next post in this series, we'll explore how to choose the right image for your website and how to add meaning and emotion to your site through imagery.

Social media could be said to be the new "press release," a concise way to get your latest updates out to an interested audience. If you're using Twitter or Facebook, here are a couple of quick and easy ways to integrate your social media content into your website.

Embedding Your Twitter Feed

Twitter provides a really awesome tool for creating embedded widgets at https://twitter.com/settings/widgets/new. Here you can choose whether you want to embed your tweets, your favorited tweets, tweets from a list you have created, or tweets that contain a search term, or hashtag (e.g. #cats). Typically you would want to choose your "User Timeline," tweets that you have sent, but if you are creating a website for an event or community, you might want to consider a hashtag search instead, using the hashtag that you are using for the event or community (e.g. #SUDrupalCamp).

Once you have chosen what kind of thing to embed, you can customize the way it looks by adjusting the height, theme, and link color. Click the "Create Widget" button to grab your embed code, and paste it anywhere in your website or template where full HTML is allowed. If you are using Drupal, make sure to set the WYSIWYG to "Full HTML" to enable the embed code to work properly.

Adding a Tweet Button

Let's say you want people to be able to tweet about your website or content. You can very easily create your own custom Tweet button at https://twitter.com/about/resources/buttons. Choosing the first option, "Share a Link," you can specify a custom URL, custom tweet message (this lets you customize what the tweet will say by default), and additional details. If you set a custom message, be sure to test your tweet (by clicking the tweet button example on the right) to make sure you are within the 140 character limit. Once you are done, just copy and paste the code snippet into your website or template where full HTML is allowed.

Adding a Like Button

Facebook also has an online widget creator for adding "Like" buttons to your site found at https://developers.facebook.com/docs/reference/plugins/like/. This lets people share your website on their timeline by "liking" it. Scroll down to the "Configurator" section of the page to create your button. Here you can customize what style of button you want, whether it will show the count (of how many people like it) or faces (profile pics of people who like it), and choice of fonts and visual style.

Once you click "Get Code," you will be presented with a couple of options. If you are able to edit the template for your page, consider the first option which requires adding a script in addition to the button code. You could also consider the iFrame option as it is simpler and just one element to copy/paste into a full HTML part of your site.

Embedding Your Facebook Timeline

If you are interested in embedding your Facebook activity into your website, there are instructions and a code generator at https://developers.facebook.com/docs/reference/plugins/activity/. Now this one is a little less intuitive, in that it is taking all activity happening everywhere on Facebook that refers to your website. It is not taking your Facebook page timeline and embedding your posts. Refer to the documentation to customize this widget – it can be very cool if your site has a lot of activity on Facebook.

This has been an introduction to some common ways to integrate social media into your website – I hope this has been helpful! How do you integrate social media on your site? I'd love to hear from you in the comments.

This is the third post in my series, Styling on Sites. Last time we looked at how to use the great and powerful module, CSS Injector. In this post I'm going to introduce you to our new responsive base theme, Open Framework.

Introducing Open Framework

As of April 9th, all Drupal 7 websites on Stanford Sites now have access to the new responsive theme, Open Framework. This theme was developed in-house at Stanford Web Services, and it is open source and based on Bootstrap (formerly known as Twitter Bootstrap). It provides a set of responsive block regions that enable you to build complex responsive layouts, just by placing blocks in the appropriate regions.

To get started taking advantage of Open Framework, build some blocks. These can be menu blocks, views block displays, or custom blocks. Use the Regions Demo Page on Open Framework to figure out which region to drop blocks into in order to get the layout you want.

If you want to learn more about site building using Stanford's themes, watch this video:

(If you are interested in learning even more about our family of Drupal 7 themes, check out this video: Introduction to Stanford's Repsonsive Drupal Themes.)

Open Framework Theme Options

To access the theme options for Open Framework, navigate to: Appearance > Settings > Open Framework. Here you can toggle on and off the logo, title, slogan, menus, etc. You can set a custom logo, shortcut icon, and hide/show breadcrumbs. You can choose a custom background image, or choose a border style. This can help with some default styles that you want to implement on your site.

Customizing Open Framework

Open Framework gives you a good foundation to get started with your site (you get all of Bootstrap and more!), but it is also a great jumping off point for adding on a layer of custom styles. For those of us on Stanford Sites, we can use CSS Injector to add style overrides to customize the look and feel of our site, but if you are using Open Framework on a different hosting solution, feel free to create your own subtheme to store all of your custom styles. Read my second post in this series for instructions for using CSS Injector to customize styles.

Using what's out there: Bootswatch

What's great about using a popular framework like Bootstrap, is that thousands of people around the world are working with the same framework, and there are a lot of great examples of how you can customize Bootstrap styles. One of those great examples is Bootswatch. We can take some CSS from one of the Bootswatch themes, and apply it directly to our website using CSS Injector. This is a fast and easy way to spruce up your Open Framework website.

Here's how it's done:

1. Find a theme on Bootswatch that you like. In this case, I've chosen the Amelia theme.
2. Click download and choose the bootstrap.css file.
3. Open the CSS file, and copy all of it.
4. Create a new CSS Injector rule.
5. Paste in the Bootswatch theme CSS.
6. Make sure to set your rule to exclude the following paths so that you only see the styles on the front-end of your site:
   admin
   admin/*
   node/add/*
   node/*/edit
7. Save your rule.
8. Voilà!

My site went from drab:

To fab:

You may need to do a little cleanup or custom CSS to really make it look good, but hey! This gets you that much closer to your own custom theme.

Thank you all for attending Stanford Drupal Camp 2013! The event was a great success, and couldn't have happened without everyone who helped organize, volunteer, sponsor, and present. It was really wonderful to see the community come together, and we look forward to continuing the conversation with you all!