industryterm:web designers

A Comparison of Methods for Building #Mobile-Optimized Websites
http://sixrevisions.com/mobile/methods-mobile-websites

Google advocates creating responsive web designs, while Jakob Nielsen, a renowned usability consultant, endorses the creation of dedicated mobile sites (but he was subsequently slammed by some web designers).

A third option is also gaining in popularity, where the web server renders the appropriate HTML and CSS from the same URL depending on the device a web page on the site is being requested from (which has been referred to as responsive design + server side components).

John Foliot on the new #video formats | Interview | .net magazine
http://www.netmagazine.com/interviews/john-foliot-new-video-formats

.net: What is TTML?

JF: #TTML (Timed Text Markup Language) is a #W3C Standard finalised in 2010, but was many years in the making. An XML-based language, it contains a rich set of features and capability of expression. Significant contributions to TTML were made by representatives of Samsung, Microsoft, Apple, the BBC, WGBH/NCAM and RealNetworks. Flash-based players from companies such as Adobe and Longtail Video (the JW FLV Player) provide native support for TTML files today.

Most recently, the Society of Motion Picture and Television Engineers (SMPTE) created a superset of TTML called SMPTE Timed Text which added some additional capabilities to address legacy meta-data requirements from their constituents.

.net: And what about WebVTT?

JF: #WebVTT (Web Video Text Tracks) is a time-stamp format intended for marking up external text track resources. It’s copyrighted by Apple Computer, Inc, Mozilla Foundation, and Opera Software ASA, although liberally licensed.

The principal author is Ian Hickson, and it’s heavily based on the SRT time-stamp format, which emerged from the fan-sub community (primarily in Europe) who were using it to create and share unauthorised subtitles to movie torrents and similar content.

#web

Responsive Web Design by Vitaly Friedman de Smashing Magazine - #ParisWeb
http://www.dailymotion.com/video/xvb0xp_responsive-web-design-clever-tricks-and-techniques-by-vitaly-fri

#Responsive_web_design challenges web designers to adapt a new mindset to their design processes as well as techniques they are using in design and code.

avec des astuces comme le « #Conditional_CSS »
http://www.jordanm.co.uk/post/22964442013/source-shuffling-responsive-images-based-on-media

des remarques sur la complication qu’il y a à gérer des écrans de toute taille notamment #mobile
http://www.html5rocks.com/en/mobile/high-dpi

des buzzwords comme « Content choreography »
►http://trentwalton.com/2011/07/14/content-choreography

Content Choreography | Trent Walton
►http://trentwalton.com/2011/07/14/content-choreography

Another thing I’ve noticed is that media queries are being used to significantly #redesign pages. I’ve seen background colors change and top-level elements move from left to right. If critical thought is applied here those choices may be spot on. But what happens if a user visits at full-width one afternoon and revisits your site in the evening on a tablet, and everything looks completely different? It’s annoying—like someone rearranging the groceries in your pantry every time you closed the door. The power of media queries can be intoxicating, but just because you can doesn’t mean you should.

Mouais. Il a raison sur le fond mais il faudra vraiment que les gens se rendent compte que tant qu’à faire du #responsive, il serait malin de virer les #webfonts pour des questions de bande passante, et forcer le #contraste pour des questions d’#accessibilité en mobilité notamment.

#mediaqueries #rwd

Quelques noms de designers cités comme références et exemples par Mike Monteiro lors de sa conférence « How designers destroyed the world » à Paris Web 2012, et dans son bouquin « Design is a job » :

– Victor Papanek
http://fr.wikipedia.org/wiki/Victor_Papanek
http://en.wikipedia.org/wiki/Victor_Papanek

– Tibor Kalman
http://en.wikipedia.org/wiki/Tibor_Kalman
http://www.aiga.org/medalist-tiborkalman

– Ray & Charles Eames
http://fr.wikipedia.org/wiki/Charles_Eames
http://en.wikipedia.org/wiki/Charles_and_Ray_Eames

– William Caslon
http://en.wikipedia.org/wiki/William_Caslon

– Paula Scher
http://en.wikipedia.org/wiki/Paula_Scher
http://www.aiga.org/medalist-paulascher

– Zuzana Licko
http://en.wikipedia.org/wiki/Zuzana_Licko
http://www.aiga.org/medalist-zuzanalickoandrudyvanderlans
http://www.eyemagazine.com/feature/article/zuzana-licko-text-in-full

– Jeffrey Zeldman
http://en.wikipedia.org/wiki/Jeffrey_Zeldman
http://www.zeldman.com

Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency | Smashing Coding
http://coding.smashingmagazine.com/2012/08/13/coding-qa-with-chris-coyier-responsive-sprites-responsive-f

This is a hot topic lately because of the rise in “retina” displays. But really, this problem has been building up for a while. Us Web designers often work in “pixels”, for instance, setting the width of an image: img { width: 100px; }. But what is 100px? It’s been a long time since that literally referenced a pixel on the screen. These days it’s a rather arbitrary measurement. 100px ends up being around an inch on a physical screen, regardless of its resolution.

Adobe releases its first open source type family: Source Sans Pro
http://typography-daily.com/2012/08/03/adobe-releases-its-first-open-source-type-family-source-sans-pro

http://typography-daily.com/wp-content/uploads/2012/08/source-sans-extra-light.png

Adobe took a step that will probably please many graphic and web designers, the firm decided to go ahead and create it’s first open source type family: Source Sans Pro. This is great news for open source typography, there are many free fonts, even good quality ones, but not enough families of type.

For its release, Source Sans Pro get six weights and support for Latin scripts (this includes Eastern Europe languages, Vietnamese or Pinyin).

#typographie

The State of Arabic Webfonts — TORPEQU
http://www.torpequ.org/blog/the_state_of_arabic_webfonts

I have to admit that I am a little disappointed with the outcome: It looks like there is no way to create a fully functional Arabic webfont (without the help of black magic as it seems to be practiced by the creators of Nimbus) as of today.

Même constat (et méga-énervé).

A Pixel Identity Crisis
http://www.alistapart.com/articles/a-pixel-identity-crisis

#css #media-queries et tablettes à résolution variable

ColorPicker.com : Quick Online Color Picker Tool | HTML Color Codes
http://www.colorpicker.com

Type rendering on the web « The Typekit Blog
http://blog.typekit.com/2010/10/05/type-rendering-on-the-web

Une série de 7 articles sur le blog de Typekit à propos du rendu typo pour le web.

Back when web fonts were in their infancy, I asked typophiles to help me understand why fonts look the way they do in web browsers. A year and a half later, with their help, advice from a few expert type technicians, and lots of research here at Typekit, we’re starting to fully understand type rendering on the web.

http://typekit.files.wordpress.com/2010/10/aaaa.png?w=560&h=180
#typographie #webdesign

Scout - Compass and Sass without all the hassle
http://mhs.github.com/scout-app

#Scout is a cross-platform app that delivers the power of #Sass and #Compass to the hands of web designers.

#CSS #logiciel #mac #windows

Why front-end developers are so important to the future of businesses on the web « paulcarvill.com
►http://www.paulcarvill.com/2009/09/why-front-end-developers-are-so-important-to-the-future-of-businesses-o

The roles of web developers and web designers have been around for over 15 years now, and the role of a client-side or front-end web developer started to mature into a distinct entity around 10 years ago, as the content-presentation-behaviour layer paradigm became embedded in people’s working methodologies [...]. Unfortunately the perception of the front-end developer’s role remains somewhat coloured by an early association in observers’ minds with the other, loosely related role of the web designer. The role of web designer is an extremely important and valid one, but it is very different to that of the web developer, and the lack of a clear distinction between the two, in some people’s perception, is unhelpful and does both roles an injustice.

#web #developer #intégrateur #frontend

#CSS - The #Semantic #Grid System : Page Layout For Tomorrow - Smashing Magazine
http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow

une #grid sans les défauts des grid, utilise le moteur #LESS

L’article présente deux nouvelles façons de construire la page : Flexbox et Template Layout Module. Il va falloir enquêter sur ce sujet...

