Simple way to optimize PDF files for web

Simple way to optimize PDF files for web

The post is not about CSS menu, but helpful for everyone who publish PDF documents online. PDFs are quite popular in the Web, but often used without any optimization. PDF file can contain huge images with masks, media files, fonts and unnecessary information. I have come across so often with huge PDF files, 100-200 Mb published online,
opening very slow in a browser. So I decided to write the post with the simple solution on how to optimize PDF easily and without losing quality.

PDF optimization, 10 times smaller, lossless compression

Optimize PDF file for web

You can find many detailed articles about creating smaller PDFs and optimization. It's very complicated. I know you are in hurry and don't need details. Quick and easy solution is always better.

Required software (it's free):

- Actobat Pro.

Acrobat 7.0 Pro - Free giveaway from Adobe - http://www.adobe.com/downloads/cs2_downloads/index.html
For Windows it can be downloaded separately, for Mac in the Creative Suite.

The trick is simple:

- Save your PDF as postscript file(.ps)
- Covert back to PDF.

(If you get errors try File=>Reduce File Size before saving in .ps format)

The process in images:

Save your PDF as postscript file
Save your PDF as postscript file
Covert back to PDF

The process fix many errors in PDF, if some other software require correct PDF file, e.g. flipping book PDF publication http://webstunning.com/pdf-publisher/ it's a perfect remedy for any problems with PDF.

Flip book PDF Publisher

Need more compression? (with some lose of quality)

- Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size

Edit => Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size

If you like to delve into the settings, use built-in PDF Optimizer in the Acrobat Pro. It has many options but resulting file size can be bigger. (Top menu => Advanced => PDF Optimizer)

Anyway the simple conversion PDF-PostScript-PDF works better for me usually.

Original article

Create an icon-based CSS drop down menu in few clicks

Add icons to your menu selecting them from a list. 450+ icons available.

Add mobile devices compatibility to your CSS menu with 1 click.
Responsive and touch screens compatible drop down css menu.
SWIMBI version 1.2.0 released.

Click here, to get >> The icon based CSS Menu Builder <<


Swimbi blog - CSS Menu Builders comparison

Of course CSS the perfect language for designing beautiful navigation menus. But what if you don't want to spend your time in learning and hand coding.

Fortunately there are many tools for CSS menu designing,

here is a brief comparison of 6 popular CSS/HTML Menu Builders,

Visit the page.

New Swimbi social page on Google+

We've started new social page blog on Google+

http://plus.google.com/+Swimbi_com/

Follow us on G+ to get latest news, updates and discounts.

Suggest new designs of drop down menus.

Learn new CSS features.

swimbi.com - The Swift Menu Builder

New CSS Menu Builder website

We are pleased to announce that f-source.com team launched new website for CSS Menu Builder - swimbi.com

Facebook page of the SWIMBI - Swift Menu builder

https://www.facebook.com/swimbi

Follow us on Facebook to get special discounts, latest news and updates.

Review the Swimbi app, share you ideas on how to improve the software.

Send us screenshots of new menu designs you would like to make in Swimbi.

HTML5/CSS Menu Creator on Chrome

Swimbi - Swift Menu Builder is now available on Chrome Web Store

Swimbi - CSS Menu Maker on Chrome Web Store

If your favorite browser is Google Chrome, you can create drop down menus right in your browser.

- Choose from 450+ icons.
- Select one of ready-to-use designs or create your own.
- Interactive "Welcome tour" helps to start easily
- Get a menu on your website in minutes

Absolute Widths on Menu Items

Hello,

First-off, nice rework conversion of your Flash variant! I really like this CSS version.

Two items, though, that I think you should consider:

1) The ability to have multiple tiers; i.e. 2 horizontal menus, instead of a single line.
2) The ability to select a preferred color for menu line separators.

One problem I am having, however, is with the need for absolute width menu items. This is posing a big problem for me, as I MUST have 2 tiers. I am stacking 2 instances of the same menu version (though with different URLs, of course) atop one another, and for continuity, I need the line separators and menu items to line-up from top-to-bottom. In other words, menu items which are together from the top and bottom should have the same widths, so that the line separators match each other.

Can you think of any way for me to do this; perhaps in the CSS/JS code?

Thanks in advance,

Answer:

Hi,

thanks for your advices.

Yes, you can do it in another CSS file or in HTML page style tag,

<style>

    #swimbi ul li a {

        width: 150px; // if you want to set equal width for all menu items

        

    }

</style>

or

<style>

    #swimbi ul li a {

       padding: 0px 28px !important; // if items width should depend on texts width

        

    }

</style>

PS

I don't recommend to edit the swimbi.css, because the Swimbi app rewrite the file each time you edit the menu.

Regards

Dmitry

f-source.com

Swimbi tutorials on Youtube

New tutorial video on youtube.com
How to insert Swimbi menu on a website. How to insert Swimbi drop down menu to a website

Search field?

