Tracy Gander's dashboard

Thanks for sorting this out.

As I mentioned to Scott, I did email support@conceptshare.com (twice), info@conceptshare.com and feedback@conceptshare.com before resorting to a post in GS.

Hi Thrundar,

This is a common problem experienced with graphical text. What image editing software are you using? Your diagrams are vector-based so I'm guessing that you're using Illustrator or similar.

There may be a short answer to this, or the solution may be more complex. Try the easy way and if that doesn't work you can try my long-winded option.

The Short Answer:

The Style you've selected has a maximum width of 868 pixels. Your diagram file is quite a bit larger at 1204 x 831 pixels, so it's being resized to fit the page. You may find that your image displays sharper if you export it with a width of 868 pixels.

You can also try playing around with different file formats to see which compresses better - JPG, GIF OR PNG. This tutorial may give you some insights into suggested applications for each: http://www.synthasite.com/tutorials/i...

The Long-winded One:

I suggest that you try working in a combination of Illustrator and Photoshop and to see if it works better for you. By this I mean resizing your diagram to correct pixel dimensions, and reworking the text on that file in Photoshop.

• In Illustrator, export your original vector file of your diagram only (as an EPS or PDF), leaving out the text!

• Open the exported file in Photoshop - depending on which file format you chose, it may give you the opportunity to set it's image size (dimensions and dpi).

