Tag Info

Hot answers tagged

13

Other than the answer provided by @icc97, a fixed navbar allows users to quickly switch to another page without having to scroll all the way up. This is only exceptionally useful when your page contents may be lengthy (e.g. infinity scroll, blogs or articles) and your users browse through many pages on your site. Facebook, Mashable, ReadWrite and ...


12

If you use almost any desktop application - the menu bar will always be visible. e.g. if you Page Down in Microsoft Word the toolbar doesn't disappear off the top. The fixed navbar is replicating that functionality.


9

Three big issues when you're considering how to deal with content on mobile devices, especially if you're trying to figure out how to re-prioritize content for different screen sizes or device capabilities. I've been calling this adaptive content, as a partner to adaptive design or responsive design. How is the content written? Truncation might work... if ...


7

For the most part the pros/cons of this come back to the classic Adaptive vs Adaptable interface argument, where Adaptive interfaces automatically adjust based on user interaction, and adaptable interfaces allow users to manually tweak them. A problem with this in particular is that text size is an accessibility issue. Not everyone has the same eyes, so ...


7

Below are the sizes I like to design for; not all of these may be ideal for your needs, however I find this tend to provide the cater to the most common configurations of devices out there. When I refer to device width, it is in "device independent pixels" :P 1024px This is the typical device width of 1:1 scale tablet in landscape mode, which also lends ...


6

Perhaps in this situation a CSS text-overflow ellipsis may suffice. There are several additional possibilities for indicating the article summary is clickable. Check out the right hand side of https://svbtle.com/ . I am a big fan of making the entire summary clickable to expose the rest of the content, not just the title. For desktop designs you can change ...


5

In her presentation at An Event Apart in Washington DC 2011 Karen McGrane discussed the need for structured content in Web sites. Following this there were lots of amusing tweets and retweets on twitter of the form: Luke Wrobleski wrote up some notes on her talk in which he says: This is not a technology problem. It’s a strategy problem. Amongst ...


2

I design for 320px wide and up. You shouldn't design for a specific set of device sizes because the range of sizes is continuously increasing - a comprehensive list of device sizes isn't comprehensive for very long. The current trend is to design breakpoints with concern for content, not device widths, and I think this approach will work well going ...


2

Not an answer, but I want to point out some of the downsides to the fixed header (if a non-answer like this is out of line please let me know). The fixed header is somewhat problematic on devices (Safari iPad and Chrome iPad): when you zoom a section of the page the header can become unfixed or semi-fixed. It will scroll but at a different rate than the ...


2

As long as your titles and images link to the full version of the article, it might not be the biggest deal to leave off a "Read More" link. That being said, it might be nice to have a visual separator between articles while scrolling vertically. I imagine the mobile experience would display: Title Image Intro Text Title Image Intro Text So if you had a ...


1

Well, any standard menu is a classic example of progressive disclosure, where first you see just the title "File" and then you see the options it contains. "Progressive Reduction" is apparently a new name for what used to be called "Adaptive UI" or just "Personalization". The classic example here is MS Office 2003, where they did just what you described - if ...


1

You are thinking from the user experience. But perhaps over thinking. The user will want a mobile design on the phone and a desktop design at home. Users will search for the info they are looking for, and good ux makes that search easier. By predicting their behavior correctly, they will judge your interface as intuitive. You asked about best practices... ...


1

As a tech demo it suggests many benefits. Most of the answers here seem to be concentrating on the negative impacts of what happens when you bring the device closer to yourself, thereby decreasing the fontsize, but I believe the benefits of this system are when you come at it from the other direction - how to present content to users viewing it where their ...


1

Not only is this invasive, raising numerous privacy concerns it also limits user choice. We shouldn't ever do anything that removes user choice. It's also based totally on assumptions about the visual acuity of the viewer as well as their preference of text size. It isn't sensible to make assumptions. There are tried, tested and accepted methods of ...


1

I see this type of responsiveness as having niche use where the user has little control over font size e.g. in an operating theatre where the surgeon is moving around the table and away from/closer to the screen


1

I think this kind of thing creates more problems than it solves. On web UIs I assume the user has set the browser font size to a comfortable size for general reading. I use the user set font for the bulk of the text content, i.e. the main reading font. Other font sizes used on the site are derived from the user set font (that is set with units of *em*s or ...


1

I think that this may have more to do with the sizing of the whole page. As screens get larger, so does the content. And that means more scrolling. If you increase the width of the page content, you would generally also increase the height and this will create more scrolling when the user tries to click a navigation link. Two of your examples (Mashable ...


1

Firstly, I just want to say that adaptive and responsive web design are two different things. Adaptive design is essentially responsive design without a fluid grid/images. At my shop, when we build responsive sites, we build the wireframes in HTML/CSS/JS with the actual breakpoints, then move onto visual mock-ups (6-10 JPGs for review: two pages of the ...


1

One approach is to build a complete set of wireframes using the "default" - or most highly-trafficked - screen size, then show representative examples in the other screen sizes you have designed for. If you have a few common screen patterns, you can probably get away with showing an example (or two) of each pattern. For any interesting one-off screens, ...



Only top voted, non community-wiki answers of a minimum length are eligible