Listen to this episode of Moms Gone Geek.: Play Now | Download (21)

This page is for testing purposes. It will be updated often until I find a design and layout style I can apply consistently across the entire blog.

April 17, 2010

MGG 123 Blog Post & Show Title Header

By TheMacMommy

Moms Gone Geek Logo

This is an example of podcast description introduction text that leads a blog post. This is the very first paragraph when the particular blog post content is Show Notes for an audio Podcast. Above the podcast description will be a player that plays the audio directly on the blog as well as a link that can take the reader to a place to download the audio from out hosting source, which is currently Libsyn. This is helpful for viewing the blog on a mobile phone that does not support the player type. The description should only be a small paragraph in length. It will also be used for the Video and Lyrics sections in the iTunes.

H2 for First Topic of Discussion Header

Add padding after the introduction text so there is white space after the first image and before the next paragraph to separate it from the rest of the blog post. It should look like an introduction. The text and logo used in the first paragraph will be visible in the iTunes Store directory, Front Row, Libsyn podcast directory, blog, RSS feed. When played on a device, it could be visible in the lyrics section. This is how the text after the first paragraph should be formatted. The header uses Headline 2 formatting. A subheading would use H3 for formatting. There should be a break inserted after the first image. Here is an example of how text can be formatted as code using the Preformatted text style. Copy and paste code inside parenthesis before the header for this paragraph:

(<p style="padding-top: 40px;"></p>)

Image leading podcast description:
Link URL = none, Maximum Width = 200 px, Left Aligned Margin: Top: 0 Right: 12 px Bottom: 6 px Left: 0 copy & paste info inside parenthesis:

(margin: 0px 12px 12px 0px;)

Normally, there should not be a caption under the introductory image. Captions can be under subsequent images placed in the blog post. The maximum width of the image should consistently be around 200 px wide. Use the image scaler to get the thumbnail image close to this size. The image used should be something visually linked with the description or maybe a photo of the person interviewed or featured in the podcast episode.

Second Discussion Topic

Subheading for this topic of dicussion will be slightly longer than main heading if it is required and uses H3

This is an example image placement. The image is left aligned with margin space around the right and bottom sides of the placed image. The text flows rag right. Images that specifically relate to blog design elements will be stored on the server with the rest of the blog-related files and linked from the Media Library in WordPress. Images inserted into posts from the WordPress iPhone or Android app will also reside there because that is the default location for mobile uploads. The maximum width of an image should aim to consistently be: 000px wide with the height being in proportion to the width of the image. This keeps an even layout of imagery while scrolling down the page and helps the eyes to track better while reading. This text will now repeat to fill up the space to give an idea of how a paragraph will wrap around the image.

Image placement. Left-aligned with margin space around the right and bottom sides of the placed image. Text flows rag right. Images that specifically relate to blog design elements will be stored on the server with the rest of the blog-related files and linked from the Media Library in WordPress. Images inserted into posts from the WordPress iPhone or Android app will also reside there because that is the default location for mobile uploads. The maximum width of an image should aim to consistently be: 000px wide with the height being in proportion to the width of the image. This keeps an even layout of imagery while scrolling down the page and helps the eyes to track better while reading. This text will now repeat to fill up the space to give an idea of how a paragraph will wrap around the image.

[INSERT PATTERN IMAGE HERE] This is an example of an image placed with text run-around to the right. This is the background pattern used to frame the blog. All brown text colors are based off of color picker swatches taken from the repeat pattern image called ‘pattern8-pattern-20c.png’ located in the theme images folder on the WP server. We should also use this same background for our Twitter design page. The reds, blues and other colors are based off of colors used in the logo for Moms Gone Geek. <— Notice how punctuation does not get linked.

Third Topic Header

This is an example of all the styles and formatting available for this blog template and how they can be used for design uniformity and readability. This page will be published for testing. Notes will be made on design and layout alterations as well as changes to the internal CSS code within the template structure provided that I can remember what I changed last and where. I’m teaching myself how to use HTML & CSS code so there might be errors from time to time. This text will now be repeated to show how the text will look when indentation is used.

This is an example of all the styles and formatting available for this blog template and how they can be used for design uniformity and readability. This page will be published for testing. Notes will be made on design and layout alterations as well as changes to the internal CSS code within the template structure provided that I can remember what I changed last and where. I’m teaching myself how to use HTML & CSS code so there might be errors from time to time.

This is an example of all the styles and formatting available for this blog template and how they can be used for design uniformity and readability. This page will be published for testing. Notes will be made on design and layout alterations as well as changes to the internal CSS code within the template structure provided that I can remember what I changed last and where. I’m teaching myself how to use HTML & CSS code so there might be errors from time to time.

Here are Some Links

Should They Be Bold?

They All Go To Our Website

Links Should Open in a New Window

Links Should Have Titles
so that blind readers can hear them read aloud in a browser

Here Is a Bulleted List of Unordered Text

  • one line item
  • another line item
  • another line item
  • another bullet
  • this is cool
  • right?
Example of an Ordered List of Text
  1. First line item
  2. Second Line Item
  3. 3rd item in a list
  4. Fourth line of text
  5. Are we having fun yet?
Want to see what a block quote looks like? Here is an example.
This is an example of block quoted body copy. The text will repeat to test paragraph size and alignment. Begin repeating here. This is an example of block quoted body copy. The text will repeat to test paragraph size and alignment. This text will also contain a list of items to be presented within a quoted box. Begin repeating here. This is an example of block quoted body copy. The text will repeat to test paragraph size and alignment. Begin repeating here. Some of this text will have links in it.

Here are Formatting Examples:

Paragraph Text

Address Text
Preformatted

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

After testing out the H1-H6 styles, go back in and edit the .CSS file so they are implemented consistently.

Some Text Examples:

Text that has strikethrough

• Formatted Paragraph

Et posse meliore definitiones (strong) his, vim tritani vulputate (italic) pertinacia at. Augue quaerendum (Acronym) te sea, ex sed sint invenire erroribus. Cu vel ceteros scripserit, te usu modus fabellas mediocritatem. In legere regione instructior eos. Ea repudiandae suscipiantur vim, vel partem labores ponderum in blogger templates (link).

• Table

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Labels: Lorem ipsum 1 , Lorem ipsum 2 , Lorem ipsum 3

Body Copy Font: Trebuchet 13px
Leading or Letter Height Space: 1.3em

Below is the flash audio player embedded on all podcast posts. The link above it enables the viewer using a mobile device to download the audio when flash is not available, for example, on the iPhone. The player below the link has a play button and controls. I’m considering replacing this section of each post with a podcast player provided by a WP plugin. It would be nice if it didn’t have to be a flash player so that it could be displayed on the iPhone and also something that does not slow down page loading times. Those are the considerations when looking for an embedded audio player for this blog.

Listen to this episode of Moms Gone Geek.

This is the code:

<a href="http://media.libsyn.com/media/momsgonegeek/MGG_022_Baby_2.0_Tech.mp3"><strong>Listen to this episode of Moms Gone Geek.</strong></a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="27" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="bgcolor" value="#FFFFFF" /><param name="flashvars" value="playerMode=embedded" /><param name="src" value="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://media.libsyn.com/media/momsgonegeek/MGG_022_Baby_2.0_Tech.mp3" /><param name="wmode" value="window" /><param name="quality" value="best" /><embed type="application/x-shockwave-flash" width="400" height="27" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://media.libsyn.com/media/momsgonegeek/MGG_022_Baby_2.0_Tech.mp3" quality="best" wmode="window" flashvars="playerMode=embedded" bgcolor="#FFFFFF"></embed></object>