サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
mobile.smashingmagazine.com
One of the hardest problems in responsive Web design right now are responsive images. “Retina” images are especially a challenge because if you have sized your layout with ems or percentages, then you cannot be sure of the exact pixel dimensions of each image being displayed. In this article, Gavyn McKenzie will look at one solution to the problem that he implemented on his portfolio website at Et
Much of that page weight could be reduced if images were conditionally optimized based on device width, pixel density and modern image formats. These reductions would result in faster loading times, but the debate isn’t about whether to optimize images for different devices, but about how to go about doing so. In this article, Shawn Jansepar will take a look at Mobify.js, which lets us generate sm
In this article Ronan Cremin explains how to use RESS (responsive design with server-side components) to make significant performance and reach improvements to a website for both mobile and desktop devices alike. Your website will change from one that works on desktops, tablets and smartphones to one that works on almost anything anywhere and loads faster in all cases. It’s hard to over-emphasize
Over the past few months Jon Rundle has been involved in launching two large institutional websites with complex navigation systems on which maintaining simplicity becomes increasingly difficult as content requirements grow and tiers of navigation are added. In this article, Jon will illustrate the techniques involved in implementing responsive navigation on a large website. Central to a solid use
While srcset as implemented by WebKit doesn’t address to all the responsive images use cases, it does represent a major step toward a long overdue solution—hopefully the first of many. And as Chair of the W3C’s Responsive Images Community Group, Mat Marquis has been dreading this moment for some time now. Pertaining to “responsive images”: it’s complicated, and it can be hard keeping up with the s
The website looks gorgeous on computers with super–high-resolution displays because it includes a high-resolution version of the main image. Delivering that image file doesn’t come cheap, though; its 1940 × 1229 pixels make the image 446 KB in size after compression. The website could use that same image file for all users without compromising the visual experience. Web browsers on smaller device
If you read Smashing Magazine, you’re probably already on board with creating the best possible website experience for your audience. And if you go the responsive design route then you’ll need a strategy to make images flexible, too — a responsive image solution. This article leads you through the basics, and then arms you with the information you’ll need to pick the best responsive image solution
Responsive Web design has been around for some years now, but there’s still a whole lot to do. In this article, Stéphanie Walter will look at what is currently possible, what will be possible in the future using what are not yet standardized properties, and what still needs to be improved. This article is not exhaustive, and we won’t go deep into each technique, but you’ll have enough links and kn
The element supports a number of different types of fallback content, but the current implementation of these fallbacks is problematic. In this article Dave Newton will explore how the fallbacks work, how they fail and what can be done about it. The <picture> element is a new addition to HTML5 that’s being championed by the W3C’s Responsive Images Community Group (RICG). It is intended to provide
Today there’s no way to accurately design for the Web using physical units, nor will there be for a very long time. But there is a way to design while knowing the physical characteristics of the device. It’s called the “resolution media query”, and it’s been in the specification for media queries for some time. So, how will we use this nifty little feature, exactly? Here’s how. This post should be
A common question on clients and developers minds is, “How can we provide a great Web experience to our users on mobile?” In this article, Matt Stow will try to answer this question. If you can’t convince your clients to start from scratch with a mobile-first philosophy, he hopes this gives you the knowledge, impetus and tools that you need to retrofit their websites! Since the introduction of the
In this article, Jeremy Girard will detail the process he and his team took when they were redesigning their company’s website. including some of the changes they made along the way, as they worked to build a better responsive website. Earlier this year, I was in the beginning stages of a redesign for our company’s website. We had already been planning to use a straightforward responsive approach
From time to time, when a discussion is taking place about ways to implement responsive images, someone comes along and says, “Hey, guys! What we really need is a media query that enables us to send high-resolution images to people on a fast connection and low-resolution images to people on a slow connection.” At least early on, a lot of people agreed. From time to time, when a discussion is takin
Tricks and techniques for making an HTML5 game. In this post, Eoin McGrath creates a very simple game that works on most smartphones as well as modern browsers. The great thing about these titles is that they work equally well on both mobile and desktop using the same code. Could HTML5 finally fulfill the holy grail of “write once, run anywhere”? Getting StartedBefore you start sketching the next
Navigation menus are elements that can change dramatically in responsive websites. The change from a large context to a small context often requires changing the navigation pattern to something rarely seen on the Web until the arrival of responsive design. Icons are scattered throughout our history as a species; early man painted pictures onto stone depicting their triumphs over their hunted prey,
A round-up of resources for creating responsive website designs. Tutorials, techniques, articles, tools and more you need to create your own responsive designs. Back in January, we published an article on responsive design, “Responsive Web Design: What It Is and How to Use It.” Responsive design continues to get a lot of attention, but considering how different it is from the “traditional” way of
Update: 01/10/2012: The original version of this article by Jen Gordon was published in August 2009. It was thoroughly revised and updated by the author and published in September 2012. Update: 01/10/2012: The original version of this article by Jen Gordon was published in August 2009. It was thoroughly revised and updated by the author in September 2012. — Editorial Team Since the iTunes App Stor
In this post, James Brocklehurst helps you get to know the iOS development tools a little better. Get to know some choreographed steps of iPhone app development, even if you have little or no programming knowledge. As a designer looking to broaden your skill set, you’ve decided that learning how to make native apps for Apple’s iOS platform is an attractive and potentially lucrative prospect. With
In this post, Andreas Bovens shares an introduction to how Opera Mobile Emulator can help you optimize your responsive designs. Try it out for yourself! This is our seventh article in a series that introduces useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation,
Password protected site Please enter your password to get access. Submit
Clay Allsopp tries out RubyMotion by making an app that grabs some data from the Internet and updates the screen’s content accordingly. If you’ve hit stumbling blocks learning native iOS development or are just curious about what Ruby on iOS looks like, you should read on. Everyone is trying to craft the next beautiful iOS app, but building on Apple’s platform has traditionally required experience
Android is an attractive platform for developers, but not all designers share our enthusiasm. Making an app look and feel great across hundreds of devices with different combinations of screen size, pixel density and aspect ratio is no mean feat. Android’s diversity provides plenty of challenges, but creating apps that run on an entire ecosystem of devices is rewarding too. Android is an attractiv
Mobile users and mobile usage are growing. With more users doing more on mobile, the spotlight is on how to improve the individual elements that together create the mobile user experience. Mobile users and mobile usage are growing. With more users doing more on mobile, the spotlight is on how to improve the individual elements that together create the mobile user experience. The mobile user experi
brand new Smashing Books #3 and #3⅓ have been released last month and we’re sincerely grateful for the tremendous feedback, reviews and photos submitted by our truly smashing readers across the world. We appreciate your time and your interest, and thank you for your support and love. We are happy to present a yet another sample chapter from the book. In his chapter, Aral Balkan explores what “nati
このページを最初にブックマークしてみませんか?
『【 フリー素材・ブラシ ★ 】 - Smashing Magazine - For Professional Web Designe...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く