recentpopularlog in

rtopitt : webdesign   397

« earlier  
7 Principles of Rich Web Applications
This is a writeup based on a presentation I gave at BrazilJS in August 2014. It builds on some of the ideas I’ve been blogging about recently related mostly to UX and performance.

I want to introduce 7 actionable principles for websites that want to make use of JavaScript to control their UI. They are the result of my experience as a web developer, but also as a long-time user of the WWW.
javascript  webdesign  webapp  html  reference  inspiração  performance  latency  frontend 
october 2018 by rtopitt
Material Design Lite
Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.
css  design  webdesign  material_design  html  reference  inspiração  framework 
october 2018 by rtopitt
Tabler - Admin panel made simple
Premium and Open Source dashboard template with responsive and high quality UI. For Free!
dashboard  bootstrap  css  webdesign  html  download  grátis  interface  reference 
april 2018 by rtopitt
UIkit
A lightweight and modular front-end framework for developing fast and powerful web interfaces.
css  framework  ui  webdesign  javascript  html  desenvolvimento 
june 2017 by rtopitt
Groovy Meta Generator: Fast HTML metadata and social meta tag creator.
I built this tool purely to speed up creation of HTML metadata for websites, as well as those pesky social meta tags. It's already configured for best-practises from Facebook, Google and Twitter and when you're done all you need to do is copy-paste. It's your one-stop-meta-tag-shop. Oh, and it's free!
facebook  html  meta  twitter  google+  marketing  tag  ferramenta  webdesign 
october 2015 by rtopitt
The God Login
How would God build this login dialog? The answer is, of course, God wouldn't bother to build a login dialog at all. Every user would already be logged into GodApp the second they loaded the page because God knows who they are. Authoritatively, even.

This is obviously impossible for us, because God isn't one of our investors.

But.. how close can we get to the perfect godlike login experience in Discourse? That's a noble and worthy goal.
design  ux  login  form  webdesign  fluxo  interface  tip  top10  boa_prática  padrão  inspiração  reference 
january 2015 by rtopitt
weinre - Home
weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
debug  javascript  remote  tool  browser  webdesign  webapp 
october 2014 by rtopitt
Bootstrap Material
Material Design for Bootstrap is a theme for Bootstrap 3 which let you use the new Google Material Design in your favourite front-end framework.
css  design  theme  bootstrap  twitter  google  webdesign  framework  interface 
september 2014 by rtopitt
Handcrafted Fonts, Graphics, Themes and More ~ Creative Market
Creative Market is a platform for handcrafted, mousemade design content from independent creatives around the world. We’re passionate about making beautiful design simple and accessible to everyone.
design  market  webdesign  resources 
september 2014 by rtopitt
React | A JavaScript library for building user interfaces
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
framework  javascript  ui  webdesign  biblioteca  mvc  facebook  software_livre  interface 
july 2014 by rtopitt
GLYPHICONS - library of precisely prepared monochromatic icons and symbols.
GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.
design  icon  free  library  webdesign  download 
july 2014 by rtopitt
Font Awesome to PNG online generator
Hey, I'm the Font Awesome to PNG (fa2png) online generator. I'm a small web app returning Font Awesome icons as png. You can define the color and size of the Font Awesome icons and download them directly from my SSD.
icon  fonte  webapp  utilidade  design  png  webdesign 
june 2014 by rtopitt
GoodUI
A Good User Interface has high conversion rates and is easy to use. In other words, it's nice to both the business side as well as the people using it. Here is a running idea list, which we try on projects. Looks like you have 45 unread ideas.
design  webdesign  ui  ux  interface  tip  top10  html 
june 2014 by rtopitt
HTML-Ipsum
Textos de lorem ipsum já em elementos HTML
html  webdesign  lorem_ipsum  utilidade  cópia  ctrl-c 
april 2014 by rtopitt
Introduction | Semantic UI
Semantic UI 0.14.0
UI is the vocabulary of the web.

Semantic empowers designers and developers by creating a language for sharing UI.
framework  css  webdesign  interface  design 
march 2014 by rtopitt
pickadate.js
The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
javascript  jquery  plugin  data  hora  campo  html  webdesign  responsive  mobile  interface 
february 2014 by rtopitt
Random User Generator
Like Lorem Ipsum, but for people.

RandomUser is an API that provides you with a randomly generated user. These users can be used as placeholders in web mockups, and will save you time from creating your own placeholder information.
lorem_ipsum  gerador  aleatório  pessoa  design  placeholder  api  webdesign  user 
february 2014 by rtopitt
GoodUI
A Good User Interface has high conversion rates and is easy to use. In other words, it's nice to both the business side as well as the people using it. Here is a running idea list, which
we try on projects.
design  webdesign  ui  ux  interface  conversão  saas  boa_prática  reference  tip 
february 2014 by rtopitt
Select2
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
javascript  jquery  plugin  select  autocomplete  webdesign  interface  html 
june 2013 by rtopitt
Screensiz.es
Tabelas com informações sobre tamanhos de telas de vários celulares, tablets, notebooks, etc
android  iphone  mobile  ios  tablet  ipad  tela  monitor  tamanho  design  webdesign  consulta  resolução  reference  area 
june 2013 by rtopitt
Superhero.js
Creating, testing and maintaining a large JavaScript code base is not easy — especially since great resources on how to do this are hard to find. This page is a collection of the best articles, videos and presentations we've found on the topic.
javascript  boa_prática  lista  top10  web  webdesign  teste  compilation  tip 
june 2013 by rtopitt
{placekitten}
A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you'll get a placeholder.
placeholder  webdesign  imagem  lorem_ipsum  webapp  hahaha  desenvolvimento  teste  interface  service 
june 2013 by rtopitt
10 tips for designing localised interfaces | Feature | .net magazine
Things don't always turn out well when web copy is translated. Joey Rabbitt outlines some measures you can take to ensure there's a smooth transition when your site is adjusted for different audiences
i18n  interface  design  webdesign  l10n  css  top10  localização  internacionalização  tip  translation 
june 2013 by rtopitt
Unsemantic CSS Framework
Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages.
css  framework  grid  webdesign  responsive  porcentagem  html 
june 2013 by rtopitt
Redactor WYSIWYG html editor
Create word-processed text on the web using a reliable, fast and unbelievably beautiful editor.
editor  javascript  wysiwyg  rich_text  html  webdesign  textarea  software_livre 
june 2013 by rtopitt
Timeline JS - Beautifully crafted timelines that are easy, and intuitive to use.
TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.
javascript  timeline  json  inspiração  linha  tempo  lifestream  interface  webdesign  biblioteca 
may 2013 by rtopitt
Responsive Design bookmarklet | BenjaminKeen.com
Since people are obviously targeting different device screen sizes with their projects, the form below now lets you generate a custom bookmarklet that displays only those device sizes you’re interested in.
bookmarklet  css  design  responsive  javascript  navegador  teste  webdesign  tela  mobile  tablet  tamanho  desktop 
may 2013 by rtopitt
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better
Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.
javascript  jquery  plugin  select  autocomplete  webdesign  interface  html 
may 2013 by rtopitt
INTERFACE SKETCH
If you're designing a website or app, these simple templates are designed to help you sketch your ideas on paper. Download a template. Print it out. Start sketching! You can print in colour or black-and-white; on laser or inkjet printer. All templates are in PDF (portable document format). Some of the templates contain a grid of dots to help with alignment when you sketch. These dots do not represent the pixel dimensions of the device or browser.
design  ipad  iphone  pdf  ui  interface  wireframe  desenho  impressão  grátis  tablet  celular  webdesign  navegador 
october 2012 by rtopitt
Quick Introduction to Moqups - Moqups
Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes
depending on how you like to call them.
mockup  wireframe  interface  webapp  design  webdesign  grátis  protótipo  ui 
august 2012 by rtopitt
Wufoo · The Current State of HTML5 Forms
Browser support for the different features of HTML5 forms is quite varied. Let's explore.
html5  webdesign  formulário  comparação  navegador  html  css3 
april 2012 by rtopitt
Yahoo! Smush.it™
otimizador de imagens jpg e png do yahoo
webapp  otimização  tamanho  compressão  imagem  jpg  png  gif  utilidade  webdesign 
april 2012 by rtopitt
spin.js
spinner animado via javascript
javascript  spinner  biblioteca  webdesign  ajax 
april 2012 by rtopitt
cssarrowplease
ferramentinha pra gerar aqueles boxes com uma seta em um dos lados
css  css3  webdesign  seta  caixa  utilidade 
april 2012 by rtopitt
kiskolabs/carpentry
Gem para criar protótipos HTML em apps rails
rails  gem  protótipo  webdesign  html  view 
april 2012 by rtopitt
Welcome | Sagmeister Inc.
Site é uma webcam do escritório, botões são pinturas no chão
inspiração  design  webdesign  wtf  webcam 
april 2012 by rtopitt
jQuery Waypoints
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

