SOFTWARE - Wed session 4

So far we've looked at fixed demensinos in our web sessions. Today we're looking into responsive web layouts.

Responsive websites are different because they change the layout according to the scale and size of the browser window. This can be great fro type and text based sites but it may cause problems for images on websites.

THE RESPONSIVE GRID

http://www.responsivegridsystem.com/

Borrowing/stealing code. Its a useful practice to use other websites code for specific functions and create little websites that have no content and keep them in a folder. This then allows you to grab bits of code that you need to copy into a website design for a client. Some websites may have security to prevent people from getting bits of code but there's an app for that. Site sucker.

http://sitesucker.us/home.html

Retrieving css codes.

SAFARI

GOOGLE CROME

FIREFOX

Each web browser has a different way of getting to the source code. When testing your websites you'll probably test all the advanced ones like Google Crome, Firefox, Safari etc. But if the client is using something like Internet Explorer. Some codes have extra css style sheets that are in the html that only activate when Internet Explorer is being used.

You can use netrenderer.com to preview what your website will look like on Internet Explorer but your site has to be live to view it as you need to paste in the url code.

http://netrenderer.com/

As a web designer you can have to test your sites copiously and on different browsers and media. Most designers will actually charge for this from £200 - £500 its quick but it can prove to be difficult.

Charging clients appropriately. Hourly rate - £30 this is quite cheap. Freelancers may charge at an inflated rate as they don't get a monthly pay so something like £120 is more appropriate.

Break down the entire design job and quote how long it will take to do it - this may vary with the requests and requirements of the client and the audience so they must be factored in.

Doing cheaper package deals at a really good price then hosting the websites for an annual fee is a good way to keep money coming in. http://www.pd-design.co.uk/

Page fee (fee for each page of the website) - £300

Annual web hosting - £200

Cross browser/device testing and uploading of site - £200

Stock image searching £30 hourly rate at approximately 10 hours - £300

The image searching is just for the time spent looking for content. The client will still need to pay for the imagery once its been found and they want to use it.

For example:

- 11 page site

- 1 year annual web hosting

- testing

- content search 10 hours

This comes to - £4000

You can offer a certain time period for people to  ask for changes once the website is finished or alternatively you can state in a contract that they are only allowed to have a certain amount of adjustments once the website is finished.

To save chasing people for money you can add a percentage fee or a set inflation fee for every week or month that the client doesn't pay you for your work. Same goes for other aspects of design.

For a website to be effective the content has to be changing. If it doesn't change ten after 6 months it will disappear from Google and you can only find it quickly by typing in the domain name. Ways around this are to upload blank images and text to keep the content changing and adding more to keep it active.

Are you going to manage the content or is the client going to manage the content? Which ever one you want you can charge for.

If you manage the content then thats a weekly/monthly fee that will come in. If they manage it you can charge a larger sum that will cover your time. Essentially its cheaper for them to manage the content however it's less work for them to get you to manage it.\

http://wordpress.com/ This is a great site for a content management system. It's better known and used as a blog.

There is also http://www.cushycms.com/en

Very easy to set up and its easy for the client. You can get 5 free websites with each account you set up  and all the client has to do is log in and get to know the interface to edit the website.

The free version doesn't allow you to put any branding on the cushy account and it limits you to  5 website per account. If you upgrade to the pro account its costs $28 a month but you can have as many websites as you like and you can customise the content management page with the clients branding so it fits in with the website.

SOFTWARE - Print session 4

Today we're looking at ways to send to print.

Package function - gathers all the files in your InDesign document together into one file.

PDF's - this is another way to save your file to send to print. They come in different quality files. The smallest is best for email and the highest 'high quality print' is better for short run print on laser printers or digital print. The 'press quality' setting is best for commercial print. Press quality setting doesn't include bleed.

Post script files - these were around before the fonts we use today. You may have to convert pdf,s to post script files when sending them to someone who uses a PC and not a mac.

Adobe acrobat is a useful piece of software for editing pdf files.

Acrobat distiller is useful if your making post script files.


What if you need to print an InDesign document that is larger than A3 (A3 is the biggest size from the ppd settings). Choose the Adobe pdf9 to get bigger paper size.

Separating colours - using the postscript printer settings, go to output and select separate or separation.

To create an A2 file with multiple prints of the same postcard(example size) you need to create an A2 size file then place the pdf you want to print into the file. Next you need to create the multiples. You can copy and paste or drag and past using the same shortcuts as illustrator or alternatively you can create a grid of the pdf by using the step and repeat function in the edit menu.

SOFTWARE - Web session 3

Today's session is all about adding content like Image galleries and text. This is going to be the trickiest session yet and Simon is going to be taking it at our pace in order to learn how to do it all properly.

Last session we created a template DWT which is what you would do before creating the rest of your website. For our learning benefit we created our index html first and then converted it to a template DWT.

Possible content for websites:

