For years, we've struggled to build resilient layouts on the web, but CSS Grid promises to change all that — and you can start using it now, with only a few properties and basic concepts. Learn how to build some previously-complex layouts in under 10 minutes, with only a few lines of code. Miriam Suzanne walks you through a practical demo.

Table Of Contents

• Calculating JPG image file size
• Online image optimization
• Automated solutions
• Image loading optimization
• Using CDN
• WebP image format
• Optimization for higher pixel density screens
• Conclusion - Optimization priority

• Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers.

• Use Action Verbs (not generic yes/no)
• Use Precise Diction (Remove vs. Delete)
• Use Task-Specific Language (Publish vs Submit)
• Use the Active Imperative Form (Read Details vs Click Here for Details)
• Use Sentence-Style Capitalization (Friendlier than Title Case)

Comment:
If you test people on an app the first time they use it, Title Case will slow you down, just as it probably did just now. However, it is much easier to see the shape of Title Case text in buttons than sentence case buttons.

The inputmode attribute that helps browsers on devices with on-screen keyboards decide which keyboard to display (e.g. telephone, numeric, email, search) has been around for long, but it wasn’t until a few months ago that Safari for iOS and Chrome for Android adopted it. Time to get familiar with the concept. Christian Oliff’s article “Everything You Wanted To Know About inputmode” is a great primer to dive deeper into the attribute and how to make use of it. (cm)

The answer is physics. Specifically Newtonian physics, the branch of science dedicated to apples falling from trees onto scientists, also referred to as classical mechanics.

Buttons normally have those traits in common: font style, font size, font color, button color, button size, borders, rounded corners, drop shadow or glow effects, hover state and animations.

If we try to change too many of these traits, the buttons might feel too foreign to the general design of the project, and in this case the user will just click the most distinct one, and we’re basically back to just one CTA button.

Spacious. Minimalist. Clean. Bountiful white space has become the de facto design aesthetic in consumer apps.

A large business by its nature has massive-scale data and usually thousands of users who directly interact with it—searching, manipulating, reporting, and more. They need to move through that data quickly, without a lot of digging around in the interface.

Can I do a better job of grouping related information?

Many people exclusively use keyboards to navigate, and rely on the focus state to know where they are on the page.

There's a huge variety of reasons why someone might use a keyboard over a mouse, and for many, using the mouse as a fallback just isn't an option.

An Exhaustive List of all the Elements you need to have/test Before Launching your Website To Production.

Google Fonts are easy to implement, but they can have a big impact on your page load times. Let’s explore how we can load them in the most optimal way.

“[…] never solve the problem I am asked to solve. […] Because, invariably, the problem I am asked to solve is not the real, fundamental, root problem.” — Don Norman in The Design of Everyday Things

When we finally shipped the feature, however, we realized that filters weren’t what users wanted at all. They wanted something much more basic: content that was relevant to their unique situation, with the minimal number of steps required to get it. Giving our users what they wanted taught us this lesson the hard way.

Create animation magic using keyframes, animation properties like timing, delay, play state, animation-count, iteration count, direction, fill mode and will-change.

“Almost everybody I know who does interesting, creative work went through a phase of years of where they could tell that what they were making wasn’t good as they wanted it to be… It is only by going through a volume of work will you close that gap, and your work will be as good as your ambitions” — Ira Glass

Every month I reflect on ‘How I can be a better Designer’. I learned through my background in visual arts that you can train yourself to draw better in a shorter period of time (literally).
I experimented with this in the Summer of 2013. My goal then was to achieve realistic sketches of eyes that captured human emotion. To do this I gave myself a 30-minute time limit and these were the results…

1) 8–6–4–2 Rapid Prototype Method
The premise of this method is to sketch for 8 minutes, 6 minutes, 4 minutes and 2 minutes with quick 2 minute feedback sessions in between.

2) A Twist on the #DailyUI Challenge
Maybe you’re like me and you’ve received the congratulatory email on Day 100 🎉 with nothing to show for it. This was the simple twist I added to get myself started.

3) Solve a Problem you’ve encountered
Take a moment in your day-to-day to note down real world problems that you wish there were better solutions for. You might already a list or two or five. It’s time to solve that problem.

A curated collection of dark UI to inspire you in your product design process.
Even more examples of dark UI could be found on our amazing visual search.

Here’s a tiny trick for making your hover states stand out, and also a cool way to target the siblings of the thing you’re hovering over. The effect is a mixture of two effects:

Scale the hovered item
Fade out the siblings

1. Lack of Planning for Edge Cases (Say NO to Lorem Ipsum)
   Using lorem ipsum and stock photos, you can easily create a beautiful, harmonic design… that will quickly be irrelevant to reality. Your beautiful design will be broken once it’s been filled by the real content.
2. Inadequate Screen Annotations
3. Frustrating Error States
4. Lack of Typography Hierarchy
5. Inadequate Padding and Spacing

We have a whole selection of ways to align things in CSS today, and it isn’t always an obvious decision which to use. However, knowing what is available means that you can always try a few tactics if you come across a particular alignment problem.

Model
The application.
View
What the consumer (user) sees. Often HTML, JSON, or XML.
Controller
A thin layer connecting the View and the Model.

Almost every MVC tutorial that I see confuses the data model with the Model.

Time and time again, it seems like reaching for input type="number" is a good idea, but it almost always isn’t. While input type="number triggers numeric keyboards on touchscreens leading to better mobile UX, that can also be accomplished by configuring the pattern attribute in a certain way (Zach Leatherman has a great deep dive post into all of this).