Hey gang, just upgraded from the Flash to SWIMBI and the one thing I seem to be missing is the "search field" option. Thoughts? Thanks.

Answer:

Hi,

we will add the search feature in future version.

For now you are free to add any search field in the menu HTML code.

Example:

- replace the last button code with this

<li><a href="#"> <input id="search-input" name="search" type="text" > </a></li>

- add the following code after the Swimbi code

<!-- swimbi code end -->

<style>

#search-input{

width: 120px;

height: 22px;

padding-top:0px;

margin-top:0;

text-align:center;

display: inline-block;

border:1px solid #777;

border-radius: 5px;

background-image:url(http://f-source.com/img/searchLens22.png);

background-repeat:no-repeat;

background-position:left;outline:0;

box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);

text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);

}

</style>

<script type="text/javascript">

var searchInput = document.getElementById("search-input");

if(searchInput.value){

searchInput.style.backgroundImage = 'none';

}

searchInput.onclick = function(){

this.style.backgroundImage = 'none';

}

searchInput.onkeydown = function(){

if(event.keyCode == 13){

window.location.href='https://www.google.ru/search?sitesearch=yourdomainname.com&q='+this.value;

}

}

</script>

Regards

Dmitry

f-source.com

2014/1/5 <cio@houndcomics.com>

How to transfer the link information to another menu

Great tool,
I am using it with Dreamweaver CS3.
I hope we can figure out how to tweak things a little bit.
I bought the full group of menu styles, and built one in the Business Horizontal version with a main and two tiers of related links.
I think I picked the wrong style of menu, I wanted the numerous link menus to drop down from a horizontal top bar.
I have typed many, many URL's to link to menu and sub items and I really don't want to start over.

Is there a way to transfer or open the link information in another menu style?


Answer:


Yes,
use the presets feature of our User Interface.

To save your link information:
UI => Presets tab => Navigation presets => Save navigation structure as

To load your link info:
- select another menu style
- Presets tab => Navigation presets => Select navigation structure => Load

Regards
Dmitry
f-source.com

Хотите купить дом в Италии? Советую Покупка Недвижимости в Италии Лучшие специалисты, лучшие предложения.

Хотите снять дом в Италии? Советую Аренда Недвижимости в Италии Лучшие специалисты, лучшие предложения.

submenu width

I have created a menu which I think looks great however my client would like to reduce the size of the dropdown boxes (width) is this possible?


Answer:

The size (width) of submenus depends on text length and text font size.

Change menu style without losing the structure

Question:

I want to change the orange menu on my site to a different style
Is there an easy way to change the style of an existing menu to a different one . If I go to edit and then select a different type = I lose the structure of the menu

Thanks

John


Answer:

John,
use f-source user interface presets.

Save navigation preset in the Preset tab, then apply it to another menu.

PRESETS tab => Navigation presets => Save navigation structure as

Regards
Dmitry
f-source.com

Macromedia Style Menu - Javascript Popups

Is it possible to use javascript behaviors to open up specific sized popups with the f-source Macromedia Style menu?

Answer:

Of course,
the menu can execute any javascript function.

Recomended way to do this:
- menu button code <div><a href='javascript:myFunction1()'>Test JavaScript</a></div>
(write in the Link field of the UI - javascript:myFunction1()

- Add the script to your page

<script type="text/javascript">
function myFunction1(){
top.consoleRef=window.open('download','Download_window','width=350,height=250,left='+(screen.width-350)/2+',top='+(screen.height-350)/2+',menubar=0,toolbar=0,status=1,scrollbars=1,resizable=1');
top.consoleRef.document.writeln('<html><head><title>test
window</title></head><body bgcolor="#ffffff"
onLoad="self.focus()">test</body></html>');
top.consoleRef.document.close()
}
</script>

Regards
Dmitry
f-source.com

How to load menu settings in Dreamweaver?

A couple of weeks ago, Dreamweaver suddenly wasn't coming up and I had to do a reinstall of the Adobe program suite.  After doing that, the extensions still showed in the extension manager but not on the menus.  Once I re=enabled them, the extension options showed on the appropriate Dreamweaver menus.

The problem is that now that this happened, although the saved files still show the menu as I want it, when I go into your program to edit it - no entries that I made show at all.  The color I used is gone as well as all of the links.

I checked the menu.swf file, and it's bck to the default black menu with the default links showing.  If I save my template, it saves the menu with all of the default values.

My question is:  is there a way that I can re=establish the link from the template (editing) to the existing file that the other html files are all pulling the info from.  I don't know what file to use that might help (the js?)

Any suggestions you may have are greatly appreciated.
I really don't want to have to recreate the entire menu bar and color scheme.

Thanks!


Answer:


If you have a page with this menu just open the UI and click "Save".
Then you will be able to insert the same menu into other pages.

Also I recommend to update the UI - http://f-source.com/gui/f-source-UI.zip

Regards
Dmitry
f-source.com