Tag Info

Hot answers tagged

13

Responsive Design is a design philosophy where in the design of the system (the representation and the layout) responds/adapts depending upon the layout of the device. The primary reason to keep your design responsive is to increase the reach of your application to a larger user base using an array of devices. Improving Usability and accessibility: A ...


11

The answer you are looking for is the difference between responsive and adaptive web design. Simply said, responsive is where you can resize your browser window and the website/app resizes with it. Adaptive is exactly as you said: designed for a couple of viewports, so maybe for an iPhone, a tablet, and 15" computer screen. However, adaptive might not be ...


9

As far as I am aware there aren't any industry standards. From experience they seem to differ slightly depending on who you talk to. Smashing Magazine recently did a good article about logical breakpoints for responsive design. Understand what resolutions the potential users of the system will be using. This should help inform your break points. My point ...


9

Strikes me as very problematic. Adapting to a device's width is much more useful than adapting to it's aspect ratio. In most cases you wouldn't want the same layout on a 4 inch (diagonal) device as a 10 inch device, even if they have the same aspect ratio. Another problematic issue here is that, when dealing with text on the web, it's too hard to control ...


9

We need to quit thinking "mobile friendly" and start thinking "device independent". Even mobile devices have resolutions and physical sizes once only found on desktop computers and some cannot be detected as mobile or not. You cannot point to any one width based on resolution where you can be sure it will fit most devices and, even then, that may all change ...


8

Consider opportunity for better IA: Instead of just thinking how one could show 150 or even 50 menus on mobile page, I think first of all the efforts should be directed for better information architecture. Ideally it should be identified by users (Card sorting) but at some level (considering experience and domain knowledge) designer and stakeholders can ...


8

Responsive Web Design is a term coined by Ethan Marcotte to describe techniques that use CSS media queries, a fluid grid, and other techniques to adapt a web page to various screen resolutions (usually based on width breakpoints). Typically there will be 3-4 breakpoints as you describe (mobile, tablet, desktop, extra large desktop) in a given design, but ...


8

Break the header into two. Yes, you can change the website header across devices. However, the example shows what looks like a logo on top of a background image. Consider breaking the header into both a raster image (the background) and a vector image (the logo). This will allow the background to scale down to a mobile device while allowing the logo to ...


7

Instead of displaying the content in modal windows as you do on the desktop version of your website, you could consider displaying the content in slide-out panes or separate pages on your mobile (responsive) version. Add an easy to use slide up / slide down button large enough for a user to tap on with their finger. What type of information do you store in ...


7

Great question. You'll have a couple of options and I've sketched out 3 variations for your. Version 1 – The drop down menu Uses a simple drop down menu that contains your secondary navigation. Pros: Close to the content Takes up very little space Cons Not everyone understand what filter means or understand why they'll need it. Version 2 – ...


7

"Profile" "Account" "Settings" Any of these or anything similar if you're worried about users inputting long names. Possibly with an icon in front that corresponds to it, be it a silhouette, gears, or anything else you deem fitting. If that doesn't fit, just the icon, or even replace it with a user's avatar/user-icon. That probably fits best with your ...


6

Yes, you should still provide social sharing options Here are some of the reason why: When using a share button on a site, you may not be sharing the same URL that the site appears to have. For example, if I select 'share' on this page, the URL that I get to share is: http://ux.stackexchange.com/q/38299/4595 (which includes my userID of 4595). But if I ...


6

Websites typically don't alter their font based on display size, and I don't think you should, either. Why not? Other websites don't do it. Your site's behavior will be unexpected. You can't really do it accurately. There are at least three key variables here: screen size, screen resolution, and distance of viewer from the screen. You only know screen ...


6

Why don't you try the usual responsive solution? When displaying the images on mobile, switch from a side-by-side to a stacked view. The same images which the web users see are there and they can click whichever one they want. Regarding the issue of clicking image to visit page: The visual cue problem is similar on both platforms. You can add a hyperlink or ...


6