Farewell Floats : The Future of CSS Layout | Design Shack
http://designshack.co.uk/articles/css/farewell-floats-the-future-of-css-layout

Flexbox represents a completely new way to layout websites. You may have heard about this recently but the syntax is changing a bit so make sure you keep an eye on the working spec to stay up to date (I believe “box” will change to “flex” or “flexbox” in most cases). The current working CSS syntax for applying flexbox is as follows:

À noter une petite webapp qui permet de tester la configuration de trois boîtes sous FlexBox :
http://flexiejs.com/playground
et de constater que c’est carrément puissant tout en restant simple.

#webdesign #css

10 Useful Frameworks To Develop HTML-Based Webapps for Touch Devices
http://woorkup.com/2010/08/25/10-useful-frameworks-to-develop-html-based-webapps-for-touch-devices

During this period several frameworks have been released to help web developers implement quickly applications for this kind of touch devices. Here is a collection of some useful frameworks to develop easily HTML-based webapps that will work on all popular smartphone and tablet touch platforms.

#html5 #JavaScript #JQuery #webdev #mobiles #webapps #iPad #iPhone #Android

60 Seconds - Things That Happen On Internet Every Sixty Seconds [Infographic]
http://www.go-gulf.com/blog/60-seconds

http://www.go-gulf.com/60seconds.jpg

Article Publishing Guidelines | Readability
►https://www.readability.com/publishers/guidelines

#html5 #microformats

The Top 8 Placeholder Services for Web Designers | Nettuts+
http://net.tutsplus.com/articles/web-roundups/the-top-8-placeholders-for-web-designers

Well, when you’re working on a new website, isn’t it a waste of time to use stock images, cropped to the right dimensions? A placeholder service allows you to automatically use a random image at the desired dimensions with minimal effort.

Pas certain que ce soit une bonne idée de faire tous mes prochains prototypes avec le SheenHolders, mais c’est bien tentant.

#webdesign

The Font-Face Rule And Useful Web Font Tricks
►http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks

The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article.

This quick introduction to @font-face will lead you towards a guide through the @font-face kit generator. If you want to make Web use of your already licensed desktop fonts, read up on how to embed them from your own server. Topped up with some helpful tips, tricks and workarounds, this article will hopefully provide some useful insights.

#webdesign #webfonts #typographie #webdev

The Photoshop Etiquette Manifesto for Web Designers
http://photoshopetiquette.com

The #Photoshop Etiquette Manifesto for Web Designers is a list of helpful and subtle suggestions to organize Photoshop Documents, making the transfer of them less painful.

#webdesign

http://photoshopetiquette.com/images/logo.png

“Cure for the Common Font” — A Web Designer’s Introduction to Typeface Selection | #Typography Commentary | Typographica
http://typographica.org/2011/on-typography/intro-to-typeface-selection

Now that web designers suddenly face the challenge (and delight) of choosing fonts from an ever-growing selection, we thought it’s a good time to recommend some basic principles for making wise type choices.

The slides from each of our four quick presentations are below, as well as audio generously provided by SXSW. If you’re short on time and feel like you know the fundamentals, skip ahead to the second half of the session — I think the Q&A is as useful as our prepared stuff.

#typographie

CSS #Typography : The Basics
http://sixrevisions.com/css/css-typography-01

How can we use CSS for great typography in our web designs? This is a question we’ll try to answer.

This is the first part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.

#typographie #webdesign

The #Font-Face Rule and Useful Web Font Tricks - Smashing Magazine
►http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks

Most browsers won’t show any text before all Web fonts are imported. Firefox, however, displays the text using a system font and renders the text again, when the embedded Web fonts are completely loaded. This technique results in a “flash of unstyled text” that sometimes leads to side-effects. Web designers can control this behaviour by using #Google’s Webfont Loader.

#typographie #webdesign

Why front-end developers are so important to the future of ...
►http://www.paulcarvill.com/2009/09/why-front-end-developers-are-so-important-to-the-future-of-businesses-o

yeah. trop important pour le bizness, yeah

#development #webdev #career #front-end #webdesign