• Type these dimensions in, or open the Image Resize dialog: Image > Image size and type 868 into the Pixel Dimensions and 300dpi into the Resolution field (I know that a web image is 72dpi, we're just playing it safe). Your image should now be the correct max width for your web page.

• Using the Text tool, write the text that you require. Arial 12pt in black should do the trick. Tip: A drop-down menu offers various anti-aliasing methods when generating type (Sharp, Crisp, Strong, Smooth). You can try those to see which option is more legible.

• Once done, save your file (in Photoshop format, in case you wish to edit the text another day). And export your final image by going: File > Save for Web & Devices. Test to see which file format works best for you, possibly GIF or PNG for this particular purpose. Be sure to watch the file size to ensure quick loading times for your web page.

I hope that this is useful to you, and that I'm not being too technical. It's tough to know how much information is too much!

t

Hi,

Thanks for clarifying, I thought that was what you were after, I was just confused by your example.

We're working on a new Style structure that should allow for the following:
- Editable banner
- Editable logo area
- Editable background image
- Editable footer
- Liquid layout of some, if not all, Styles

The team are busy with a number of new features so I'm not able to say when this will be available. We'll no doubt be shouting about it when it is!

Thanks for your patience and support!
t

Hi Bengo,

I'm not sure that I understand exactly what you mean by "use the whole screen for display"?

Are you referring to what we term a "liquid layout"? Meaning that primary areas of the page are flexible in width, depending on your browser window.

An example is Amazon, http://www.amazon.com/ - resize your browser and observe the way in which the center column rescales the content to fit the resizing column? (in this instance the left & right columns are fixed width). A less noisy example might be http://www.cesserdigital.net/

I ask this because the example site you give does not have this flexibility.

Our current styles are all of a "fixed" width, centered in the window. Many do however allow for a full-width column of text or image (which you already make use of).

Sorry but I don't fully understand what it is you're asking for. I understand your frustration, but can you possibly give me more information please? Perhaps some more examples might help too.

Thanks!

Hi Emily,

I've personally found that the Image Uploader tends to freeze when dealing with larger files (especially at busy times of the day). Although your file is well under the 5MB 'limit', 1.2MB is still a pretty hefty jpeg for any website to handle. Remember that anyone visiting your website will need to wait for all the related files to load - if you have a number of large images on a page, this may take a while. I suggest that you optimise your files well to ensure that visitors don't leave your site in frustration at the delay (as a rough guide, a 640 x 480 image should be less than 100K).

Please have a look at these tutorials:
http://www.synthasite.com/tutorials/c...
http://www.synthasite.com/tutorials/i...

In the section 'Understanding Images' in 'Creating Good Looking Websites' I explain why Smaller is Better.

"Minimise the use of images on a single page. As a rough guide, ten to twenty 20k images on a page is more than plenty. Be sure to optimise your images for the web. All image files should be low resolution (72dpi). As a rule of thumb use GIF format for computer generated graphics such as simple logos, buttons or animations, and JPEG format for photographs or scanned material."

In these two tutorials I discuss the importance of DPI, file formats and Image Optimization and take you through the steps to optimise your graphics in Photoshop and Picnik.

I hope this gives you some insights into the exciting world of web design. Good luck!!

t

Hi Blaine,

The best way I can suggest is to upload your photos to a Flickr account (To help you upload your pics with as little sweat as possible, there is a cool image uploader that helps with uploading large quantities of images to Flickr - http://www.flickr.com/tools/uploadr/).

Drag the Flickr Lightbox widget onto your SynthaSite website to quickly create a sophisticated photo gallery - you input your Flickr ID details as well as a keyword Search.

For some more photo gallery ideas, give this tutorial a read - www.synthasite.com/tutorials/photo_ga...

I hope you come right, looking forward to seeing your photos!

tracy

Hi Tam,

You may also find our tutorial on Photo galleries, Portfolios and Presentations useful. http://www.synthasite.com/tutorials/p...

Good luck with your site!
t

Hi Kathe,

There are two things to consider, the physical dimensions of your image and their application (are they going to be small thumbnails or larger non-clickable images), and optimisation (compressing your files so that they are light in weight).

You'll find instructions on how to use Picnik to resize the dimensions of your images plus some additional tips in our tutorial on 'Images & More' - http://www.synthasite.com/support/tut...

Scroll down to the heading 'Pixel Pushers' for those Picnik instructions.

I hope it's useful,
t

You may also find these tutorials of use.
http://www.synthasite.com/support/tut...
http://www.synthasite.com/support/tut...

Hi Candeez,

You may find elements of this tutorial useful in terms of image weight - http://www.synthasite.com/support/tut... (scroll down to the sections titled "Understanding Images" and "Smaller Is Better"). A more in-depth tutorial should be available in the next day or so.

Good luck with your site,
Tracy

Hi, thanks for your query.

We're currently adding a feature that will enable you to edit your sites' footer information, although it is not available at this time.

Your best bet is to drop a Text widget onto the bottom of your page and add your copyright information there.

As per the Yahoo! terms of service (http://info.yahoo.com/legal/us/yahoo/...), Flickr hold the license to use, distribute, reproduce, modify, adapt, publicly perform and display content for the purposes of providing and promoting the Yahoo! Group. This implies that the Flickr widget, owned by Yahoo! who also controls copyright of the material, allows you to display Flickr images in this manner.

My advice would be, assuming that you're not using these images for commercial use, to extend a basic courtesy by crediting the author(s) and providing a link back to their website or profile.

For information on the use of images on the web, read Skellie's useful article which deals specifically with Flickr. http://www.skelliewag.org/a-complete-...

Hi Katie,

The current tool doesn't support text-wrapping per se. Your best bet is to use the Two-column widget in the following way:

- Drag the widget into place within your page.
- Insert a Text widget into the right column (or whichever suits you) and paste in your text
- insert another Text widget into the left column

Now this is where it gets interesting:

- click inside the Text editor in the left column
- click on the icon with the green tree for Insert Image (you'll find it with the other text editing tools like bold, etc.)
- select your image from the file manager or upload a new one
- resize your image using from any corner of the image (a black corner and arrow appears from which to drag - also useful here is the display of width and height)
- drag the centre column of the Two-column widget to allow for a wider text column and narrower image column.

Have a look at this page as an example: http://twentyten.synthasite.com/Socce...

I hope that this is some help, you know where we are if you're stuck!
t

To resize and compress your images using an image editor (like Photoshop or Picnik) it's good to keep the following in mind.

For thumbnail images (small and frequently clickable to view a larger image) I suggest making them no bigger than 250 pixels in width and/or height. Compress them (Photoshop's Save for Web function is invaluable here) as a jpeg or gif to a max of 20KB per image.

I'd suggest a maximum width of 800 pixels for a large image and a compression of under 100KB. Jpeg compression is best for these large files.

It is not advisable to upload psd, bmp, or tif files as these use minimal compression and will impact badly on your website download speed.