Site Specification Document

Transcription

1 Site Specification Document Jodi Richfield Photography 9 March 2011 Version 1.0

2 T ABLE OF C ONTENTS Overview... 3 Developer...4 Site...4 Purpose / Goals...4 Purpose...4 Goals...4 The site will contain...4 Audience...4 Technical Specifications...5 Design...5 Limiting Factors...5 Competitors...5 Accessibility...6 Testing...6 Style Guide... 7 Elements...8 Colors...9 Imagery...9 Planning Information Architecture Wireframes Homepage Bio Using WordPress Login to WordPress Blog Posts and Pages Blog Posts: New Posts Blog Posts: Editing/Viewing Exiting Posts Best Practices for Posting Visual Versus HTML Editor Pages Pages: Blog Links Proof Galleries Accessing the Proof Galleries View List of Existing Proof Galleries Edit an Existing Proof Gallery Add a New Proof Gallery Photo Galleries Accessing the Photo Galleries View List of Existing Galleries Edit an Existing Gallery Adding/Uploading Images to an Existing Gallery and Creating a New Gallery Updating Plugins Backing Up Your Site Back up your database Back up your site files and folders

3 OVERVIEW 3

4 Developer Rick Garrett Design Site Jodi Richfield Photography Purpose / Goals Purpose Redesign current site. To increase traffic to the site in order to gain new clients. Goals To increase traffic by using relevant and useful content. To increase traffic by making the site more visually appealing. To increase sales of prints by creating a user-friendly interactive design. The site will contain Home page to showcase photography. Galleries showcasing categories of photography work. Proof page for clients to view, proof, and purchase their prints through PayPal. A biography (bio) page. Contact page with form. A blog. A pricing page. The footer of every page will contain: A brief intro to bio and offerings, linked to the more detailed Bio page. Categories of photography options offered Contact button Purchase prints button Shopping Cart button Facebook button. Audience Age range: 25-50, mostly women Entertainment & design professionals (actors, models, etc.) 4

5 Technical Specifications Domain: jodirichfieldphoto.com Domain Registrar: xxxx Hosting Company: xxxx FTP and Control Panel: Host: xxxx Username: xxxx Password: xxxx Protosite/Template: constructed using XHTML/CSS Actual Site: Protosite/template migrated into WordPress Requirements for WordPress: PHP, MySQL (requirements met by fatcow.com) WordPress Dashboard Username: xxxx Password: xxxx WordPress Theme: Created using the protosite/template Design The design will be minimalist and secondary to the aesthetics of the photography. Dark shades of gray will be used for the background to make the photos stand out. Navigation design will be simple and intuitive to increase traffic and user experience. The client s logo will be in the header and discreet courtesy links in the footer. Limiting Factors The process of purchasing prints must be simple and intuitive. The client s choice for conducting payment is PayPal. => Research will be made to find the best solution for designing with PayPal. The photo galleries must be fun and sleek without intruding on the art itself. Flash will be avoided for SEO and accessibility reasons. => Research will be made to find a good alternative script. My client s existing blog will need to be part of the site. => Research will be made to see if it can be incorporated in to the new site now, or if it will be linked-to from the new site to be incorporated at a later date. Competitors Many competitors utilize Flash to build their sites, which looks pretty and cool, but falls short on accessibility and SEO. I wanted my client s site to be as accessible as possible and to be as optimized as possible for search engines, so the site was built without using Flash and the following SEO practices were put in place: Alt & title tags Keywords researched & targeted Title tag properly constructed using keywords Header tags properly constructed using keywords Keywords used on every page 5

6 Accessibility Alt & title tags on every image Relative font sizes to allow users to resize fonts Separating the design from the HTML markup using CSS Testing The site validates for XHTML transitional and CSS per W3C. It validates against W3C Web content accessibility guidelines. It tested compatible with the following browsers/systems: o Safari Mac & PC o Firefox Mac & PC o Opera Mac & PC o Chrome Mac & PC o IE 6 + PC 6

7 STYLE GUIDE 7

8 Elements Font Family: Century Gothic, Sans- serif Heading 1 (HTML code places h1 above main content of each page; CSS code places h1 in the header as a result, h1 will be smaller than h2): font- size 1.2 em font- weight normal letter- spacing 2px color #999 Heading 2: font- size 2em font- weight normal color #D0D0D0 letter- spacing.02 em Heading 3: font- size 1.4em letter- spacing.02em Heading 4: font- size 1.2em Heading 5: font- sir5ze.97em Paragraph:.85em/1.5em letter- spacing.07em word- spacing.015em color #999 Links: color #A5C2D5 (main navigation color #777) text- decoration none Links Hover: color #777 (main navigation color #A5C2D5) text- decoration underline (main navigation text- decoration none) Ordered & Unordered Lists: list- style- type square 8

