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.
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.
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.
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.
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.
6. Modernizr
Modernizr is a feature detection library. It helps writing conditional javascript and CSS depending on which features a browser supports or not.
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.
8. spin.js
spin.js dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.
9. Masonry
Masonry is a Pinterest-like JavaScript grid layout library which places elements in optimal position based on available vertical space.
10. Textillate.js
Textillate.js is a simple plugin to create text animations based on jQuery, animate.css and lettering.js.
11. Heyoffline.js
Heyoffline.js warns your users when their network goes down so you can make sure they don’t lose anything.
12. Responsive Nav
Responsive Nav is a 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.
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.
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.
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.
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.
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.
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.
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.
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.
Hi,
Very nice article. Another addition to the above list could be: jsfiddle.net . It helps to tidy up the code.
Thanks and Thumbs Up
Since I got to your website, I have discover a number of helpful information… Thanks.
Your list is great. Thank you. An addition could be “Masonry” – a great script for building Pinterest-like websites – sry – a “cascading grid layout library” :).
Thank you! I added Masonry to the list. 🙂
I didn’t know all of the scripts you listed. Thanks a lot, they are really useful.