RSS

JustPixels + webdesign   291

RFP Advice From The Front Lines - Cognition: The blog of web design & development firm Happy Cog
Tips about how to "RFP" a website project.
business  webdesign 
6 days ago by JustPixels
Photoshop Grids | PSD Grid Templates
Collection of PSD grids for a variety of browser viewport sizes - like for RWD!
webdesign  mobile 
6 days ago by JustPixels
Color equivalents table
Find CSS color information as keywords, RGB values, RGB percentages, HSL and Hexadecimal (long and short, when available). Nicely done! Great resource for any web designer AND for students!
css  color  webdesign 
8 days ago by JustPixels
The 30 CSS Selectors you Must Memorize | Nettuts+
Great for students! A nice, simple explanation about the most basic CSS selectors. A very good guide!
css  reference  webdesign 
9 days ago by JustPixels
Learn CSS Selectors interactively
Click a selector, modify the CSS rules and preview the result.
css  learning  tutorial  webdesign 
11 days ago by JustPixels
Rotating Words with CSS Animations | Codrops
Technique to create a Flash-like presentation of changing text messages using only CSS and HTML - very clever! It's a tricky concept because, while looking cool, it can also be annoying and too-trendy, so use it carefully!
animation  css3  webdesign 
12 days ago by JustPixels
Pixel-fitting by Dustin Curtis
It's all about pixels and how the edges of images are "parsed" by the display tools. In other words, when a vector image is rasterized the anti-aliasing can cause blurry edges. Humans can fix this. Hence a great discussion about relying on machines to rasterize vs. humans to rasterize. Great topic for webdesign students to discuss!
webdesign 
14 days ago by JustPixels
Controlling text size in Safari for iOS without disabling user zoom | 456 Berea Street
Here's a little tip about controlling the automatic text re-sizing in iOS for your website design. This can be especially useful for responsive web design (RWD).
webdesign  code  rwd  responsive  iOS 
14 days ago by JustPixels
Mobile Web Performance Measurement – Mobitest | Blaze.io
Terrific online tool to test the mobile speed/delivery of a website - very good to demonstrate the importance of a streamlines/optimized website design for the mobile audience.
mobile  test  tools  testing  webdesign 
15 days ago by JustPixels
Five responsive web design pitfalls to avoid | Feature — www.netmagazine.com — Readability
VERY good article about things to consider for the mobile experience of your website design. Includes a demonstration of an analysis tool on the BarackObama.com website - which is HUGE - and discusses the consequences of such a HUGE site on the mobile audience.
mobile  rwd  responsive  webdesign 
15 days ago by JustPixels
CSSarrowplease
Another great online tool that generates a DIV with a little arrow-shape that pops out of one side. Simple and nifty - VERY helpful tool!
css3  webdesign  tool 
16 days ago by JustPixels
Stubbornella » Blog Archive » Cross-Browser Debugging CSS
Great guide for good, basic beginning steps to working with CSS. These tips help you understand how to de-bug a layout that misbehaves in some browsers. It's a nice, simple, logical approach to using CSS for the layout of websites. Great for students, too!
css  webdesign 
19 days ago by JustPixels
Jordan Moore | Content Choreography
Nice, simple example of a website layout (this is just placeholder boxes and text) that uses RWD - Responsive Web Design. Great as an example for clients or students!
webdesign  responsive 
22 days ago by JustPixels
Google HTML/CSS Style Guide
Google's style guide for HTML and CSS in their products.
styleguide  google  webdesign 
22 days ago by JustPixels
Eric's Archived Thoughts: Linear Gradient Keywords
Eric Meyer shares some insight into code variations to control linear gradients with CSS.
css  webdesign  gradient 
22 days ago by JustPixels
Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap | 456 Berea Street
css3  webdesign  typography 
27 days ago by JustPixels
CSS3 Shapes | CSS3 Shapes Resource
Guide for creating shapes with CSS.
css3  webdesign  code 
28 days ago by JustPixels
Category Functions for WordPress : Perishable Press
Extensive article that catalogs all the things you can do with categories in your WordPress site.
wordpress  webdesign 
28 days ago by JustPixels
Slowy app | Real-world connection simulator and bandwidth limiter
Use this local software application to test web page load times in simulated environments. Test you site on a slow iPhone connection or something else. It's not expensive and worth a shot.
webdesign  testing 
4 weeks ago by JustPixels
Automatic responsive images in WordPress | Viewport Industries
webdesign  wordpress  responsive  images 
4 weeks ago by JustPixels
Mobile Web Best Practices 1.0
From the W3C
webdesign  mobile  standards 
4 weeks ago by JustPixels
* { box-sizing: border-box } FTW « Paul Irish
Technique (perhaps a hack?) to apply box-sizing to an entire website which will make all DIVs behave as common-sense would expect (rather than constantly adjusting the dimensions when padding/border is modified). Check this out BUT use it at the beginning of a project - not part-way through!
css  layout  webdesign  code 
4 weeks ago by JustPixels
On :target | CSS-Tricks
This has more to do with user-experience (UX) than visual design - but it's important! This article shares how to use the "target" attribute in URLs with a variety of results. Here's one way it can be used - establish a target on a page with something like #blog-page and then include that at the end of the URL that leads to this page. Then, when the link/button is clicked the next thing you will see is that section labeled with the #blog-page target. Kinda cool!
css  code  webdesign 
5 weeks ago by JustPixels
A Baseline for Front-End Developers - Adventures in JavaScript Development
Front-end development challenge: Learn more, get better at it! This article covers one person's evolution into a better front-end code developer and includes links to many resources to help begin your own evolution.
javascript  code  webdesign 
5 weeks ago by JustPixels
Beginner’s Guide to Responsive Web Design | Think Vitamin
Nice article that breaks down the fundamentals for responsive web design (RWD).
responsive  webdesign  css 
5 weeks ago by JustPixels
CSS Sprites Revisited | Smashing Coding
Fun article that discusses the pros, cons and process to create CSS sprites.
css  code  webdesign 
6 weeks ago by JustPixels
CSScience - CSS3 Responsive Slider / Carousel Using Radio Buttons
Y'know those popular big-ass-image sliders that appear at the top of web pages these days? Well, here's a version that is responsive to the viewport size.
css3  responsive  rwd  webdesign 
6 weeks ago by JustPixels
The simplest way to handle retina graphics for iPad and iPhone - Stuff in my head - by Alex Morris
ipad  webdesign 
6 weeks ago by JustPixels
Add Short Description in Main Menu
Add descriptive text to navigation menu items in your WordPress website. This requires a lot of code but the article provides everything you need to get started. Nice solution for robust website navigation!
wordpress  code  webdesign 
7 weeks ago by JustPixels
Style Tiles
A modified version of "mood boards" though I don't see much difference - at least not from my method of "mood boards." It's a good idea - but really just applying a label to their own interpretation of the "mood board" concept.
design  webdesign 
8 weeks ago by JustPixels
20 tools to help you create responsive web designs
responsive  tools  webdesign 
9 weeks ago by JustPixels
The Responsinator
Online tool to test your website for RWD (Responsive Web Design) results. Enter the domain for your site and it will create previews in a scrolling view of a variety of mobile devices.
responsive  testing  webdesign 
11 weeks ago by JustPixels
Dynascript Regular OT | Single Font | FontShop
Great, rich, wonderful script/italic (you can pick one!) typeface with fun, retro character and a modern feel. Great for something that needs a vintage feel of old signage but with a contemporary edge.
typeface  font  webdesign  design 
11 weeks ago by JustPixels
Test sites for responsiveness with http://responsive.is/
Use this online tool/website to test an existing site for responsiveness to different devices/viewports.
tool  test  rwd  responsive  webdesign 
11 weeks ago by JustPixels
Impatient Web Users Flee Slow-Loading Sites - NYTimes.com
Speed of your website - it does matter. An article (with references) at NYTimes.com
webdesign 
11 weeks ago by JustPixels
Wireframes
A web page that demonstrates how a website page wireframe layout will change with RWD (Responsive Web Design).
responsive  webdesign  rwd 
11 weeks ago by JustPixels
Colllor - Turn one color into many alternative ones
color  css  tools  webdesign 
february 2012 by JustPixels
Stop Writing Project Proposals | Smashing Magazine
Great article that pitches the idea to stop writing/presenting proposals. Instead, provide a Project Evaluation - and charge for this service. The result is a detailed plan for a project that provides the ingredients required to estimate a price.
business  writing  webdesign 
february 2012 by JustPixels
Pure CSS carousels
Clever techniques to implement a carousel-type display of a group of images - with ZERO javascript!
css  css3  webdesign 
february 2012 by JustPixels
CSS background display testing
Use this online tool to experiment with different CSS background attributes.
webdesign  css 
february 2012 by JustPixels
Screen Dimensions with Viewport Meta
Online tool to measure the pixel dimensions of a monitor or the browser viewport.
webdesign  tool 
february 2012 by JustPixels
7 Great CSS based text effects using the text-shadow property - Midwinter Duncan Grant
css  css3  typography  webdesign 
february 2012 by JustPixels
Sim Daltonism
Sim Daltonism is a color blindness simulator for Mac OS X. It filters in real-time the area around the mouse pointer and displays the result ” as seen by a color blind person ” in a floating palette.
accessibility  color  webdesign 
february 2012 by JustPixels
Contrast Analyser for Windows and Mac | The Paciello Group
It is primarily a tool for checking foreground & background colour combinations to determine if they provide good colour visibility. It also contains functionality to create simulations of certain visual conditions such as colour blindness.
accessibility  color  tools  webdesign 
february 2012 by JustPixels
Color Oracle
Color Oracle is a free color blindness simulator for Window, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.
accessibility  tool  webdesign 
february 2012 by JustPixels
Understanding CSS’s vertical-align Property | Impressive Webs
Instructional article about using "vertical-align" with CSS and your webdesign projects.
css  webdesign 
february 2012 by JustPixels
CSS3 breadcrumbs - RedTeamDesign
css3  webdesign 
february 2012 by JustPixels
Station Street — Hot Dogs • Fresh Cut Fries • Since 1915
Example of a Responsive Web Design
webdesign  inspiration  rwd  responsive 
february 2012 by JustPixels
Multiple Attribute Values | CSS-Tricks
This is a great explanation for the difference between the way a 'class' will behave compared to other attributes, such as "data-type. A 'class' will understand multiple names in a string but a "data-type" sees the string as one type, not three separate. Good explanation in this article with easy to understand examples.
css  webdesign  code 
february 2012 by JustPixels
Beautiful web type — the best typefaces from the Google web fonts directory
Showcase of nice typography using Google web fonts.
webdesign  typography  webfonts  @font-face 
february 2012 by JustPixels
The Future Of Screen Typography Is In Your Hands - Smashing Coding | Smashing Coding
javascript  typography  webdesign 
february 2012 by JustPixels
Bricss - Simple responsive design test page
Tool to test your Responsive Website Design (RWD) right inside a folder on your local computer. Seems easy. Try it. You may like it.
responsive  webdesign  test 
january 2012 by JustPixels
Best Practices in Web Development Instruction :: WebDesign.com
education  webdesign 
january 2012 by JustPixels
Nine Thoughts
Nice example of a very compelling 'hover' state over an entire block of "teaser" content.
webdesign  css  inspiration 
january 2012 by JustPixels
hextone: convert hex to rgb
This simple, online tool will accept a hex color value and convert it to RGP values to help ease the process of webdesign and using new CSS3 techniques.
webdesign  tool  hex  color 
january 2012 by JustPixels
Subtle Patterns | Free textures for your next web project
Vast collection of background patterns (tile 'em) for your website design projects.
design  pattern  patterns  textures  webdesign  inspiration 
january 2012 by JustPixels
Web Fonts: The Need to Know Basics « fonts.com blog
3 basic points plus a link to a slideshow "primer" about webfonts.
webfonts  @font-face  webdesign 
january 2012 by JustPixels
Centered heading with rules ✿ dabblet.com
Code and demonstration of horizontally centered headings with a horizontal line on the left and right sides. Very clever!
css  webdesign 
january 2012 by JustPixels
Responsive Design, Responsively Illustrated
Great to explain and demonstrate the idea of "responsive design" with this web page that displays an illustrated mockup of devices. Change the size of the browser viewport and the illustration changes. Great for students!
design  responsive  webdesign 
january 2012 by JustPixels
Lined paper that follows the text ✿ dabblet.com
Nicely done - web page text content that looks like text on blue-lined paper.
css  css3  webdesign 
january 2012 by JustPixels
John Tanedo | Quotes on Design
Interesting treatment for vertical nav with horizontal bars that stretch across the left-side of the browser's viewport. Nicely done!
webdesign  css  inspiration 
january 2012 by JustPixels
Writing forward-compatible websites - MDN
Tips to assure your website will not break in future versions of web browsers.
webdesign  css  javascript 
january 2012 by JustPixels
Mind Your En And Em Dashes: Typographic Etiquette - Smashing Magazine
Great guide and reference for typography in websites. Great guidance and nice examples.
typography  webdesign  design 
january 2012 by JustPixels
CSS effect: space images out to match text height
css  webdesign  code 
december 2011 by JustPixels
CSS3 Generator
Online tool that will generate the appropriate CSS code for a handful of effects. You select a property from a dropdown menu, select preferences (if any) and see a preview. Then grab the code and you are off and running.
css  css3  tools  webdesign  tool 
december 2011 by JustPixels
ProCSSor - Advanced CSS Prettifier
This online tool will process your CSS file and modify the formatting with a consistent appearance according to your preferences. Looks nice and easy to use!
tool  tools  webdesign  css  code 
december 2011 by JustPixels
Space Ipsum
Lorem ipsum with a space flavor... outer space, that is.
webdesign  typography 
december 2011 by JustPixels
Introducing dabblet: An interactive CSS playground | Lea Verou
More about "dabblet".
css  css3  webdesign 
december 2011 by JustPixels
demosthenes.info – CSS3 Border-Image Explained
CSS3 "border image" is a complicated property to establish. This article attempts to provide some clarity with good examples.
css3  webdesign 
december 2011 by JustPixels
An Introduction To Object Oriented CSS (OOCSS) - Smashing Coding
code  css  reference  webdesign 
december 2011 by JustPixels
Gridlover
Interesting online tool to experiment with and preview typography settings incorporating size and scale. Establish settings and preview the CSS code - as px, em and even rem. Nice tool for learning the relationship between the different size values.
css  grid  tools  typography  webdesign 
december 2011 by JustPixels
CSS3 Generator | CSS3 Tools and Snippets | CSS3Gen
Another online tool to help you build CSS code for border radius, text shadow and box shadow.
css3  gradient  tools  webdesign 
december 2011 by JustPixels
Formee - Fresh baked forms for your websites! - framework, xhtml, css, form, web
Tool that helps create HTML forms for your website. Design assistance, too, to align things and make your form look professional. Something worth a try!
css  forms  webdesign 
december 2011 by JustPixels
CSS3 Menu. Free CSS Menu Maker
Buttons! This is a tool that helps create menus using CSS. Menus can have flyouts, dropdowns and all types of annoying distractions. Still - some features and results may be useful. Try it!
css  css3  navigation  webdesign 
december 2011 by JustPixels
The first commented line is your dabblet’s title ✿ dabblet.com
Cool online tool to create CSS code with a live preview. These are great for advanced features, such as color gradients. dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won't have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.
css  css3  tools  webdesign 
december 2011 by JustPixels
Lettering.js - A jQuery plugin for radical web typography.
JQuery code that provides down-to-the-letter control for styling.
css  javascript  jquery  typography  webdesign 
december 2011 by JustPixels
The difference between width:auto and width:100% | 456 Berea Street
VERY good explanation and demonstration of width: auto vs. width: 100% - tells us that "auto" is really the best solution in most situations. Good tip for students, too.
css  layout  webdesign  code 
december 2011 by JustPixels
10 Free Responsive WordPress Themes
Responsive Design in WordPress themes - a collection.
responsive  themes  webdesign  wordpress 
december 2011 by JustPixels
10 Blank/Naked Wordpress Themes Perfect for Development
Blank (more or less) themes to begin your WordPress project.
themes  wordpress  webdesign 
december 2011 by JustPixels
Easy Fixes to Common Accessibility Problems | Yahoo! Accessibility Library
A long list of tips for accessibility and working with buttons/links. Check 'em out - there's a bunch!
accessibility  css  webdesign  code 
december 2011 by JustPixels
« earlier      

related tags

@font-face ⊕  accessibility ⊕  aea ⊕  an-event-apart ⊕  analytics ⊕  animation ⊕  bad ⊕  books ⊕  breadcrumb ⊕  browser ⊕  business ⊕  coda ⊕  code ⊕  collaboration ⊕  color ⊕  content ⊕  content-strategy ⊕  contract ⊕  corners ⊕  css ⊕  css3 ⊕  design ⊕  education ⊕  em ⊕  emulator ⊕  examples ⊕  facebook ⊕  firefox ⊕  flash ⊕  font ⊕  fonts ⊕  forms ⊕  fout ⊕  framework ⊕  google ⊕  gradient ⊕  grid ⊕  hex ⊕  html5 ⊕  images ⊕  inspiration ⊕  iOS ⊕  ipad ⊕  javascript ⊕  jquery ⊕  layout ⊕  learning ⊕  lecture ⊕  mac ⊕  macintosh ⊕  microformats ⊕  mobile ⊕  mockups ⊕  navigation ⊕  optimization ⊕  pattern ⊕  patterns ⊕  plugin ⊕  plugins ⊕  pout ⊕  questionnaire ⊕  reading ⊕  reference ⊕  research ⊕  responsive ⊕  responsive-design ⊕  rwd ⊕  seo ⊕  software ⊕  speed ⊕  sprites ⊕  standards ⊕  strategy ⊕  students ⊕  styleguide ⊕  SVA ⊕  svn ⊕  talent ⊕  template ⊕  templates ⊕  test ⊕  testing ⊕  textmate ⊕  textures ⊕  themes ⊕  tip ⊕  tool ⊕  tools ⊕  tutorial ⊕  tutorials ⊕  type ⊕  typeface ⊕  typekit ⊕  typography ⊕  ui ⊕  usability ⊕  UX ⊕  validation ⊕  video ⊕  webdesign ⊖  webfonts ⊕  webkit ⊕  webmaster ⊕  website ⊕  wordpress ⊕  writing ⊕  Zeldman ⊕ 

Copy this bookmark:



description:


tags: