IOS | Austin Drupal Development and Support | Drupal Development Austin

Posts Tagged:iOS

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Practical CSS Scroll Snapping

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions like this one: Live Demo Browser support and basic usage Browser support for CSS scroll snapping has improved significantly since it was introduced in 2016, with Google Chrome (69+), Firefox, Edge, and Safari all supporting some version of it. This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.DesktopChromeOperaFirefoxIEEdgeSafari69No6311*18*11Mobile / TabletiOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox11.0-11.2NoNoNoNo60 Scroll snapping is used by setting the scroll-snap-type property on a container element and the scroll-snap-align property on elements inside it. When the container element is scrolled, it will snap to the child elements you’ve defined. In its most basic form, it looks like this: <div class=’container’> <section class=’child’></section> <section class=’child’></section> <section class=’child’></section> … </div>…

Read More →

Sticky, Smooth, Active Nav

Just like the title says! Here’s a sidebar navigation bar that… Uses sticky positioning. It stays on the screen when it can, but won’t overlap the header, footer, or ever make any of it’s links inaccessible. Scrolls smoothly to the sections you click to. Activates the current nav based on scroll position (it’s a single page thing). See the Pen Sticky, Smooth, Active Nav by Chris Coyier (@chriscoyier) on CodePen. Sticky It’s easy to toss position: sticky; top: 0; on something. But for it to work, it’s gotta be within a taller parent element. So, the unordered list (<ul>) within the navigation (<nav>) works great here. Thanks to the CSS grid layout, the <nav> is as tall as the <main> content area. However, note that that we also gotta position: -webkit-sticky; for iOS. I also tossed in a magic number for the vertical media query so that it doesn’t stick…

Read More →

The trick to viewport units on mobile

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them. Case in point: should the scrollbar be taken into account for the vw unit? What about a site’s navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can’t be overlooked. First, a little context The spec is pretty vague about how viewport units should be calculated. With mobile devices, we’re often concerned with the vertical height, so let’s look specifically at viewport height (vh): vh unit Equal to 1% of the height of the initial containing block. So yeah, no clear guidance there when it comes to handling device and browser-specific differentiations. vh was initially calculated by the current viewport of your browser. If you…

Read More →

On xlink:href being deprecated in SVG

A reader wrote in to tell me we should update our articles about SVG <use> elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says: That’s pretty strong language, hence the reader’s warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though. So… <!– This is old –> <svg> <use xlink:href=”#whatever” /> </svg> <!– This is new –> <svg> <use href=”#whatever” /> </svg> I like it. But does it actually work? Lemme fork my little old demo and change all the references. In a quick run through of what I have easy access to: Chrome 67 Firefox 61 Safari 11 Edge 17 IE 11 iOS 11 ✅ ✅ 🙅‍♂️ ✅ ✅ 🙅‍♂️ Better than I thought! But enough 🙅‍♂️ no-go’s there that up and switching everything seems far too…

Read More →

Sometimes `sizes` is quite important.

Paraphrased question from email: I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of “responsive websites,” srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where the images are 320px wide. On desktop, I have six images per slide where each is 160px wide. So the desktop images are smaller on desktop, not bigger. How do I handle this situation with srcset? I tried to be careful with that post title: “If you’re just changing resolutions, use srcset.” In this case, we’re changing the size of the images not just at certain resolutions, but at specific breakpoints as well, which means we’re also going to need to use the sizes attribute to get the most out of responsive images. The entire job of the sizes attribute is to…

Read More →

Are These Browsers Going to the Moon?

Chrome, Safari, Firefox, Edge, and (unfortunately) Internet Explorer are the most popular browsers today, and they are great. They have awesome features, sweet add-ons, and most people never give them a second thought. This post is not about those browsers, it’s about the other browsers. Browsers that can help users stay anonymous and protect their identity. Browsers that can eliminate ads and support publishers and content creators through cryptocurrency micropayments. Browsers using new protocols that promise a truly decentralized internet. Browsers that double as cryptocurrency wallets and connect users to what the, perhaps too optimistic call “web 3.0.” Coming up are four browsers that may change the way we think about the internet. Brave Browser: The micropayments experiment The Brave Browser (for Desktop) has a bunch of cool features. Brave is a micropayments platform using their own ERC20 token (BATs), it is an ad blocker, and it allows users to…