- images
- text
- video
- audio
- animated gifs
- forms and fields (for users to enter text and information. These work with another scripting language)
- maps (on the contact page for example)

Last week we added an image to our website. The image is just a static image, it doesn't move or change, it's the size you want it and thats it.

You can download scripts and html code from the internet. It's best to go for the free ones as they are more editable than the ones you have to pay for which could have water marks.


Downloading lightbox.

The lightbox download gives you css, html and js (javascript).

Drag and drop the js folder into your root folder.

In the css folder there are 2 style sheets - lightbox and screen - these determine the look of lightbox on your website.

In the images folder it gives you the closedown button and the next and previous buttons. These can be edited and tailored to the look of your website.

How to use lightbox.

Copy and pasting the jquery scripts into the write place.

Make sure you fin the head tag and paste the script inside it. The easiest way is the find the head close tag because then you'll know you've pasted it inside the head tags.

We also need to include the css script, which we past in the same fashion.

Then you save the template file.

adding and image. First get your image and change the image size to the required size. Preferably not any bigger than your website. And save it as a jpeg to the quality you want (see last weeks session).

Then we need to create a thumbnail. This can simply be done by cropping the image then saving it as the same name as your other image file then writing 'thumb' after it.

Whenever you have some code in green it signifies that its a link to something else. Useful note.

The next step is to activate the lightbox with the next bit of script.

Once you've copied and pasted it into the editdable region you want to have the image you can change the content of the script. Such as, the image file, the thumbnail and weather or not you want to have a caption with your image.

You can also customise ever single way lightbox works. You can get rid of the white border, stop it from greying out the background and so on.

Adding the thumbnail image.

You can add more images and thumbnails simply by copying and pasting the same line of script and then changing the name on the images. This is where its made easier if you've named your images 'image1, image 2, image 3' and so on.

Grouping thumbnails together.

Slimbox and Fancybox are both free gallery scripts that you can use to include video on your website.

Flexslider is another image gallery that can let you scroll through your images directly on your website and it comes with 6 different ways of functioning.

SOFTWARE - Print session 3

Been given some reading to do on QuarkXpress about Hyphenation and Justification of type.

Specifying 'frames'.

Frames are what the text or images you put into InDesign are inside. You can specify very accurately where you want to position your frames.

Justifying text - everything is adjusted so nothing is aligned left or ragged right etc.

you can do quick changes in multiples or fractions of a frame size by typing /2 for example into the XYWH boxes in the top left of the InDesign document.

/ = divide
x = multiply
number = amount you want to multiply or divide by

Justified text.

Hyphenation and when its good and bad.

You can change the hyphenation and set it so it has a specific circumstance for when it should be used.

cmd + shift + - =  Override the default InDesign hyphen settings. Or you can do it through the tabs a manually.

More on Paragraph styles and Character styles

Character styles only apply to individual characters within a paragraph. Very similar way of creating them as the paragraph styles but you have less options.

Character styles are useful for changing the headings of paragraphs, for example, a hanging heading may need to be made bold to stand out more so you can change it to a bolder font.

Once you've edited a paragraph using a paragraph style and then used a character style within the paragraph style. You can then edit the paragraph style to include the 'nested styles' in the paragraph style. This saves you having to go over each paragraph and change them manually.

Booklets and master pages.

Bets to work in InDesign new document.

Once the document is set up, you get the spread of the booklet called 'readers spread' because you see it as you would when you read the printed article.

Double click on the A-Master button and it will take you to the template for the master page.

You can use the master page to set up layouts for print or for things not to do with print like guides and grids. If you make changes on the master page it will apply the same changes to the rest of the document.

Creating text frames on the master page that can be changed on different pages in the document. All of the items in the master page are locked so they can't be edited unless you press and hold cmd and shift whilst clicking on the item you want to edit. This is called overriding the master page settings. You can also override all the items with this function.

You can have more than one master page per document if you need to have specific changes in the document. You need to create a new master page which will come up as a 'B-Master'

To apply the different master pages to your document you simply drag and drop the master templates onto the thumbnails of the relevant pages in your document. You can change any of them at any point by doing this.

You can also add page numbers to the master pages. This is done by creating a text frame in the master page, going to the type menu - insert special character - markers - current page number.

If you don't want to start the document numbering from 1 then you can specify and edit where you'd like it to start and which number.

This still needs to change so that the 3rd page has the first number in the sequence. This is easily solved by selecting the page you want the numbers to start from before doing the above process.

The first two numbers will still be there you just have to delete them after applying the numbering.

Printing Booklets.

When printing the booklets we need to switch from readers spread to printers spread to see which way the pages go next to each other when printed. InDesign does this for you but it's useful to know this stuff anyway when designing.

If you need to print bigger booklets and want to avoid 'creep' from the pages then you can print several booklets from the document and bind them together. To do this you need to specify the range of page numbers that you want to print for each booklet.