9 Colors Background: #333 with textured image applied to html tag, bg- html.gif, set to repeat fixed Image, bg- body.png, applied to body tag set to no- repeat top (for IE 6, this image is styled out with IEstyles.css) Colors Swatches: # #A5C2D5 # # #D0D0D0 Imagery Imagery will be mostly limited to the photo galleries themselves. There will be a large slideshow on the homepage and smaller slide shows on the gallery pages of the portfolio. There will also be a 960x200 spotlight image on the Bio and Contact pages. There will be a thumbnail picture of the client in the footer in the Bio column. The background will be a gray textured, repeated image with non- intrusive graphics in the header and footer. 9

10 PLANNING 10

11 Information Architecture 11

12 Wireframes Homepage 12

13 Bio 13

14 USING WORDPRESS 14

15 Login to WordPress In order to make edits to the pages of your site, to upload photos to your galleries, add client proof accounts, etc., open any Web browser and go to: login.php Username: xxxx Password: xxxx Once logged in, you ll be at the WordPress Dashboard as seen below The dashboard is the starting point for the backend of your Web site. In the main content area, you ll see a section that summarizes the number posts and pages in your site, whether you have any posts or comments pending, and if any spam comments have been detected. There s also a section where you can write a post if you don t want to go into the main post area (accessed via the left menu bar) and sections for recent drafts and recent comments. 15

16 On the left side of the page you ll see the main menu bar. The items on this bar that you ll be most interested in are the following: Posts Hover over Posts and you ll see options for the following: o Posts lists all published posts o Add New write a new post Media Hover over Media and you ll see the following options: o Library lists all media posted via your blog o Add New add media Pages Hover over Pages and you ll see the following: o Pages lists all pages in the site o Add New add new page Galleries this is where you create and manage your client proof galleries (this will be explained in more detail later in this document) Tools has an option to backup the database that holds the data for your site (this will be explained in more detail later in this document) Gallery where you upload and manage photos to your portfolio galleries (this will be explained in more detail later in this document) 16

17 Blog Posts and Pages Blog posts are the entries that you make on your Blog page. Pages are the actual pages of your site like Bio, Contact, and the Blog page. The tools used to create and edit both blog posts and pages are very similar. Blog Posts: New Posts There are 2 ways in which to write posts: 1. With QuickPress on the dashboard After logging into WordPress, QuickPress is found in the upper right corner of the dashboard as seen below. This method of posting is good for quick text posts without photos even though you can add media using this method, I d suggest just using it for text only and then using the second method (discussed below) for posts with media. 17

18 2. From the left menu bar: On the left menu bar, go to Posts > Add New, you ll be taken to the following: With this method of posting, you ll see the following tabs just above the editing area: These tabs allow you to switch between writing your post with HTML or writing your post using Word- like tools. Use whichever you feel most comfortable with; however, if you float a picture to the left or to the right of text, and then add another picture below them, you ll need to add the below code on the HTML tab you ll add the code directly below the picture and the block of text that the picture is floated with. The code is: <br class= clear /> Also, if your post ends with a picture, the bottom picture needs to have it s float set to none. You ll see float options when you add a photo by clicking on the image icon described in the next paragraph. 18

19 With both methods, adding media is done through the icons to the right of the words UPLOAD/INSERT as seen below. The first icon is for pictures, the second is for video, the third is for audio, and the fourth is for other media. Hovering over the icons will display their function. For every post you write that has pictures, you need to set the Featured image option seen in the lower right corner of the Post editing page as seen below. Setting this will ensure that the thumbnail to the left of your blog post excerpt on your site will be set to the correct size. If you don t set this, WordPress will pick a photo at random and it might not be sized or proportioned correctly. If you re post doesn t have a picture, your post excerpt will just show text. Blog Posts: Editing/Viewing Exiting Posts To view all of your posts or to find a post to edit, go to the left menu bar and click Posts > Posts. You ll be taken to a page that looks like the image below. 19