Read More →

What’s New in Basecamp 3.9.3 for iOS

The newest release introduces a brand new tab along with improvements to searching, navigation, and for people who have multiple accounts. Get it for iPhone and iPad in the App Store today. Read-on for details about what’s new…New Me tab!We know that My Assignments is one of the most popular screens in Basecamp on all platforms but it can be hard to find. Now My Assignments and the rest of My Stuff are easier to reach on the new Me tab. It also includes your Bookmarks and app Settings.Introdcing he brand new Me tab, a place to find all your stuff and settings.New Activity view switcherGone is the old Activity | Reports toggle. Basecamp now has a nice switcher to change between activity views more akin to web and mobile web. It’s easier to see what you’re currently looking at and you now stay on the same screen rather than navigating forward.Tap the…

Read More →

Tweetbot 3 for Twitter

I’ve been using Tweetbot for a loooooong time. Both the macOS and iOS versions are, in my humble opinion, the best Twitter clients available today. I’ve loved using them and have faithfully purchased upgrades every time they drop something new as I have no qualms with paying for good software. But… Tweetbot 3 for macOS was the first time that they released something that was practically useless for me. In other words, it was a major step back and “broke” a ton of natural and native workflows. No bueno. Apparently I wasn’t the only one and so they added this notice to some subsequent updates: Tweetbot 3… didn’t go over so well. Tweetbot is a complex app and as part of 3.0 we took the opportunity to simplify a number of things. This worked well but we took away a handful of options some people depended on. We are working…

Read More →

World wide wrist

After all the hubbub with WWDC over the past couple of days, Ethan Marcotte is excited about the news that the Apple Watch will be able to view web content. He writes: If I had to guess, I’d imagine some sort of “reader mode” is coming to the Watch: in other words, when you open a link on your Watch, this minified version of WebKit wouldn’t act like a full browser. Instead of rendering all your scripts, styles, and layout, mini-WebKit would present a stripped-down version of your web page. If that’s the case, then Jen Simmons’s suggestion is spot-on: it just got a lot more important to design from a sensible, small screen-friendly document structure built atop semantic HTML. But who knows! I could be wrong! Maybe it’s a more capable browser than I’m assuming, and we’ll start talking about best practices for layout, typography, and design on watches.…

Read More →

Drupal.org gets videos that make Drupal easier to learn

In the beginning of the year I started doing some iOS development for my POSSE plan. As I was new to iOS development, I decided to teach myself by watching short, instructional videos. Different people learn in different ways, but for me, videos tutorials were the most effective way to learn. Given that recent experience, I’m very excited to share that all of the task tutorials in the Drupal 8 User Guide are now accompanied by video tutorials. These videos are embedded directly into every user guide page on Drupal.org. You can see an example on the “Editing with the in-place editor” page. These videos provide a great introduction to installing, administering, site building and maintaining the content of a Drupal-based website — all important skills for a new Drupalist to learn. Supplementing user guides with video tutorials is an important step towards improving our evaluator experience, as video can…

Read More →

Google Maps Lets Users Customize Navigation Icons by @MattGSouthern

Google is letting users customize their navigation experience on the Google Maps app for iOS with new vehicle icons.The post Google Maps Lets Users Customize Navigation Icons by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

All-New Google News App Now Available on iPhone and iPad by @MattGSouthern

Google has released a completely revamped version of its Google News app on the iOS App Store.The post All-New Google News App Now Available on iPhone and iPad by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

The backdrop-filter CSS property

