Technical Blog Part 3. Responsive design

<ul> <li class="question">What a responsive site is, and why responsiveness is important.</li> <p class="answer"> Responsive website is a site created based on a design approach that gives excellent viewing experience across devices of all sizes. Users view websites on mobile phones, tables, desktop monitors, large screens, and it is important to give the best user experience no matter what on what screen size a website is open. </p> <li class="question">What mobile first design is, and why it's important.</li> <p class="answer">Mobile first design is an approach when a website layout is created for small screens first, and then scaled up for larger screens. As in most cases mobile devices are tend to be less powerful than devices with big screens, a website will be loading faster as it won't load extra code (@media queries); so @media queries will be loaded only for bigger screens, meaning there will be less unuseful code for mobile devices. </p> <li class="question">What frameworks are, and their pros and cons.</li> <p class="answer">A framework is a set of rules and concepts that helps to build a website faster as it solves common type of difficulties. A framework provides a common structure that can be reused and amended. However, there are a few disadvantages of using a framework: unused code in your project, time consuming to learn rules of a particular framework. </p> <li class="question">What a wireframe is and why we use it.</li> <p class="answer">Wireframe is a basic visual representation of elements on a website, and it helps to structure and create an information hierarchy. Wireframe examples are below. </p> <div class="row"> <div class="three columns flip"> <figure> <img src="/images/wireframe-blog-page-desktop.jpg" alt="wireframe-blog-page-desktop"> <figcaption> <a href="/images/wireframe-blog-page-desktop.jpg" target="_blank"> <p>Wireframe Blog Page Desktop</p></a> </figcaption> </figure> </div> <div class="three columns flip"> <figure> <img src="/images/wireframe-blog-page-mobile.jpg" alt="wireframe-blog-page-mobile"> <figcaption> <a href="/images/wireframe-blog-page-mobile.jpg" target="_blank"> <p>Wireframe Blog Page Mobile</p></a> </figcaption> </figure> </div> <div class="three columns flip"> <figure> <img src="/images/wireframe-index-page-desktop.jpg" alt="wireframe-index-page-desktop"> <figcaption> <a href="/images/wireframe-index-page-desktop.jpg" target="_blank"> <p>Wireframe Index Page Desktop</p></a> </figcaption> </figure> </div> <div class="three columns flip"> <figure> <img src="/images/wireframe-index-page-mobile.jpg" alt="wireframe-index-page-mobile"> <figcaption> <a href="/images/wireframe-index-page-mobile.jpg" target="_blank"> <p>Wireframe Index Page Mobile</p></a> </figcaption> </figure> </div> </div> <br> <li class="question">The aspects of your wireframes you found difficult to implement, and why.</li> <p class="answer">Create a specific order of elements on mobile and desktop version is tricky, especially if you need to make it different for different screen sizes. Need to work more with floats. </p> </ul>

User's comments

Wireframes are really helpful!
I like the pictures too!

Add a comment