-2

I am quite a new to (or way too old for) a modern HTML, and i had to develop simple UI. I need to support 2 types of screen in it:

enter image description here

So UI consists of a menu, and content, for instance, a text with a picture aside. In my times layouts were done via <table><tr><td>.. or <frameset>..-like stuff. But one scheme is <td>item1</td><td>item2</td> and the other is <tr>item1</tr><tr>item2</tr>. In a static .htm text file i can write only one variant.

What are some of the common development frameworks that can support both views equally? Most of the common development frameworks like Bootstrap take a 'mobile first' approach to responsive design, which means that desktop views are often less than optimal, while development frameworks like Material Design can be difficult to interpret.

Are there development frameworks known for its suitability for both desktop and mobile views?

  • 1
    @xakepp35 your question is more suited to StackOverflow or other StackExchange sites, and any commentary that are directed at individuals are best left out of the main discussions as it is not focusing on the question or the answers (which I think you'll agree is the main point of the site). If you have any questions please feel free to air them in the chat sections of the site. – Michael Lai Oct 20 '18 at 23:09
  • Community is so narrow, one question per day, or a couple.. so almost every question related to UI/UX in here could be considered of some degree of importance. This network's question flow volume is far away from that of SE - that "filtering" rule here is really baseless. – xakepp35 Oct 20 '18 at 23:46
  • The reason for asking the question at the most appropriate forum is so that your question can be addressed by those people most qualified or experience to answer those questions. You can probably verify this for yourself by asking the same question at StackOverflow and compare the results. – Michael Lai Oct 20 '18 at 23:48
  • 1
    I think with perhaps wording changes this is a valid question. UX is holistic and often UX teams are asked to provide spec documents and prototypes for how the development team will execute on the designs. If OP is unable to make designs that be built efficiently in today's accepted front-end frameworks than the designs will get blocked at any technical assessment reviews. Lets either update the Wiki or this question to help other UX designs understand what tools the dev have at hand that they can follow when make their designs so design hand-off can be accomplished. – Bromox Oct 20 '18 at 23:49
  • @MichaelLai Yes, for sake of experiment I did that, and saw opposite: UX's answer was faster. Also it was better detailed. All that is because people in here are more tied to designs, so they could know frameworks better than "generic" programmers. So it should be a correct place for my kind of "novice" question. Like stack overflow should be a home for var keyword question – xakepp35 Oct 20 '18 at 23:53
1

Oh the good ol'days.

Yes, your correct layouts were done quite often with tables but in todays modern web design we work with grid systems and media queries for responsive web design.

CSS Frameworks

You can achieve the layout you want with basic CSS which will change your layout based on device width but it much easier to develop these sorts of designs with CSS frameworks like Bootstrap.

It is a lot of cover and this community isn't about the execution of design but more around the strategy.

That being said though, head on over to bootstrap and give their grid layout guidelines a read.

There are many ways to put bootstrap in your codebase, the easiest is to add the CDN inside your header tags.

<Head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

Once that is installed you can use the class attribute on your HTML tags to control the layout class="".

  • 1
    To get a bit detailed, treat your menu as list items. In your css you would ensure any <li> has a display set to "inline-block". Then using a media queries you can set the display to "block". Read more on css display properties here: w3schools.com/cssref/pr_class_display.asp – Bromox Oct 20 '18 at 19:03
  • I could but with a little reading you'll find exactly what your looking for. This has all been done many times before, infect you can even download templates and just alter the content. For navigations please read: getbootstrap.com/docs/4.1/components/navs – Bromox Oct 20 '18 at 19:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.