7 common mistakes made with responsive mockups

7 common mistakes made with responsive mockups

From Creative Bloq

Responsive design is more than just a popular design trend, it’s a practical response to the great browsing shift from desktop to mobile. To survive in the current state of the industry, web designers must support multiple screen sizes and devices, and a responsive approach (RWD) solves a lot of those problems.

http://www.creativebloq.com/web-design/common-mistakes-responsive-mockups-111517922

Media Query Code

@media screen and (max-width:500px){
#mainHead, #intro, #mainContent, #socMed{
width:95%;
position: relative;
display: block;
padding:2%;
}

#mainHead article, #intro article, #mainContent article{
width: 100%;
margin: 0 0 2% 0;
padding:1.5%;
}

#socMed{
margin:0 auto 0 auto;
}

#socMed ul{
display:flex;
justify-content:space-around;
}
}

@media screen and (min-width:501px) and (max-width:800px){
#mainHead, #intro, #mainContent, #socMed{
width:95%;
position: relative;
padding:2%;
}

#mainContent article:first-child{
width:100%;
}

#mainContent article{
width:48%;
}

}

5 Elements of the Online User Experience

Some ideas to think about while designing your web site:

Sometimes it’s nice to go back to basics and ask fundamental questions. Today, we’re going to take a look at “what elements influence the user experience of a website?” Understanding this can make it much easier to plan your UX research and ensure that you’re examining each element to some extent and that that element is working well for your users.
The 5 elements that we’ve selected that need to be examined in a UX context are:

  • Usefulness of the Website
  • Adherence to Functionality
  • Usability
  • Influence
  • Visual Design

https://www.interaction-design.org/literature/article/5-elements-of-the-online-user-experience