GD Star Rating
loading...

When creating a website there are a lot of things you need to pay attention to. The code needs to be tidy and the website should look similar no matter what browser a visitor is using. If possible it should be responsive and react to the user’s device and screen resolution. When using new features like HTML5 and CSS3 you have to make sure all the features are supported in all browsers.

Fortunately there are a lot of very useful scripts out there which simplify your life when creating new web pages. The following list gives you an overview over some of the most important scripts and should help you create clean beautiful and cross-browser compatible websites.Wenn Du eine Webseite erstellt, gibt es eine Menge, worauf Du achten musst. Der Code sollte sauber programmiert und aufgeräumt sein und die Webseite sollte immer gleich aussehen – unabhängig davon, welchen Browser ein Besucher benutzt. Wenn möglich sollte die Seite responsive sein und sich an das Benutzergerät und die Bildschirmauflösung anpassen. Wenn neue Features wie CSS3 oder HTML5 genutzt werden, sollte darauf geachtet werden, dass diese Features nicht von allen Browsern unterstützt werden und daher Alternativlösungen gefunden werden müssen.

Glücklicherweise gibt es viele nützliche Skripts, die das Programmieren von Webseiten vereinfachen können. Die folgende Liste soll einen Überblick über einige der wichtigsten Skripts geben und Dir helfen, schöne, saubere und browserunabhängige Webseiten zu erstellen.

1. FitText

FitText is a jQuery plugin for flexible font sizes. The script automatically scales font depending on the width of the surrounding element.
A jQuery plugin for inflating web type

2. -prefix-free

-prefix-free is a very useful script which automatically creates prefixes for CSS properties. So instead of having to write a property for each browser separately you can just write the unprefixed CSS properties.
Break free from CSS prefix hell!

3. YAML

YAML is a CSS framework which helps you save development time by offering a flexible grid system which can be used to generate flexible responsive websites. It also comes with optimized typography and a form toolkit with theme-support.
YAML CSS Framework

4. html5shiv

html5shiv is a script which should be used when creating HTML5 websites. It enables the use of HTML5 sectioning elements (e.g. section, article or header) in Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
html5shiv - HTML5 IE enabling script

5. Respond.js

Respond.js is a script that enables responsive web design in Internet Explorer 8 and under by allowing the use of media queries.
Respond.js - polyfill for min/max-width CSS3 Media Queries

6. Modernizr

Modernizr is a feature detection library. It helps writing conditional javascript and CSS depending on which features a browser supports or not.
Modernizr - the feature detection library for CSS3 / HTML5

7. equalize.js

equalize.js helps you create boxes with equal width and height. It will adjust the height / width of an element depending on the height / width of the largest box.
equalize.js - jQuery plugin for equalizing the height or width

8. spin.js

spin.js dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.
spinjs - spinning activity indicators without images

9. Masonry

Masonry is a Pinterest-like JavaScript grid layout library which places elements in optimal position based on available vertical space.
Masonry - Cascading grid layout library

10. Textillate.js

Textillate.js is a simple plugin to create text animations based on jQuery, animate.css and lettering.js.
Textillate.js - A simple plugin for CSS3 text animations

11. Heyoffline.js

Heyoffline.js warns your users when their network goes down so you can make sure they don’t lose anything.
Heyoffline.js - Warn your users when their network goes down

12. Responsive Nav

Responsive Nav is a responsive navigation plugin without library dependencies and with fast touch screen support.
Responsive Nav - Responsive navigation plugin without library dependencies and with fast touch screen support

If you know any other useful scripts which are missing in my list, feel free to add them in a comment so I can add them to the list.

1. FitText

FitText ist ein jQuery-Plugin für flexible Schrifgrößen. Das Skript skaliert Schrift automatisch abhängig von der Breite des umliegenden Elements.
A jQuery plugin for inflating web type

2. -prefix-free

-prefix-free ist ein sehr nützliches Skript, das automatisch Prefixe für CSS-Eigenschaften erstellt. Anstatt also für jeden Browser eigene Eigenschaften schreiben zu müssen, kann einfach die Schreibweise ohne Prefix verwendet werden.
Break free from CSS prefix hell!

3. YAML

YAML ist ein CSS-Framework, das Dir mit seinem flexiblen Rastersystem helfen kann Entwicklungszeit einzusparen und flexible responsive Webseiten zu erstellen. Das Framework bietet außerdem optimierte Typography und ein Formular-Toolkit.
YAML CSS Framework

4. html5shiv

html5shiv ist ein Skript, das genutzt werden sollte, wenn Du HTML5-Webseiten erstellst. Es ermöglicht die Benutzung von HTML5-Sektionselementen (z.B. section, article or header) im Internet Explorer und bietet grundlegendes Styling für Internet Explorer 6-9, Safari 4.x (und iPhone 3.x), und Firefox 3.x.
html5shiv - HTML5 IE enabling script

5. Respond.js

Respond.js ist ein Skript, das Responsive Webdesign im Internet Explorer 8 und niedriger erlaubt, indem es die Benutzung von CSS Media Queries ermöglicht.
Respond.js - polyfill for min/max-width CSS3 Media Queries

6. Modernizr

Modernizr ist eine Feature-Erkennungs-Bibliothek. Es hilft dabei, konditionelles Javascript und CSS zu schreiben, abhängig davon, ob ein Feature von dem Browser akzeptiert wird oder nicht.
Modernizr - the feature detection library for CSS3 / HTML5

7. equalize.js

equalize.js hilft Dir dabei, Boxen mit gleicher Breite und Höhe zu erstellen. Das Skript passt die Höhe bzw. Breite eines Elements an die Maße der größten Box an.
equalize.js - jQuery plugin for equalizing the height or width

8. spin.js

spin.js erstellt drehende Ajax-Loader, die unabhängig von der Auflösung genutzt werden können und die Benutzung von Gifs ersetzen.
spinjs - spinning activity indicators without images

Falls Du noch weitere nützliche Skripts kennst, von denen ein Webentwickler unbedingt wissen sollte, hinterlasse bitte einen Kommentar unterhalb dieses Posts. Ich werde sie dann in die Liste aufnehmen.

8+ Scripts you should know as a Web Developer8+ Scripts, die Du als Webentwickler kennen solltest, 9.4 out of 10 based on 25 ratings