Guymon

Tools: Mobile Webentwicklung

Adobe Shadow werde ich mal testen.

Adobe® Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.

Insbesondere der remote inspection Kram sieht interessant aus.

Website Dimensions

Website Dimensions bietet einen schnellen Überblick welche Screen Größen aktuell sind. Ein recht hilfreicher Service…

With the help of CSS3 and mediaqueries you can change the layout of your website based on the detected screen size of the device (be it a computer screen, tablet, smartphone,…). But what are the current guidelines in pixels? Find out here. We’ve made an easy-to-use, always up-to-date, information resource, just for you.

Responsive Navigation Patterns

Brad Frost stellt die Vor- und Nachteile einige Navigations Muster vor die sich für Responsive Design eignen.

7 Ansätze werden in dem Beitrag beleuchtet:

• Top Nav or “Do Nothing” Approach
• The Footer Anchor
• The Select Menu
• The Toggle
• The Left Nav Flyout
• The Footer Only
• The “Hide and Cry”

Responsive Design am Beispiel Boston Globe

Tito Bottitta beschreibt den Prozess wie das Responsive Design des Boston Globe entstanden ist.

Interessant fand ich die Wahl von InDesign als Programm zur Gestaltung.

Hands down, the answer was InDesign. At its core, BostonGlobe.com is a publication website, and InDesign is the best tool for laying out publications and content. Yes, there are huge differences between designing print publications and designing for the web, but consider this: Most web pages are simply a combination of photos and text. And where Photoshop excels at manipulating images (but sucks at type) and Illustrator is exceptional at typography (but sucks with images), InDesign is built for both.

Even better, InDesign’s internal logic parallels that of web design and development. Every new document begins with a grid. It uses type and object stylesheets that should be familiar to anyone who has used CSS, allowing you to change the characteristics of every headline (or object) from one master style.

Image Effects with CSS

Nick La stellt einige schöne Bildeffekt vor – embossed, soft embossed, cutout und glossy.

Various styles such as embossed, cutout / pressed, and glossy effect can be achieved using multiple inset box-shadows. You can also use the :before element to another layer of effect such as glossy gradient. See the demo source code for CSS details. Resize your browser window to see the resizable images.