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

Paddi MacDonnell wrote an interesting article on the hamburger menu and related mobile-first approaches to design a few days ago: It outlines some of the problems of hamburger menus, and concludes with the observation that the device is something of a way to brush the navigation of a complex app under the carpet of the hamburger icon (my carpet analogy, not ...


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

In my personal opinion, it is not a good idea to populate the whole big screen with more content as it would strain the user's eyes and neck having to see from one corner of the screen to the other. So, its crucial to kind of limit the focus of user to a certain area of the screen. Of course, to populate the empty space of the screen, you could employ ...


7

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


7

Every example you gave would work. One might work better within your design than the other. Your users won't really care about the way the search input pops up. The best search fields are bug free are easy in use give relevant results help users find what they are looking for (auto fill or alternatives) So I would focus more on functionality and less on ...


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


6

If you are going to be building a responsive site then the chances are that you are going to use Twitter Bootstrap or some other framework for the job. Therefore, you can block out all of your prototypes in static HTML with Bootstrap CSS/JS in the . You can even hook up the buttons if you want to do a walk through, the buttons loading up the next static ...


6

Well you can easily do it in Mozilla Firefox. Try pressing ctr + shift + m Then you can choose from varieties of resolutions, also for your custom resolutions. You can drag the sides to increase and decrease the resolutions. Some links here on keyboard shortcuts and responsive design view Keyboard shortcuts on Mozilla Responsive Design View on ...


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


5

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


5

That is the "hamburger menu" and it appears that it has a history dating back as far as the 1980s. According to the article it was designed my Norm Cox, designer behind the Xerox "Star" interface. In his own words: I designed that symbol many years ago as a "container" for contextual menu choices. It would be somewhat equivalent to the context menu we ...


5

Some options to consider: Offer up a 'sneak preview'. Let people see the new version long before it's forced upon them. Listen to feedback as much as you can. Amazon does this prior to their redesigns. Launch the new version but don't force it upon them immediately. Let people opt in/out of the new design for a period of time. Google's web apps often do ...


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

Is this a good practice?, NO! As you said in "older website", web design in general has changed over the years and designers are now focusing on usability and accessibility. Those extra spaces makes your content more readable. Take a look at this: Useful Usability Findings and Guidelines


4

Let me provide you with insight of Multichannel as its just an antonym to the Cross-Channel term. Multi-channel is a way of delivering services that allows users / customers to interact with the system through a number of different channels and enables successful completion of tasks through any number of these in complete and discrete fashion. The typical ...


4

Content First One of the biggest things to consider is what can stay and what can be removed or adjusted, at each breakpoint. Smashing Magazine was the first to take the approach of leaving behind (fully hiding) some ads when it doesn't fit into the breakpoint. With the mobile first strategy, Content is King. Most ads are sold on a Cost-Per-Click or ...


3

I'm experimenting with this approach on the wireframe-design workflow: do everything in Adobe Illustrator. This approach require some initial time to set things up, but later on you get much faster than in Photoshop. Basic steps: 1) Wireframe in Illustrator. Even if it's not a specialised mockup tool it can become one. You should create personalised library ...


3

I tend to use Sketch or Omnigraffle for basic wireframing (I'm a UX Architect) and i workshop the responsive logic with the front-end designer/dev, annotate the specific logic on the wireframes (most of it is fairly basic but I like to flag specific elements that require complex logic, like a job search results page with filters) and then I hand my ...


3

One solution would be to collapse the Primary Nav, as you currently have planned and to simply stack the secondary nav items. The reason for this approach is given that there will be numerous actions involved in most of those items such as text input, dropdowns, saving, etc., you'll want to make use of the little real estate you have available, but yet ...


3

I'm a UX person who does a bit of web design on the side. In terms of workflows without Photoshop - well I have created several sites using standard wireframing/prototyping tools then had that implemented by a designer using HTML/CSS. My wireframes have increasingly become 'mid fidelity' - that is with colours and fonts but not pixel perfect. Photoshop ...


3

You may feel that the desktop version is empty, particularly as you can't help comparing it to the mobile version. But I don't feel that the desktop version is 'too empty' for me it is 'clean and clear' - exactly the sort of design you sweat blood in order to achieve. There is an important concept in UX behind it, which is called Satisficing. While it is ...


3

A little late to the party but I'm developing a project with a designer who is absolutely in love with modals. For mobile devices in 2014, modals are still a poor UX choice because of positioning and scrolling issues. They are most often JavaScript driven, which means if accessibility is important to your project then there will be a cross section of site ...


3

Regarding the header image, you can use media queries to switch the images at some breakpoint where it makes sense to do so, to make the best use of the screen space available. For example: .header { background-image: /* mobile-friendly version of image by default */; } @media (screen and min-width: 480px) { /* arbitrary breakpoint for simplicity */ ...


3

Having been asked this question in the recent past, I sense that when potential employers ask this question they are asking if the candidate understands how to balance business requirements with user needs. Responsive design is just another platform for describing your teamwork approach in an interview. They're not looking for a technical explanation or a ...



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