I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more than magic. This is because it adds filters (like changing the hue, contrast or blur) of the background of an element without changing the text or other elements inside. Take this example where I’ve replicated the iOS notification style: see how the background of each of these boxes are blurred but the text isn’t? That’s only a single line of CSS to create that faded background effect, just like this: .notification { backdrop-filter: blur(3px); } Now it’s worth noting that browser support for this CSS property isn’t particularly well supported just yet (see below). But we’ve been trying to do this sort of filtering stuff for a really long time and so it’s great to see that progress is being made here. Chris wrote…

Read More →

Overriding Default Button Styles

There are a variety of “buttons” in HTML. You’ve got: <button>Button</button> <input type=”button” value=”Button”> Plus, for better or worse, people like having links that are styled to match the look of other true buttons on the site <a href=”#0″ class=”button”>Button</a> One challenge is getting all those elements to look and layout exactly the same. We’ll cover that a few ways. Another challenge is getting people to use them correctly This is a bit surprising to me — but I hear it often enough to worry about it — is that more and more developers are using <div>s for buttons. As in, they just reach for whatever generic, styling-free HTML is handy and build it up as needed. Andy Bell explains why a real button is better: So, <button> elements are a pain in the butt to style right? That doesn’t mean you should attach your JavaScript events to a <div>…

Read More →

Facebook Introduces An Analytics App for iOS and Android by @MattGSouthern

Now available for iOS and Android, the app will help businesses conveniently review their key metrics in a mobile interface.The post Facebook Introduces An Analytics App for iOS and Android by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Finger-friendly numerical inputs with `inputmode`

Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a <input type=”number”>. This big button numeric keyboard is finger-friendly and will help prevent users bouncing from your form in frustration. However, type=”number” isn’t appropriate for all numbers. On (most) larger screens, number inputs come with an incrementer/decrementer button. It’s a useful piece of UI we get for free by default. It does, however, make this kind of input totally inappropriate for a credit card number, for example. The default UI for number inputs looks something like this in all desktop browsers The spec itself makes this clear. The type=number state is not appropriate for input that happens to only consist of numbers…

Read More →

Native-Like Animations for Page Transitions on the Web

Some of the most inspiring examples I’ve seen of front end development have involved some sort of page transitions that look slick, like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. There are a number of ways to accomplish these types of movement! Here’s what we’ll be building: Demo Site GitHub Repo We’ll build out the simplest possible distallation of these concepts so that you can apply them to any application, and then I’ll also provide the code for this more complex app if you’d like to dive in. Today we’ll be discussing how to create them with Vue and Nuxt. There are a lot of moving parts in page transitions and animations (lol I kill me), but don’t worry! Anything we don’t have time to cover in the article,…

Read More →

Hey hey `font-display`

Y’all know about font-display? It’s pretty great. It’s a CSS property that you can use within @font-face blocks to control how, visually, that font loads. Font loading is really pretty damn complicated. Here’s a guide from Zach Leatherman to prove it, which includes over 10 font loading strategies, including strategies that involve critical inline CSS of subsets of fonts combined with loading the rest of the fonts later through JavaScript. It ain’t no walk in the park. Using font-display is kinda like a walk in the park though. It’s just a single line of CSS. It doesn’t solve everything that Zach’s more exotic demos do, but it can go a long way with that one line. It’s notable to bring up right now, as support has improved a lot lately. It’s now in Firefox 58+, Chrome 60+, Safari 11.1+, iOS 11.3+, and Chrome on Android 64+. Pretty good. What do…

Read More →

Going Offline

Jeremy Keith has written a new book all about service workers and offline functionality that releases at the end of the month. The first chapter is posted on A List Apart. Now that the latest versions of iOS and macOS Safari support service workers, I can’t think of a better time to learn about how progressive web apps work under the hood. In fact, here’s an example of a simple offline site and a short series on making web apps work offline. News of Jeremy’s book had me going back through his previous book, Resilient Web Design, where I half-remembered this super interesting quote from Chapter 4: If you build something using web technologies, and someone visits with a web browser, you can’t be sure how many of the web technologies will be supported. It probably won’t be 100%. But it’s also unlikely to be 0%. Some people will visit…

Read More →

Back to Top