20 Notice the Bulk Actions drop- down at the top. This menu allows you to perform actions on checked posts such as editing or moving to the trash. You can also perform these actions by hovering over the title of a single post notice how the blue links are showing under the first post above. One important thing to remember about choosing the Trash option is that this won t permanently delete a post (same thing for pages), it will just move it to the trash can. This is the same idea of moving a file on your desktop to the trashcan it s not gone until you empty the trashcan. For WordPress posts, you can see the Trash icon at the top of the page, just above and to the right of the Bulk Actions menu. Click on the Trash icon to permanently delete a post (this works exactly the same for pages). To edit a post, just click on the blue edit link when you hover over a post title. You ll see the same options you saw when creating a new post. Best Practices for Posting You can say or show the world anything you like on your WordPress site. Here are some tips you need to know to help you write your posts in WordPress. These tips are taken from WordPress.org. Practice Accessibility To be compliant with web standards for accessibility, be sure to include ALT and TITLE descriptions on links and images to help your users, such as <a title="wordpress Codex" href=" Codex</a>. Use Paragraphs No one likes to read writing that never pauses for a line break. To break your writing up into paragraphs, use double spaces between your paragraphs. WordPress will automatically detect these and insert <p> HTML paragraph tags into your writing. An example is: <p>an example of a paragraph.</p> Using Headings If you are writing long posts, break up the sections by using headings, small titles to highlight a change of subject. In HTML, headings are set by the use of h1, h2, h3, h4, and so on. By default, most WordPress Themes use the first, second, and sometimes third heading levels within the site. You can use h4 to set your own headings. Simply type in: <h4>subtitle of Section</h4> with double lines before and after and WordPress will make that title a headline in your post. To style the heading, add it to your style.css style sheet file. For more information on styling headings, check out Designing Headings. 20

21 Use HTML You don't have to use HTML when writing your posts. WordPress will automatically add it to your site, but if you do want control over different elements like boxes, headings, and other additional containers or elements, use HTML. Spell Check and Proof There are spell check Plugins available, but even those can't check for everything. Some serious writers will write their posts in a text editor with spell check, check all the spelling and proof it thoroughly before copying and pasting into WordPress. Think before you post Ranting on blogs is commonplace today, but take a moment and think about what you are writing. Remember, once it is out there, it can be seen by many and crawled by search engines; and taking things back is harder once it is public. Take a moment to read what you've written before hitting the Publish button. When you are ready, share it with the world. Write about what you like You ve heard this a thousand times before and it sounds too clichéd, but it is true. If you force yourself to write something that you don t really enjoy, it will show. Perhaps you might not have a specific theme for writing when you just start, but that s ok. You ll become more focused later. Just enjoy the experience and write what you like. Write frequently Write as frequently as you can, may be even more than twice a day, but don t let quantity get in the way of quality. Your viewers come for content, don t give them useless stuff. Don t use too much slang Not all the readers will be from your part of the world so make sure people can understand easily. Don't hide your emotions Tempting as it might be, don t hide your real emotions. After all that is what a blog is about. If you want, you can stay anonymous and voice your feelings on whatever you are passionate about. You might have strong views on various subjects but let your readers know your passion. What is passion worth if you can t even share it? You ll actually love the discussions it can lead to. The discussions will broaden your own thinking and you might end up making some really good friends. Consider your readers Perhaps this sounds weird, but consider who needs to know about your blog before you tell them about your new blogging hobby. Will you be able to write freely if you tell them? How much should you let your readers know about you? Is it ok if your boss or girlfriend reads your posts? If you don t want them to read, take anonymity measures accordingly. 21

22 Make use of comments Comments let people share their ideas. Sometimes, they might not be good, but you can ask such people to shut up. Most of the times, they will and if they don t you can delete their comments. Blogging like real life, can be both fun and not so fun at times. Be prepared. Also, give your people a place to contact you in private if they want to write to you. Worry about blog design later Blog design matters, but only to an extent. Don t give up on blogging just because the design isn t coming up as you ll like it to be. Sooner or later, you ll get around the design problems with ease. But continue writing. Content is what attracts your readers, not just the look of your blog. Don t play too safe Talk about the real you. Readers aren t impressed by how big your house is, which cool club you belong to, or what the weather is in your hometown. Don t be a bore and put a long post on how you fixed the leaking tap in minutes. Readers don t care about braggers, they care about the real you- - how you feel, what gets you excited, why you are the person you are. But if achievements are all that you can talk about, you will bore your readers. Use pictures and videos They make the pages colorful and viewers get to see a little of your part of the world. They feel connected. Keep writing Don t stop blogging. If you don t have anything to write about, chances are, you are still holding back. Let loose. Perhaps surf more blogs and maybe you ll get an idea. You can write about your friends, complain about your boss, or simply rant about what s gone wrong. Yet if nothing else works, just write a review on the latest movie, book, or product. Easy actually. Save your posts Save your posts before you press the publish button. Anything can happen with your computer or with an internet connection. You don t need to lose your post. Visual Versus HTML Editor When writing your post, you have the option of using the visual or HTML mode of the editor. The visual mode lets you see your post as is, while the HTML mode shows you the code and replaces the WYSIWYG editor buttons with quicktags. These quicktags are explained as follows (These tips are taken from WordPress.org): b - <strong></strong> HTML tag for strong emphasis of text (i.e. bold). i - <em></em> HTML tag for emphasis of text (i.e. italicize). b- quote - <blockquote></blockquote> HTML tag to distinguish quoted or cited text. del - <del></del> HTML tag to label text considered deleted from a post. Most browsers display as striked through text. (Assigns datetime attribute with offset from GMT (UTC)) 22