Waypoints makes a solid base for modern UI patterns that depend on a user’s scroll position on the page. Take a look at a few examples.
javascript  jquery  plugin  scroll  página  rolamento  importante  biblioteca  html  webdesign 
april 2012 by rtopitt
Dive Into HTML5
Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. The final manuscript has been published on paper by O’Reilly, under the Google Press imprint. Buy the printed Work — artfully titled “HTML5: Up & Running” — and be the first in your Community to receive it. Your kind and sincere Feedback is always welcome. The Work shall remain online under the CC-BY-3.0 License.
html5  html  livro  online  e-book  webdesign 
february 2011 by rtopitt
mir.aculo.us JavaScript with Thomas Fuchs » DOM Monster Bookmarklet
DOM Monster is our answer to JavaScript performance tools that just don't give you the full picture. DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on, and give you its bill of health. If there are problems, DOM Monster will point them out—and even make suggestions on how to fix 'em.
bookmarklet  javascript  performance  dom  html  webdesign  navegador  software_livre  analysis 
january 2011 by rtopitt
The 1140px CSS Grid System/Framework · Fluid down to mobile
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.
css  grid  webdesign  framework  layout  mobile  importante  fluid  wide  media_query 
december 2010 by rtopitt
41Latitude - Google Maps & Label Readability
Why Do Google Maps’s City Labels Seem Much More “Readable” Than Those of Its Competitors?
google  mapa  design  webdesign  comparação  yahoo  tipografia  visual  analysis  tip 
december 2010 by rtopitt
Slides, A Slideshow Plugin for jQuery
Slides is a new simple slideshow plugin for jQuery including features like looping, auto play, fade or slide transition effects, crossfading, image preloading, auto generated pagination and more.
jquery  javascript  slideshow  plugin  imagem  carrossel  webdesign  gallery 
november 2010 by rtopitt
activo is a theme for Web-app-theme, Formtastic and Attrtastic
Activo was originally developed as a theme for the web-app-theme plugin. It was extended and now includes two extra stylesheets - one for formtastic and the other for attrtastic. It also comes with some css for the jQuery library, including the datePicker plugin. You can use only the ones you need. Try the live demo.
tema  theme  css  webdesign  plugin  formtastic  webapp  jquery  html  inspiração  importante 
november 2010 by rtopitt
10 Marketing Resources Every App Should Provide
This is for all you web app developers out there. There are ten resources every app should make easily available to members of the press, including bloggers, via their website. These are resources for people interested in sharing information, reviews or thoughts about your web app — with a few being tremendously helpful for your users.
webapp  top10  imprensa  marketing  propaganda  web2.0  importante  webdesign  venda  tip 
october 2010 by rtopitt
CSS3 support in Internet Explorer 6, 7, and 8
IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard.
css3  css  ie  javascript  script  webdesign  hack  internet_explorer 
october 2010 by rtopitt
Awesome Fontstacks
Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code!
rails_rumble  webapp  ferramenta  geek  fonte  tipografia  css  webdesign  conjunto  bundle 
october 2010 by rtopitt
Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites - Smashing Magazine
Interactivity can transform a dull static website into a dynamic tool that not only delights users but conveys information more effectively. In this post, we’ll walk through five different coding techniques that can be easily implemented on any website to provide a richer user experience.
javascript  animação  top10  webdesign  css  html  jquery  inspiração  tip 
october 2010 by rtopitt
Periodic Table of the Elements - Josh Duck
The table below shows the 104 elements currently in the HTML5 working draft and two proposed elements (marked with an asterisk).
html  html5  css3  webdesign  gráfico  geek  tabela_periódica 
september 2010 by rtopitt
DarkPatterns.org
This pattern library is dedicated to Dark Patterns: user interfaces that have been designed to trick users into doing things they wouldn’t otherwise have done.
boa_prática  má_prática  webdesign  interface  sacanagem  security 
september 2010 by rtopitt
10 Usability Tips Based on Research Studies
This article discusses usability findings of research results such as eye-tracking studies, reports, analytics, and usability surveys pertaining to website usability and improvements. You’ll discover that many of these usability tips will be common sense but are further supported with numbers; however, some might surprise you and change your outlook on your current design processes.
usabilidade  webdesign  importante  top10  pesquisa  seo  melhores_práticas  boa_prática  interface  science  tip 
september 2010 by rtopitt
38 jQuery And CSS Drop Down Multi Level Menu Solutions
Here you’ll find 38 mainly jquery and CSS based drop-down or just multi level menu tutorials with down loadable files and explanations as well.
javascript  jquery  css  webdesign  menu  drop-down  top10  navegação  formulário  twitter  vimeo  login  inspiração  plugin  interface  tip 
september 2010 by rtopitt
Effigy - Create usable views in Ruby with HTML and CSS selectors.
In Effigy, your view is a Ruby class that performs transformation on an HTML template. The template is passed to a render method, which calls a private #transform method to apply the transformations. The transformed template is then returned as a string of HTML.
ruby  gem  view  template  nokogiri  html  rails  inspiração  webdesign  webdesigner 
august 2010 by rtopitt
Yahoo! Design Pattern Library
This library shares user interface patterns with the web design and development community. We've got 59 patterns today and more on the way, and we welcome your feedback.
yahoo  boa_prática  webdesign  padrão  importante  lista  interface  reference  tip 
august 2010 by rtopitt
Fluid 960 Grid System | 16-column Grid
Versão fluida do 960 Grid System, com integração a jQuery
css  webdesign  framework  fluid  grid  960  javascript  jquery  layout  html  importante 
august 2010 by rtopitt
Marijuana Strain Reviews and Guide - Leaf.ly
With so many different choices out there Leaf.ly will help you make the best ones. We provide a great way to find and discover new medical marijuana strains and top cannabis varieties, create strain ratings and reviews, and track favorites in a personal journal -- all within a discreet environment.
maconha  webapp  webdesign  web2.0  inspiração  avaliação  review  social  game_mechanics  interface 
august 2010 by rtopitt
Removing, Replacing and Moving Elements in jQuery
Learn how to use jQuery to easily remove elements from the page, replace elements, and move elements around.
jquery  javascript  how-to  html  webdesign  dom  tip 
august 2010 by rtopitt
Adding Elements to the Page in jQuery
How to add content to a page using the jQuery methods prepend(), prependTo(), append(), appendTo(), before(), insertBefore(), after(), insertAfter(), wrap(), wrapAll() and wrapInner().
jquery  javascript  how-to  html  webdesign  tip 
august 2010 by rtopitt
code · How to Centre and Layout Pages Without a Wrapper
The number one suggestion I see from the proprietor of html5gallery.com to submitters is not to use the “<section>” element as a glorified “<div id="wrapper">”. Here, I shall demonstrate that “<body>” is already a wrapper and can be hacked to achieve some pretty remarkable layout and clean code!
html  how-to  body  css  webdesign  layout  wrapper  tip 
august 2010 by rtopitt
HTML5 Boilerplate - A rock-solid default for HTML5 awesome.
HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's just got some tricks to get your project off the ground quickly and right-footed.
html5  framework  css3  html  css  webdesign  htaccess  javascript  jquery  template  modelo  importante  boa_prática  reference 
august 2010 by rtopitt
Pattern Tap
Repositório de padrões e melhores práticas em webdesign. Pattern Tap is here to satisfy and encourage the inspiration needs of my interface design peers and peeps. We aspire to be the design tap for your next inspiration need. Pattern Tap was born out of our love for the best interface designs on the web. We wanted a place where we could come and easily find the stuff we were looking for. Sometimes it was a matter of some inspiration for pulling off a horizontal nav bar with a ton of sections, sometimes it was just trying to visually separate some content. We didn't find any central place to find all this stuff, so we made our own.
padrão  boa_prática  melhores_práticas  webdesign  top10  coleção  inspiração  design  html  css  elemento  importante  compilation 
july 2010 by rtopitt
10 Free Online Books for Web Designers | Freebies
There’s a never ending supply of information out there for us web designers. If there’s something we need to learn, we can find it in one form or another. Sometimes it may be on a blog or it could be in a book. While you may have to shell our some money for a good web design book, there are a number of them out that have online versions that are totally free. Here are 10 you should find very useful.
webdesign  livro  e-book  top10  how-to  importante  html  css  html5  tip 
july 2010 by rtopitt
Email Previews and Email Marketing Analytics - Litmus
The secret weapon for email marketers. Litmus helps you look great, get delivered and track response like never before.
email  webapp  webservice  webdesign  inspiração  spam  analysis  tracking 
july 2010 by rtopitt
jQuery Confirm Plugin | Nadia Alramli's Blog
This plugin displays a confirmation message in place before doing an action. It does not require adding any extra code apart from a call to the plugin itself. One call to $(element).confirm() will do the magic. Also, this plugin doesn't require you to provide a callback function; it figures it out on its own.
jquery  javascript  plugin  confirmação  webdesign 
july 2010 by rtopitt
Theming in Rails 2 and Rails 3 | Definitive Code
Implementação simples de uso de temas em aplicações Rails
rails  tema  view  webdesign  3  importante  pittlandia  tip 
july 2010 by rtopitt
jqPlot Charts and Graphs for jQuery
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features: Numerous chart style options. Date axes with customizable formatting. Up to 9 Y axes. Rotated axis text. Automatic trend line computation. Tooltips and data point highlighting. Sensible defaults for ease of use. jqPlot is an open source project by Chris Leonello.
javascript  jquery  plugin  gráfico  importante  biblioteca  linha  barra  pizza  webdesign  estatística 
july 2010 by rtopitt
Placehold.it - Quick and simple image placeholders
How does it work? Just put your image size after our URL and you'll get a placeholder.
webdesign  ferramenta  utilidade  placeholder  imagem  html 
july 2010 by rtopitt
Guia de Referência - Apostila sobre HTML 5
A Visie foi escolhida pelo W3C do Brasil para ministrar um treinamento sobre HTML5 para os seus membros e alguns convidados. Para tanto, construímos uma apostila com todo o conteúdo abordado neste nosso curso. Essa apostila está sendo agora publicada sob Creative Commons aqui no Tableless. Esperamos que ajude a comunidade de desenvolvimento web brasileira.
html  html5  apostila  guia  manual  w3c  webdesign  reference 
july 2010 by rtopitt
Top 10 Beautiful Minimalist Icon Sets
Here are ten noteworthy icon sets which match the minimalist design ethos.
top10  download  grátis  webdesign  design  imagem  minimalista  p&b  icon  gallery 
july 2010 by rtopitt
« earlier      
per page:    204080120160

Copy this bookmark:





to read