Amazing how I've never thought about this 'conundrum' before, but it's intriguing. Here are the possible solutions I could come up with: Two menu buttons My first thought was to put the sub nav off-canvas to the left. Leaving you with a menu button on the right for a dropdown menu of the main nav and a menu button on the left for the off-canvas sub nav. But ...


6

I started out doing front-end development, and shifted into specializing in UX so I spent a lot of time doing the Photoshop/Illustrator to Browser routine. When I joined the team I'm on now, I had to adapt to an Agile environment and have managed to find a balance that works well. Mind you, on the small team I work on I'm one of those 'unicorn' types that ...


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 ...


6

We always need a negative space around our content and that negative space helps our mind comprehend which sections of content are connected and which are separated. There is another concern and that is related to perception of content. if there was no border around the content, how would you know if the words which are now touching the edge of the ...


5

Web design has always been about choosing an audience you care about. You could care about every single browser in use and either rely on the minimal set of common functionality or use progressive-enhancement/graceful-degradation techniques to take advantage of modern functionality where it's available. The later approach takes much resources. Personally ...


5

Using the term 'form factor' is not usual for software UI, as you ask. But why not? As for me, 'form factor' stands for 'size', 'dimension', 'footprint', etc. So if you tell me about your application form factor I think about screen resolution and screen dimensions - i.e. screen form factor. But as we can see this is again about hardware. The problem with ...


5

I've heard and had this talk too. In my view, people walk away from wireframing and designing in Photoshop or any other tool because with RWD we no longer design for a fixed width. Some people also walk away because they think creating mockups and then designing and then developing seems cumbersome. So then what you do? The answer I hear the most is 'in ...


4

The pattern is OK, but an anchor link is a jarring experience for a button that indicates "navigation". I do like having the navigation on the bottom of every page because it emphasizes content over navigation on smaller screens. There are pros and cons to the solution, but I wouldn't use it. Some quotes I found about this method: "Anchor jump can be ...


4

I think it's a great idea, and see no reason why you can't implement it. Responsive design is (still) an emerging discipline, and if you manage to show that aspect ratio gives better User Experience than todays viewport width approach, then you may even effect the future path of cross-device and responsive design. Explore, experiement, implement and test.


4

Websites that aren't designed with consideration of phone/tablet use are not only more difficult to use on a phone/tablet, they will be perceived as old fashioned and not up to date when accessed on a touch device. An immediate impression will be "old technology", like when one comes across a website that uses frames, or Java, or blinking text. And as more ...


4

I agree with @jonw's comment above, that ideally you would re-design your content from scratch. If for whatever reason management won't wait that long (still do try to persuade them to redo sometime your content for mobile please!), then I have found the most honest approach and the one which will not break UX fundamentally the following: Break the site ...


4

I think the problem is probably not that the links are long (and you've mentioned that shortening them is not an option). The problem is that the links look like links and are thus overwhelming. Below is a native app with a UITableView that you can find in many apps. Guess what, when you click on a row, you go to somewhere. And of course that's tons of ...


4

To be honest if I were in this situation I would build a site layout that is fluid using wrapper widths based on percentages of em/rem units, adapting to all screen sizes. I'd also add the minimal amount of additional responsive features for an acceptable mobile user experience, including a shown/hidden navigation, stacking the column layout to a one column ...


4

First of all, since it's your site, don't guess; know! It's very simple. If you haven't already, add Google Analytics to your site. From there, you can actually see what Mobile Device, Browser, OS, Screen Resolution, etc. that your visitors use. Lastly, after you have what you consider enough data, make your decision on what resolutions you want to ...


3

Check your analytics and see what your users are actually using and where the trend is then design around that. Not devices but look at resolution and screen widths The idea of designing around content is a great one, but honestly who gets that level of detail upfront? Most of the time the client still hasn't worked out their content strategy and it's ...


3

The current trend is to design breakpoints with content in mind. At some width the content will appear either too squished (or stretched out) and that's when a breakpoint should be used to rearrange things, even if it doesn't correspond to a common device width. The content should look well laid out at any device width (within reason, no need to fill ...



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