23 link - <a href=" HTML tag to create a hyperlink. ins - <ins></ins> HTML tag to label text considered inserted into a post. Most browsers display as underlined text. (Assigns datetime attribute with offset from GMT (UTC)) ul - <ul></ul> HTML tag will insert an unordered list, or wrap the selected text in same. An unordered list will typically be a bulleted list of items. ol - <ol></ol> HTML tag will insert a numbered list, or wrap the selected text in same. Each item in an ordered list are typically numbered. li - <li></li> HTML tag will insert or make the selected text a list item. Used in conjunction with the ul or ol tag. code - <code></code> HTML tag for preformatted styling of text. Generally sets text in a monospaced font, such as Courier. more - <!- - more- - > WordPress tag that breaks a post into "teaser" and content sections. Type a few paragraphs, insert this tag, then compose the rest of your post. On your blog's home page you'll see only those first paragraphs with a hyperlink ((more...)), which when followed displays the rest of the post's content. page - <!- - nextpage- - > WordPress tag similar to the more tag, except it can be used any number of times in a post, and each insert will "break" and paginate the post at that location. Hyperlinks to the paginated sections of the post are then generated in combination with the wp_link_pages() or link_pages() template tag. lookup - Opens a JavaScript dialogue box that prompts for a word to search for through the online dictionary at answers.com. You can use this to check spelling on individual words. Close Tags - Closes any open HTML tags left open- - but pay attention to the closing tags. WordPress is not a mind reader (!), so make sure the tags enclose what you want, and in the proper way. Pages Creating and editing pages is very similar to creating and editing posts. To edit a page, go to the left menu bar and click Pages > Pages. When the list of pages appears, hover over the title of a page and click the Edit link when it appears. Most of what is described in Best Practices for Posting and Visual Versus HTML Editor in the previous several pages can be applied to pages. Be extremely careful when editing your pages always copy and paste the content into a text editor to save as a back- up before you start editing. The content of some pages is in the template files themselves, so editing that content will take more effort and more advanced knowledge of html and php. The content in the header and footer is also in template files and requires more effort and skill as well. 23

24 Pages: Blog Links To edit the links on your blog page, go to the left menu bar and click Links > Links. When the list of links appears, hover over the link title that you want to edit or view and then click on the Edit link that appears. To create a new link, go to the left menu bar and click Links > Add New. Then fill in the necessary information. 24

25 Proof Galleries Accessing the Proof Galleries In the left menu bar, you ll see a link called Galleries (don t confuse this link with Gallery or Gallery (Smooth) ). Hover over Galleries and the sub- menu will appear as seen below. View List of Existing Proof Galleries To view the list of existing proof galleries, go to the left menu bar and go to Galleries > Galleries. You will be taken to the list of existing proof galleries as seen below. 25

26 Hover over the bolded name of a gallery to get the option to edit the gallery. In the image above, the mouse is hovered over the bolded title Rick Garrett which has brought up the edit option in blue. Clicking on edit will bring up that gallery s editing options. Edit an Existing Proof Gallery Click edit and you ll be taken to that gallery s page where you can do the following: 1. Add images (found in the middle of page) 2. Delete images (found below Import Images ) 26

27 3. Set a password for the gallery (found in right column click on edit to the right of Visibility: Password protected. 4. Change the gallery ID (found just above Import Images ) 27

28 Once you have finished editing the gallery, click on Update in the upper right corner as seen below. Add a New Proof Gallery To add a new proof gallery, go to the left menu bar and click on Galleries > Add New You will be taken to the screen seen below. Enter the name of the new proof gallery in the top box. 28

29 In the right column, under Publish, click on the edit link next to Visibility: Password protected this is where you ll set the password for this gallery as seen below. In the middle of the page, you ll see a heading called Gallery Information which is where you ll change the Gallery ID to something that you can remember. An ID is automatically generated; however, you can change it. As seen below, the Gallery ID was changed to test. 29

30 Around the bottom of the page, you ll see a heading called Import Images which is where you ll add the client s proof images. 30

31 Photo Galleries Accessing the Photo Galleries In the left menu bar, you ll see a link called Gallery (don t confuse this link with Galleries or Gallery (Smooth) ). Hover over Gallery and the sub- menu will appear as seen below. 31

32 View List of Existing Galleries To view existing proof galleries, go to the left menu bar and go to Gallery > Manage Gallery. You will be taken to a list of existing galleries as seen below. In this image, you can see a list all of your galleries with the gallery ID, the gallery name, and the number of images in that gallery. (Don t confuse this gallery list from your proof galleries as described in the last section they are separate). 32

33 Edit an Existing Gallery To edit an existing gallery, click on a gallery name to go to the editing options for that gallery as seen below. 33

34 From this page, you can do the following: 1. Sort images Click on the Sort gallery button When you click the Sort gallery button, you ll be taken to a view where you ll be able to move the photos to the desired location as seen below. When you re done, click Back to gallery 34

35 2. Delete Images, Set Watermark, Resize, Other Options After clicking Back to gallery, you ll return to the gallery s editing options page. Above the images area of the page, you ll see a drop- down list with the words Bulk actions as the label. Check the box to the left of the image(s) that you want to make editing changes to, then click on the drop- down box to see the editing options as seen in the image below. Once you ve made your editing selection, click Apply, then Save Changes. 35

36 Adding/Uploading Images to an Existing Gallery and Creating a New Gallery To add/upload images to an existing gallery or to create a new gallery, go back to the left menu bar and click on Gallery > Add Gallery/Images You ll be taken to a page where you can perform these actions as seen below. Uploading Images: 36

37 Add new gallery: 37

38 Updating Plugins Plugins are applications that are downloaded to your WordPress installation that perform specific functions. For example, your proof galleries and your photo galleries are controlled by plugins. You contact form is also controlled by a plugin. At least once a week, you ll discover that one or more of your plugins will need to be updated. This is a simple process and only takes minutes. You ll know that there are updates when you login to WordPress and see the red circle with a number in as in the image below look to the left of the Plugins link. The easiest way to get to the list of plugins that need updating is not to click on Plugins, but to hover over the Dashboard link you ll see the fly- out menu below with the Updates option. 38

39 Click on Updates and you ll be taken to the screen you see below. Check Select All under the Plugins section in the middle of the main content area. Then click on the Update Plugins button above it all of the plugins listed will automatically update. You ll see a message telling you that all plugins have been updated once the process is complete. It should only take a minute or two, depending on how many updates you have. Occasionally, WordPress itself will need to be update. Updating WordPress is the exact same process as updating the plugins. Just follow the same steps. 39

40 Backing Up Your Site This is extremely important, and you should do this once a month, or at least once every few months. There are two parts to backing up your site: (1) backing up the database via your WordPress dashboard, and (2) backing up the site files and folders via an FTP client like Filezilla. Back up your database To back up the database, do the following: From the left menu bar, go to Tools > Backup In the top section called Tables, check the first item in the right column; hold down your shift key, then check the last item in the right column all of the items should now be checked. Scroll down to the section called Backup options Make sure that Download to your computer is checked Click the Backup now! button After clicking the button, you ll see a progress bar at the top of the page showing the progress of your download. It might take a few minutes. Your sites database will download as a zip file wherever you have your computer set to store downloads. Unzip and you ll have a file with a.sql extension this is your database. Create a new folder, call it bu- todaysdate, and place the.sql file inside. Then place the new folder on your desktop. Back up your site files and folders Open up Filezilla, or whatever FTP client you choose to use, and sign- in. Host: xxxx Username: xxxx Password: xxxx Once you re signed in, go to the left side of the screen and drive to the new folder on your desktop, making sure to open the window to the contents of the folder you will see the.sql file. Next, go to the right side of the screen where you ll see the files and folders of your site on fatcow.com s server. Select everything, right- click, and click download. The files and folders will begin to download to your new folder on the desktop. Don t worry, the files aren t being deleted, they re just being copied (be very careful when you right- click that you do in fact choose download ). This can take 10 or minutes to complete. Once everything has downloaded, you re done the site is backed up. Now just zip the new folder and store it somewhere safe (be extra safe and store it in two different drives). 40